div+css怎么布局

div+css布局現在是主流，能提高網頁加載速度，提高后期代碼維護效率。

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