Heim > Web-Frontend > HTML-Tutorial > 简单的CSS网页布局一二列布局_html/css_WEB-ITnose

简单的CSS网页布局一二列布局_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:26:37
Original
1962 Leute haben es durchsucht

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>
Nach dem Login kopieren

  (二)一列固定

  顾名思义,固定布局的宽度,设置固定的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>
Nach dem Login kopieren

注意:以上百分比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>
Nach dem Login kopieren

  (三)二列居中固定

  

 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>
Nach dem Login kopieren

 

   

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage