简单的CSS网页布局一二列布局_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:26:371963浏览
1.一列布局
(一)一列自适应
自适应浏览器，随着浏览器的拉伸而变化，一般宽度采用百分比的写法，很简
<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>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn