1.一列布局
(一)一列自适应
自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html>
<html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览器默认样式*/ padding: 0; } div{ text-align: center; /*字体居中*/ font-size: 30px; font-weight: bold; } .head,.middle,.foot{ width: 50%; /*百分比宽度*/ margin: 0 auto; /* 典型的设置居中*/ } .head{ height: 200px; background: #F0B6CF; } .middle{ height: 500px; background: tan; } .foot{ height: 200px; background-color: #57A9D1; } </style> </head> <body> <div class="head">head</div> <div class="middle">middle</div> <div class="foot">foot</div> </body> </html>
(二)一列固定
顾名思义,固定布局的宽度,设置固定的PX值。
只需要在上面一列自适应的HTML代码中,把width:50% 修改成 width:960px即可,当然,各部分如果要求设置的宽度不同,在每个部分的类选择器上进行适当修改即可。
2.二列布局
(一)二列自适应
二列的自适应,这时候要用到float属性。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>二列自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览器默认样式*/ padding: 0; } div{ text-align: center; /*字体居中*/ font-size: 30px; font-weight: bold; } .left{ width: 30%; background-color: #CCFF00; height: 500px; float: left; /*先左浮动,使之靠浏览器左侧*/ } .right{ width: 70%; height: 500px; background-color: bisque; float: right; /*先右浮动,使之靠浏览器右侧*/ } </style> </head> <body> <div class="left">left</div> <div class="right">right</div> </body> </html>
注意:以上百分比30%和70%加起来刚好是100%,宽度会充满整个浏览器页面,如果加起来没有100%,则他们中间会空出一栏的空间出来。
(二)二列居中自适应
在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为:80%;则子代标签的宽度会基于80%的浏览器宽度来定。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>二列居中自适应</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; /*清除浏览器默认样式*/ 9 padding: 0; 10 } 11 div{ 12 text-align: center; /*字体居中*/ 13 font-size: 30px; 14 font-weight: bold; 15 } 16 .main{ 17 width:80%; 18 height: 500px; 19 margin: 0 auto; /*居中*/ 20 } 21 .left{ 22 width: 30%; 23 background-color: #CCFF00; 24 height: 500px; 25 float: left; /*先左浮动,使之靠浏览器左侧*/ 26 } 27 .right{ 28 width: 70%; 29 height: 500px; 30 background-color: bisque; 31 float: right; /*先右浮动,使之靠浏览器右侧*/ 32 } 33 </style> 34 </head> 35 <body> 36 <div class="main"> 37 <div class="left">left</div> 38 <div class="right">right</div> 39 </div> 40 </body> 41 </html>
(三)二列居中固定
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>二列居中固定宽度</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; /*清除浏览器默认样式*/ 9 padding: 0; 10 } 11 div{ 12 text-align: center; /*字体居中*/ 13 font-size: 30px; 14 font-weight: bold; 15 } 16 .main{ 17 width:960px; 18 height: 500px; 19 margin: 0 auto; 20 } 21 .left{ 22 width: 360px; 23 background-color: #CCFF00; 24 height: 500px; 25 float: left; /*先左浮动,使之靠浏览器左侧*/ 26 } 27 .right{ 28 width: 600px; 29 height: 500px; 30 background-color: bisque; 31 float: right; /*先右浮动,使之靠浏览器右侧*/ 32 } 33 </style> 34 </head> 35 <body> 36 <div class="main"> 37 <div class="left">left</div> 38 <div class="right">right</div> 39 </div> 40 </body> 41 </html>