CSS布局

最新推荐文章于 2022-02-05 22:58:21 发布

涟动下渔舟

最新推荐文章于 2022-02-05 22:58:21 发布

阅读量409

点赞数

分类专栏： CSS DIV 布局

本文链接：https://blog.csdn.net/woyidingshijingcheng/article/details/52714052

版权

CSS DIV 布局专栏收录该内容

0 篇文章 0 订阅

订阅专栏

 
 单列布局（1-1-1布局） 

框架：

<div id="header">
<div class="content">
</div>
</div>
<div id="content">
<div class="content">
</div>
</div>
<div id="pagefooter">
<div class="content">
</div>
</div>

模型图：

 
 1-2-1固定宽度布局 

  框架： 

<div id="header">
<div class="content">
</div>
</div>
<div id="container">
<div class="content">
</div>
<div class="side">
</div>
</div>
<div id="pagerfooter">
<div class="content">
</div>
</div>

  模型： 

 
 例：绝对定位法： 

  #header,#pagefooter,#container{ 

  margin:0 auto; 

  width:760px; 

}

  #container{/*包含content和side*/ 

  position:relative; 

}

  #content{ 

  position:absolute; 

  top:0; 

  left:0; 

  width:500px; 

}

  #side{ 

  margin:0 0 0 500px; 

}

 
 浮动法： 

  #content{ 

  float:left; 

  width:500px; 

}

  #side{ 

  float:left; 

  width:260px; 

}

 
  1-3-1固定宽度布局 
 

   框架： 
 

<div id="header">
<div class="content">
</div>
</div>
<div id="container">
<div class="left">
</div>
<div class="content">
</div>
<div class="side">
</div>
</div>
<div id="pagerfooter">
<div class="content">
</div>
</div>

模型：

 
  魔术布局： 
 

   原理：利用id选择器和类选择器的优先级来动态布局 
 

<!DOCTYPE HTML >
<html>
 <head>
 <style>
	body{
		background:#FFF;
		font:14px 宋体;
		margin:0px;
		padding:0px;
	}
	.rounded{
		background:url(top-left.jpg) no-repeat top left;
		width:100%;
	}
	.rounded h2{
		background:url(top-right.jpg) no-repeat top right;
		padding:20px 20px 10px;
		margin:0;
	}
	.rounded .main{
		/*background:url(bottom-left.jpg) no-repeat top left;*/
		background:yellow;
		padding:10px 20px;
		margin:-20px 0 0 0;
	}
	.rounded .footer{
		background:url(bottom-left.jpg) bottom left no-repeat;
	}
	.rounded .footer p{
		color:red;
		text-align:right;
		background:url(bottom-right.jpg) bottom right no-repeat;		
		display:block;
		padding:10px 20px 20px;
		margin:-20px 0 0 0;
		font:0/0;
	}
	#header,#pagefooter,#container{
		margin:0 auto;
		width:100%;
		min-width:600px;
		max-width:800px;
		background:pink;
	}
	#container #content{
		float:left;
		width:600px;
	}
	#container #content #colums #col-b,
	#container #content #colums #col-a{
		float:left;
		width:300px;
	}
	#container .side{
		float:left;
		width:200px;		
	}
	
	#pagefooter{
		clear:both;
	}
	#container #content #banner{
		clear:both;
		height:300px;
		background:green;
	}
	
 </style>
  <title> 魔术布局 </title>
 </head>

 <body>
	<div id ="header">
		<div class ="rounded">
			<h2>页头</h2>
			<div class ="main">
				<p>
					远看山有色，近听水无声。</br>
					远看山有色，近听水无声。
				</P>
			</div>
			<div class="footer">
				<p>
				</P>
			</div>
		</div>
	</div>
	<div id="container">
		<div id ="content">
			<div id="colums">
				<div id="col-a">
					<div class="rounded">
						<h2>Colum A</h2>
						<div class="main">
							<p>
								远看山有色，近听水无声。</br>
								远看山有色，近听水无声。
							</p>
						</div>
						<div class="footer">
						<p>
						</P>
						</div>
					</div>
				</div><!--end of col-a -->
				<div id="col-b">
					<div class="rounded">
						<h2>Colum B</h2>
						<div class="main">
						<p>
							远看山有色，近听水无声。</br>
							远看山有色，近听水无声。
						</p>
						</div>
						<div class="footer">
						<p>
						</P>
						</div>
					</div>
				</div><!--end of col -b -->
			</div><!--end of colums-->
			<div id ="banner">
				<div class="rounded">
					<h2>Banner</h2>
					<div class="main">
					<p>
						远看山有色，近听水无声。</br>
						远看山有色，近听水无声。
					</p>
					</div>
					<div class="footer">
					<p>
					</P>
					</div>
				</div>
			</div><!--end of banner-->			
		</div><!--end of content-->
		<div class="side">
			<div class="rounded">
				<h2>Sise Bar 1</h2>
				<div class="main">
				<p>
					远看山有色，近听水无声。</br>
					远看山有色，近听水无声。
				</p>
				</div>
				<div class="footer">
				<p>
				查看详细信息>>
				</p>
				</div>
			</div>
		</div><!--end of side-->
		<div class="side">
			<div class="rounded">
				<h2>Sise Bar 1</h2>
				<div class="main">
				<p>
					远看山有色，近听水无声。</br>
					远看山有色，近听水无声。
				</p>
				</div>
				<div class="footer">
				<p>
				查看详细信息>>
				</p>
				</div>
			</div>
		</div><!--end of side-->
		<div class="side">
			<div class="rounded">
				<h2>Sise Bar 1</h2>
				<div class="main">
				<p>
					远看山有色，近听水无声。</br>
					远看山有色，近听水无声。
				</p>
				</div>
				<div class="footer">
				<p>
				查看详细信息>>
				</p>
				</div>
			</div>
		</div><!--end of side-->
	</div><!-- end of container-->
	<div id ="pagefooter">
		<div class="rounded">
			<h2>页脚</h2>
			<div class="main">
			<p>
				远看山有色，近听水无声。
			</p>
			</div>
			<div class="footer">
				<p>
				</P>
			</div>
		</div>
	</div><!--end of pagefooter-->
 </body>
</html>

   浏览器宽度为大于800的效果； 
 

  浏览器宽度为小于800的效果； 

变宽布局

1-2-1等比例变宽布局：

即设置成网页内容占浏览器宽度的85%，左边占内容的66%，右边占33%

#header,#container,#pagefooter{
	margin: 0 auto;
	width:85%;
	background-color: green;
}
#content{
	background: red;
	float: left;
	width:66%;
}
#side{
	background:blue;
	float: left;
	width: 33%;
	margin-left: 1%;
}
#pagefooter{
	clear: both;
}

 
 1-2-1单列变宽布局 

 
 将可以变宽的内容部分嵌套在一个设置其宽度为100%的div中，将右边内容设置为固定宽度，然后给左边内容设置右边边距为右边内容的宽度 

#header,#container,#pagefooter{
	margin: 0 auto;
	width:85%;
	background-color: green;
	min-width: 500px;
	max-width: 800px;
}
#contentwrap{
	margin-left: -260px;			
	float: left;			
	width:100%;
}
#content{
	background: red;
	margin-left:260px;
}
#side{
	background:blue;
	float: right;
	width: 260px;
}
#pagefooter{
	clear: both;
}

 
 1-3-1单侧列宽度固定 

  将活动的两列嵌套在一个div 中，原来的wrap变成了两层，即outerwrap和innerwrap就相当于一个1-2-1的布局了 

  例： 

  布局： 

<div id="container">
	<div id="outerwrap">
		<div id="innerwrap">
			<div id="content">
				<p>内容1</p>
			</div>	
			<div id="center">
				<p>内容2</p>
			</div>
		</div>
	</div>		
	<div id="side">
		<p>内容3</p>
	</div>	
</div>

  样式： 

#outerwrap{
	margin-left: -200px;		
	float: left;			
	width:100%;
}
#innerwrap{
	float:left;
	margin-left:200px;
	width:100%;
}
#content{
	float:left;	
	background: red;
	width:50%;
}			
#center{	
	float:left;				
	background:pink;
	width:49.9%;
}
#side{
	float:left;
	width:200px;
	background:blue;
}

  效果： 

 
 1-3-1中间列宽度固定： 

  左边右边分别嵌套在一个div中，左边内容设置右边界，右边内容设置左边界，两边分别设置为50% 

  利用margin负值实现 

  布局： 

<div id="container">
	<div id="contentwrap">
		<div id="content">
			<p>内容1</p>
		</div>	
	</div>
	<div id="center">
		<p>内容2</p>
	</div>
	<div id="container1">		
		<div id="side">
			<p>内容3</p>
		</div>	
	</div>
</div>

  样式： 

#contentwrap{
	margin-right: -150px;		
	float: left;			
	width:50%;
}	
#content{
	margin-right:150px;
	background: red;
}			
#center{	
	float:left;				
	width:300px;
	background:pink;
}
#contentwrap1{
	margin-left: -150px;		
	float: right;			
	width:49.9%;
}
#side{
	margin-left:150px;
	background:blue;
}

  效果： 

 
 1-3-1两侧宽度固定 

  先将左边和中间两列看作一组活动列，而右边的一列为固定列，使用改进浮动，然后将左边和中间两列各自当成独立列，左侧作为固定列，再次使用改进浮动 

  利用margin负值实现 

  例： 

  布局： 

<div id="container">
	<div id="content">
		<p>内容1</p>
	</div>	
	<div id="contentwrap">
		<div id="center">
			<p>内容2</p>
		</div>	
	</div>	
	<div id="side">
		<p>内容3</p>
	</div>	
</div>

  样式： 

#content{
	float:left;
	background: red;
	width:200px;
}
#contentwrap{
	margin-left: -260px;
	margin-right: -200px;		
	float: left;			
	width:100%;
}		
#center{
	margin-left:260px;
	margin-right:200px;
	background:pink;
}
#side{
	background:blue;
	float: right;
	width: 260px;
}

  效果： 

 
  1-3-1中间和侧列固定 
 

   可变化宽度的侧列嵌套在一个div中，然后通过改进浮动将另外一个侧列和中间列的宽度作为嵌套div的负外边距和侧列的外边距即可 
 

   例： 
 

   布局： 
 

<div id="container">
	<div id="contentwrap">
		<div id="content">
			<p>内容1</p>
		</div>			
	</div>
	<div id="center">
		<p>内容2</p>
		</div>
	<div id="side">
		<p>内容3</p>
	</div>	
</div>

   样式： 
 

#contentwrap{
	margin-left: -460px;			
	float: left;			
	width:100%;
}
#content{
	background: red;
	margin-left:460px;
}
#center{
	float:left;
	background:pink;
	width:200px;
}
#side{
	background:blue;
	float: right;
	width: 260px;
}

   效果： 
 

   一侧可变长 
 

涟动下渔舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局

单列布局（1-1-1布局）框架：模型图：1-2-1固定宽度布局框架：模型：例：绝对定位法：#header,#pagefooter,#container{margin:0 auto;width:760px;}#container{/*包含content和side*/po
复制链接

扫一扫