|
|
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Advanced CSS Layout</title> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } * { margin: 0; padding: 0; } .c { clear: both; } /* 容器 */ .page { width: 960px;/* 变量 */ margin: 0 auto; } .head { height: 60px;/* 变量 */ background-color: #9acd32; } .foot { height: 80px;/* 变量 */ background-color: #60A179; } .left { float: left; width: 100px;/* 变量 */ background-color: #ff69b4; } .right { float: right; width: 120px;/* 变量 */ background-color: #e9967a; } /* not IE6 */ .center { padding-left: 100px;/* 变量(同.left[width]) */ padding-right: 120px;/* 变量(同.right[width]) */ } /* IE 6 hack*/ .center { _display:inline; _zoom:1; _margin-left:-3px; _margin-right:-3px; _padding-left: 0; _padding-right: 0; } .main { background-color: #fffacd; width: 100%;} </style></head><body> <div class="page"> <div class="head">head</div> <div class="middle"> <div class="left"> <p>left</p> <p>left</p> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> <p>right</p> <p>right</p> </div> <div class="center"> <div class="main"> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> </div> </div> <div class="c"></div> </div> <div class="foot">foot</div> </div></body></html>  |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡