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