布局篇

要准备面试，把一些知识重新回顾学习一下

单列顶宽，单列自适应

方法一 : 浮动和负边距的实现

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style>
 7 .main,.sitebar {
 8     height: 300px;
 9     font: bolder 20px/300px '微软雅黑';
10     color: #fff;
11     text-align: center;
12 }
13 .main {
14     width: 100%;
15     float: left;
16 }
17 .main .content {
18     margin-left: 200px;
19     background-color: red;
20 }
21 .sitebar {
22     width: 200px;
23     float: left;
24     margin-left: -100%;
25     background-color: green;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="main">
31     <div class="content">右侧主体自适应区块</div>
32 </div>
33 <div class="sitebar">左侧定宽200px区块</div>
34 </body>
35 </html>
方法一

考虑到先加载右侧内容，所以放在上面

 

方法二：浮动布局

<!DOCTYPE> 
<html> 
<head> 
<meta charset=“utf-8" /> 
<title>二列左列固定，右列宽度自适应——AA25.CN</title> 
<style type="text/css"> 
<!-- 
#left { 
    background-color: #E8F5FE; 
    border: 1px solid #A9C9E2; 
    float: left; 
    height: 300px; 
    width: 200px; 
} 
#right { 
    background-color: #F2FDDB; 
    border: 1px solid #A5CF3D; 
    height: 300px; 
} 
--> 
</style> 
</head> 

<body> 
<div id="left">左列——固定(AA25.CN)</div> 
<div id="right">右列——宽度自适应(AA25.CN)</div> 
</body> 
</html>
方法二

两列等高（最小高度200，如果没有规定或者不需要可以直接去掉）

方法一：

别的不多说，直接上代码，或者参考在线DEMO，下面所有的DEMO都有HTML和CSS代码，感兴趣的同学自己慢慢看吧。

HTML Markup

		<div id="container">
			<div id="wrapper">
				<div id="sidebar">Left Sidebar</div>
				<div id="main">Main Content</div>
			</div>
		</div>

CSS Code

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html {
				height: auto;
			}

			body {
				margin: 0;
				padding: 0;

			}

			#container {
				background: #ffe3a6;
			}

			#wrapper {
				display: inline-block;
				border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/
				position: relative;
				vertical-align: bottom;
			}

			#sidebar {
				float: left;
				width: 200px;
				margin-left: -200px;/*==此值等于左边栏的宽度值==*/
				position: relative;			
			}

			#main {
				float: left;
			}	

			#maing,
			#sidebar{
				min-height: 200px;
				height: auto !important;
				height: 200px;
			}
		</style>

 

方法二

HTML Markup

		<div id="container">
			<div id="left" class="aside">Left Sidebar</div>
			<div id="content" class="section">Main Content</div>
		</div>

CSS Code

		<style type="text/css">
			 	*{margin: 0;padding: 0;}
			 	#container {
			 		overflow: hidden;
			 	}

			 	#left {
			 		background: #ccc;
			 		float: left;
			 		width: 200px;
			 		margin-bottom: -99999px;
			 		padding-bottom: 99999px;

			 	}

			 	#content {
			 		background: #eee;
			 		margin-left: 200px;/*==此值等于左边栏的宽度值==*/
			 		margin-bottom: -99999px;
			 		padding-bottom: 99999px;
			 	}
			 	#left,
			 	#content {
			 		min-height: 200px;
			 		height: auto !important;
			 		height: 200px;
			 	}
		</style>

 

方法三：

HTML Markup

		<div id="container">
			<div id="content">Main Content</div>
			<div id="sidebar">Left Sidebar</div>
		</div>

CSS Code

			*{margin: 0;padding: 0;}
		 	#container{
		 		background-color:#0ff;
		 		overflow:hidden;
		 		padding-left:220px; /* 宽度大小等与边栏宽度大小*/
		 	}
		 	* html #container{
		 		height:1%; /* So IE plays nice */
		 	}
		 	#content{
		 		background-color:#0ff;
		 		width:100%;
		 		border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/
		 		margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
		 		float:right;
		 	}
		 	#sidebar{
		 		background-color:#f00;
		 		width:220px;
		 		float:right;
		 		margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
		 	}
		 	#content,
		 	#sidebar {
		 		min-height: 200px;
		 		height: auto !important;
		 		height: 200px;
		 	}

 

方法四：

HTML Markup

		<div id="container2">
			<div id="container1">
					<div id="col1">Left Sidebar</div>
					<div id="col2">Main Content</div>
		 	</div>
		</div>

CSS Code

		*{padding: 0;margin:0;}
		#container2 {
		  	float: left;
		  	width: 100%;
		  	background: orange;
		  	position: relative;
		  	overflow: hidden;
		  }
		  #container1 {
		  	float: left;
		  	width: 100%;
		  	background: green;
		  	position: relative;
		  	left: 220px;/* 宽度大小等与边栏宽度大小*/
		  }
     
		  #col2 {
		  	position: relative;
		  	margin-right: 220px;/* 宽度大小等与边栏宽度大小*/
		  }
     
		  #col1 {
		  	width: 220px;
		  	float: left;
		  	position: relative;
		  	margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
		  }
	   
			#col1,#col2 {
				min-height: 200px;
				height: auto !important;
				height: 200px;
			}

 

方法五：

HTML Markup

		<div id="container1">
			<div id="container">
				<div id="left">Left Sidebar</div>
				<div id="content">
					<div id="contentInner">Main Content</div>
				</div>
			</div>
		</div>

CSS Code

		*{padding: 0;margin: 0;}
		#container1 {
			float: left;
			width: 100%;
			overflow: hidden;
			position: relative;
			background-color: #dbddbb;
		}
		#container {
			background-color: orange;
			width: 100%;
			float: left;
			position: relative;
			left: 220px;/* 宽度大小等与边栏宽度大小*/
		}
		#left {			
			float: left;
			margin-right: -100%;
			margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
			width: 220px;
		}
		#content {
			float: left;
			width: 100%;
			margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
		}
		#contentInner {			
			margin-left: 220px;/* 宽度大小等与边栏宽度大小*/
			overflow: hidden;
		}
		
		#left,
		#content {
				min-height: 200px;
				height: auto !important;
				height: 200px;
		}
方法六

<style type="text/css" >

#container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}

.column {
background: #ccc;
float: left;
width: 200px;
margin-right: 5px;
margin-bottom: -99999px;    使用负值可以将其他容器吸引到身边
padding-bottom: 99999px;    使背景在很大限度范围中显示
}

#content {
background: #eee;
}

#right {
float: right;
margin-right: 0;
}
</style>
posted @ 2015-07-12 09:36  夏目の-の  阅读(153)  评论(0)    收藏  举报