Heim > Artikel > Web-Frontend > 简单的CSS网页布局一二列布局_html/css_WEB-ITnose
简单的CSS网页布局一二列布局_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:26:371936Durchsuche
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何使用Watson_html/css_WEB-ITnoseNächster Artikel：CSS去除Chrome浏览器的控件默认样式_html/css_WEB-ITnose