你的位置:首页 > 软件开发 > 网页设计 > 简单的CSS网页布局

简单的CSS网页布局

发布时间:2016-02-17 12:00:06
1.一列布局  (一)一列自适应  自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html><html><head lang="en"> <meta charset=&quo ...

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>

原标题:简单的CSS网页布局

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。