css经典布局

最新推荐文章于 2022-06-28 22:31:25 发布

取个昵称要人命

最新推荐文章于 2022-06-28 22:31:25 发布

阅读量187

点赞数

分类专栏：自我学习

本文链接：https://blog.csdn.net/weixin_42564514/article/details/104761084

版权

自我学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

css经典布局

1.三列布局（浮动，但是中间列在最下面，最后加载不好）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
#left{
    width:200px;
    height:200px;
    background: pink;
    float: left;
}
#right{
    width:200px;
    height:200px;
    background: pink;
    float: right;
}
#mid{
    height:200px;
    background: green;
}
</style>
<body>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="mid">middle</div>
    <!-- 这个只能放在最下面，否则不能成为三列布局，但是最下面会影响加载顺序，中间作为主要板块但是最后加载，可能用户体验不好 -->
</body>
</html>

2.圣杯布局（浮动加相对定位，中间列提升，但是相对定位也不太好）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>css</title>
	</head>
	 <style type="text/css">
	 	body{
	 		min-width: 550px;
	 	}
	 	*{
	 		margin:0;
	 		padding: 0;
	 	}
	 	.header , .footer{
	 		background: gray;
	 		width: 100%;
	 	}
	 	.footer{
	 		clear: both;
	 	}
         .main{
         	height: 200px;
         	padding: 0 150px 0 200px;
         	background: greenyellow;
         	*zoom: 1;
         }
         .left , .center , .right{
         	float: left; 
         }
         .center{
         	width: 100%;
         	height: 200px;
         	background: red;
         }
         .left {
         	width: 200px;
         	background: yellow;
         	margin-left: -100%;
         	position: relative;
         	left: -200px;
         }
         .right{
         	width: 150px;
         	background: gainsboro;
         	margin-left: -150px;
         	position: relative;
         	left: 150px;
         }
	 </style>
	<body>
		
	<div class="header">
             头部
	</div>
	<div class="main">
		<div class="center">中间中间中间中间中间中间中间后</div>
		<div class="left">左边</div>
		<div class="right">右边</div>
	</div>
	<div class="footer">
		底部
	</div>
	</body>
</html>

3.双飞翼布局（阿里大佬发明，最好的三列布局形式，只用浮动，不用定位）（双飞翼结合伪等高版本）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	#head{
		width: 100%;
		height:100px;
		background: green;
	}
	#foot{
		width: 100%;
		height:100px;
		background: purple;
	}
	#mid{
		width: 100%;
		*zoom: 1;
		overflow: hidden;
	}
	#mid::after{
		content: "";
		display: block;
		clear: both;
	}
	#content{
		background: pink;
		width: 100%;
		float: left;
	}
	#left{
		background: red;
		width: 200px;
		float: left;
		margin-left: -100%;
		padding-bottom: 10000px;
		margin-bottom:-10000px ;
	}
	#right{
		background: blue;
		width: 150px;
		float: left;
		margin-left: -150px;
		padding-bottom: 10000px;
		margin-bottom:-10000px ;
	}
	#in{
		padding: 0px 150px 0px 200px;
		/* margin: 0px 150px 0px 200px; */
		background:yellow ;
	}
</style>
<body>
	
	<div id="head"></div>
	<div id="mid">
		<div id="content">
			<div id="in">
				中间<br>中间<br>中间<br>中间<br>
				中间<br>中间<br>中间<br>中间<br>
				中间<br>中间<br>中间<br>中间<br>
				中间<br>中间<br>中间<br>中间<br>
			</div>
		</div>
		<div id="left">
			左边左边<br>
			左边左边<br>
			左边左边<br>
			左边左边<br>
			左边左边<br>
			左边左边<br>
			左边左边<br>
		</div>
		<div id="right">
			右边右边<br>
			右边右边<br>
			右边右边<br>
		</div>
	</div>
	<div id="foot"></div>
</body>
</html>

4.伪等高布局（margin负数配合padding）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
	</head>
	 <style type="text/css">
	 	body{
	 		min-width: 550px;
	 	}
	 	*{
	 		margin:0;
	 		padding: 0;
	 	}
	 	.header , .footer{
	 		background: gray;
	 		width: 100%;
	 	}
	 	.footer{
	 		clear: both;
	 	}
         .main{
         	padding: 0 150px 0 200px;
         	background: purple;
         	*zoom: 1;
			 overflow: hidden;
         }
		 .main::after{
			 content: "";
			 display: block;
			 clear: both;
		 }
         .left , .center , .right{
         	float: left; 
         }
         .center{
         	width: 100%;
         	background: red;
         }
         .left {
         	width: 200px;
         	background: yellow;
         	margin-left: -100%;
         	position: relative;
         	left: -200px;
			padding-bottom: 10000px;
			margin-bottom:-10000px;
         }
         .right{
         	width: 150px;
         	background: gainsboro;
         	margin-left: -150px;
         	position: relative;
         	left: 150px;
			 padding-bottom: 10000px;
			 margin-bottom:-10000px;
         }
	 </style>
	<body>
		
	<div class="header">
             头部
	</div>
	<div class="main">
		<div class="center">
			中间中间中间中间中间中间中间后<br>中间中间中间中间中间中间中间后<br>
			中间中间中间中间中间中间中间后<br>
			中间中间中间中间中间中间中间后<br>
			中间中间中间中间中间中间中间后<br>
			中间中间中间中间中间中间中间后<br>
			中间中间中间中间中间中间中间后<br>
			中间中间中间中间中间中间中间后<br>
			中间中间中间中间中间中间中间后<br>
			中间中间中间中间中间中间中间后<br>
		</div>
		<div class="left">
			左边<br>左边<br>左边<br>左边<br>左边<br>左边<br>左边<br>左边<br>
		</div>
		<div class="right">右边</div>
	</div>
	<div class="footer">
		底部
	</div>
	</body>
</html>

5.粘贴布局（手机底部定位）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
*{
	padding:0px;
	margin: 0px;
}
html,body{
	height: 100%;
}
#boss{
	background: purple;
	min-height: 100%;
}
#foot{
	background: blue;
	height:50px;
	margin-top: -50px;
}
#content{
	padding-bottom:50px ;
	
}
</style>
<body>
	
	<div id="boss">
		<div id="content"> 
			hello <br>hello <br>hello <br>
		hello <br>hello <br>hello <br>
		hello <br>hello <br>hello <br>
		hello <br>hello <br>hello <br>
		hello <br>hello <br>hello <br>
		hello <br>hello <br>hello <br>
		hello <br>hello <br>hello <br>
		</div>
	</div>
	<div id="foot">

	</div>

</body>
</html>

6.bfc两列布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	*{
		padding: 0px;
		margin: 0px;
	}
	#left{
		width:200px;
		height:100px;
		background: purple;
		float: left;
	}
	#right{
		height: 100px;
		background: green;
		overflow: hidden;/* 这个属性就是开启bfc  bfc区域不会与float box重叠 */
	}
</style>
<body>
	<div id="left">
		zuo
	</div>
	<div id="right">
		you
	</div>
</body>
</html>

7.商品两列布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	*{
		padding: 0px;
		margin: 0px;
	}
	#boss{
		width:300px;
		margin:0px auto;
		border: 1px solid black;
	}
	#img{
		width:100px;
		height: 100px;
		background: url('http://img2.imgtn.bdimg.com/it/u=1651650751,3930891035&fm=26&gp=0.jpg');
		background-position: -110px -110px;
		float: left;
		margin-right:10px ;
	}
	#content{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}
</style>
<body>
	
	<div id="boss">
		<div id="img">
			
		</div>
		<div id="content">
			这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>
			这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>
			这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>
			这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>
			这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>这是海贼王这是海贼王这是海贼王这是海贼王这是海贼王<br>
		</div>

	</div>

</body>
</html>