-
通過absolute屬性定義具體位置查看全部
-
body{margin:0;padding:0} .main{width:800px;margin:0 auto;} .left{width:220px;height:500px;float:left;background:red;} .right{width:580px;height:500px;float:right;background:red;}查看全部
-
絕對定位查看全部
-
body{margin:0;padding:0} .main{width:800px;margin:0 auto} .left{width:220px;height:500px;float:left;background:#ccc;} .right{width:580px;height:500px;float:right;background:#ddd;}查看全部
-
清除浮動：clear:both;查看全部
-
清除默認樣式： body{margin:0;padding:0}查看全部
-
分欄：查看全部
-
分欄又叫做分列，常見的布局有：一列布局、兩列布局、三列布局、混合布局。查看全部
-
position:relative//相對定位 position:absolute//絕對定位 position:fixed//固定定位 float:left|right//浮動查看全部
-
clear:both清楚浮動查看全部
-
body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;width=100%;background-color:#999;} .main{height:500px;width=100%;background-color:red;position:relative;} .left{ width:200px;height:500px;background-color:blue;position:absolute; top:0;left:0;} .right{height:500px;width:100%;background-color:green;margin-left:210px;} .foot{height:50px;width=100%;background-color:orange;}查看全部
-
這里是一個排版陷阱：當main里面設置了左右兩個div之后，這個時候不要忘記給main也設置和左右div一樣的高度，題中的main是沒有設置高度的，只設置了寬度，這個時候我們可以想象main其實就是一根高度為0的線條浮在top的下面，只是我們看不到，因為它沒有高度。而footer是浮在main下面的，并不是浮在左右兩個div下面，所以我們看到footer塊莫名其妙跑上來蓋住了左右兩個div，解決辦法如下： 第一，給main賦予和左右div同樣大小的高度，這個是最直接的方法，main的高度從0變成600px之后，自然把以它為參照、浮在它屁股下面的footer壓到下面去了； 第二，把footer的浮動清除掉，使用clear：both，這樣footer從一個跟著main浮起來的飛行物變成了失去翅膀的元素，不能浮動，它就只能自動找最長的參照物（也就是很長的左右div），然后折行顯示在底部了，一樣能達到效果。 如果還不懂，可以將main的高度設置為height：300px，就一目了然了，因為這個時候main變成了300px，而footer會跟著main低300px顯示在top下面。我們看不到main，不代表它不存在。查看全部
-
清除浮動有兩種方法：1.clear:both 2.overflow:hidden查看全部
-
要點回顧： 其實在網頁制作當中，頁面中的元素就是塊與塊之間的關系： 塊挨著塊；塊嵌套著塊；塊疊壓著塊 通過css將這些塊擺放正確，網頁布局就自然完美了。查看全部
-
二、兩列布局： 1、寬度自適應（用的比較少）， 1.1因為寬度要自適應，所以要設置左側left的width:xx%；1.2，需要左右排列，所以設置float:left；1.3另一側right也設置width和float(left和right都可以吧，再微調) 2、固定寬度（☆☆☆☆☆）left和right增加一個父div#main,設置這個main的width，以及margin 0 auto；2.1如果要精確控制left和right的寬度，可以使用px【就是說也可以使用%粗略控制。】 如下代碼 （這就是自適應寬度的布局，拖動頁面的窗口可以“縮小或放大”頁面的內容 寬度自適應（用的比較少），1.1因為寬度要自適應，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更確切的控制它的寬度可以將（%）改為像素（px）的形式查看全部
舉報
0/150
提交
取消