div+css怎么布局

div+css布局現(xiàn)在是主流，能提高網(wǎng)頁(yè)加載速度，提高后期代碼維護(hù)效率。

步驟閱讀
方法/步驟
>01
div
所謂<div>標(biāo)簽我們可以理解為一個(gè)盒子。
例如：<div class="top"   style='border:1px solid #000;background-color:#EEE'>這里是Top</div
>02
border:1px solid #000;（這是把邊框顯示出來(lái)，方便我們布局）。
background-color:#EEE;（這是背景色設(shè)置，#EEE為顏色值）。
div的設(shè)置屬性有很多，我就大致說(shuō)一下。
這里可以設(shè)置一下字體居中，字體距離上下邊框的距離。
text-align:center;（文字橫向居中）
padding:30px;（字體距離上下左右邊框的距離，因?yàn)樽笥乙呀?jīng)超出了30px，所以這個(gè)30px就對(duì)左右不起限制作用了。）
>03
同樣的道理，我們可以設(shè)置一部分的布局了。
布局一個(gè)中間層。
<div class="container" style='border:1px solid #000;background-color:#ffe;text-align:center;padding:30px 0px;'> <div class="left"style='float:right;width:80%;border:1px solid #000;height:600px'>左邊</div><div class="right"style='width:20%;border:1px solid #000;height:600px;'>右邊</div></div>
<--! 
float:right;向右浮動(dòng)
width:80%;寬度為整個(gè)屏幕的80%
border:1px solid #000;邊框，方便查看。
height:600px;高度為600px。
-->
>04
如果想像我的效果圖一樣鋪滿整個(gè)屏幕可以加入以下代碼。
<style type="text/css">body{height:100%;  margin:0px; padding:0px;}</style>每個(gè)div，都有父容器。body就是最根源的父容器。只有把body設(shè)置為100%就可以滿屏幕。
共2圖>05
還可以添加以下底部啊什么的。
大家可以自己試試。