-
一列布局不適于存放文本，太長容易看走眼
一列布局： 1.通常作為網頁頭部。固定寬度。 2.真正開發，高度設置自動的。
兩列布局自適應，使用百分比。
三列布局，使用絕對定位和margin。
盒子之間的三種關系： 1、相鄰 2、嵌套 3、疊加 我們要做的就是擺放好盒子的位置。
查看全部 -
清除浮動
clear:both;
水平居中
margin:0 auto;
查看全部 -
哪兩個 css 設置，可以讓元素脫離文檔流（）
浮點型（float）和絕對定位（position：absolute）
查看全部 -
絕對元素定位的 top 和 left 值跟絕對元素未脫離常規流之前在常規流中位置有關。
查看全部 -
if we want to use self ajusted page, use the percentage
查看全部 -
清除浮動
clear:both;
查看全部 -
特殊案例：左側200px，右側300px，中間為自適應寬度 ????左右兩側為固定定位，中間用margin值來調整，不設置寬度
.left{ ????width:200px; ????height:500px; ????background:#ccc; ????position:absolute; ????left:0; ????top:0; } .middle{ ????height:500px; ????background:?aquamarine; ????margin:0?310px?0?210px; } .right{ ????width:300px; ????height:500px; ????background:#ddd; ????display:inline-block; ????position:absolute; ????right:0; ????top:0; }查看全部 -
混合布局最為常用
查看全部 -
若三部分中有的要求定寬，有的要求自適應，這時候浮動就不能完成三列布局的排列，可以用定位來實現。
左側用絕對定位定位在左上，右側絕對定位在右上，中間的就設置邊距。
查看全部 -
設定寬度是想設定寬度為自適應，那就要用百分比來設置寬度，。
查看全部 -
完成了，噢噢噢噢
查看全部 -
.main{height:600px;background:black;}
.right{height:600px;position:absolute;left:210px;right:0px;background:red;}
.left{height:600px;width:200px;float:left;background:green;}
查看全部 -
頭部logo區，中間信息區域，底部版權區（放一些不重要的東西）
中間的信息區經常會分欄表現，一列布局，二列布局，三列布局，混合布局。
查看全部 -
網頁設計特點：網頁可以自適應瀏覽器的寬度
? ? ? ? ? ? ? ? ? ? ? 網頁的長度理論上是無限的
查看全部 -
.top{height:200px;background:#ccc;}
.main{height:600px;background:red;}
.left{ height:600px;width:300px;background:blue;position:absolute;float:left;}
.right{ height:600px;width:750px;background:green;float:right;}
.foot{height:50px;width:100%;background:#f99;}
查看全部
舉報