你的位置:首页 > 网页设计

[网页设计]简单的CSS网页布局


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>