-
div是塊狀元素，它會很霸道的占一行，從代碼可以看出啊，整個的main內容塊沒有指定高度的，只有它的子內容塊指定了高度，但是它的子內容塊是浮動的，所以子內容塊的高度不能影響成為main的高度，那么瀏覽器就默認了把footer的div顯示在top的下一行，這個時候添加clear:both清除了上面模塊的浮動特性，那么此時main的高度就是和子內容塊的高度是一樣的，因此瀏覽器就會把footer的div顯示在main的下一行查看全部
-
混合布局編程挑戰: <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{background:gray;} .main{background:red;position:relative;} .left{background:blue;height:300px;width:200px;position:absolute;top:0;} .right{background:green;height:300px;margin-left:210px;} .foot{background:orange;} </style> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} 左邊和右邊是絕對定位，相對瀏覽器一個left:0,一個right:0. 中間部分采取外邊距,上下距離為零，距離左邊是200px，右邊是300px，如果想留下空隙，增加間隔就行， 所以margin:0 310 0 210.上右下左查看全部
-
<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%;height:100px;background:grey;} .main{width:100%;height:500px;margin:0 auto;background:red;} .left{ width:200px;height:500px;position:absolute;background:blue;} .right{width:100%;height:500px;margin-left:210px;position:absolute;background:green;} .foot{width:100%;height:100px;background:#e34298;} </style>查看全部
-
div是塊狀元素，它會很霸道的占一行，從代碼可以看出啊，整個的main內容塊沒有指定高度的，只有它的子內容塊指定了高度，但是它的子內容塊是浮動的，所以子內容塊的高度不能影響成為main的高度，那么瀏覽器就默認了把footer的div顯示在top的下一行，這個時候添加clear:both清除了上面模塊的浮動特性，那么此時main的高度就是和子內容塊的高度是一樣的，因此瀏覽器就會把footer的div顯示在main的下一行； 你可以嘗試把clear:both語句清除，然后定義如下的樣式 .main{height:600px;}；把main的高度加上，那么瀏覽器也會正確顯示的（我也剛學的，表達不清楚，不知道你可不可以理解）查看全部
-
.top{ height:100px; width:100%; background:grey; } .main{ height:800px; width:100%; background:red; } .left{ height:800px; width:200px; position:absolute; background:blue; } .right{ height:800px; width:100%; margin-left:210; position:absolute; background:green; } .foot{ height:50px; width:100%; background:yellow; }查看全部
-
body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%;height:100px;background-color:#ccc;} .main{width:100%;margin:0 auto;background-color:red;} .left{ width:200px;height:500px;float:left;background-color:blue;} .right{width:76%;height:500px;float:right;background-color:green;} .foot{width:100%;clear:both;background-color:orange;} 沒有紅色的那豎欄..查看全部
-
三列布局特殊案例： 左右定寬，中間自適應 用浮動實現不了要求，要使用定位的方法 左側絕對定位，left：0；top：0 右側絕對定位，right：0；top：0查看全部
-
Q:要求右側（right）先加載，左側（left）后加載查看全部
-
清除浮動兩種方法：1. clear:both; 2. overflow:hidden.查看全部
-
單列布局，水平居中 margin:0 auto查看全部
-
清除浮動：clear：both查看全部
-
上面的代碼沒有給main設置高度，而main里的內容又設置成了浮動，所以footer會跑到head的下面。 解決方法有兩個：1.清除浮動， clear:both; 2.為main設置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }查看全部
-
最常用混合布局 頁面上的元素是塊與塊之間的關系，存在于三種狀態： 塊挨著塊、塊嵌套著塊和塊疊壓著塊 通過CSS將塊的位置擺放正確，網頁的布局就完美查看全部
-
這節課主要講了網頁的簡單介紹； 網頁的主要元素是文本和圖片，網頁設計的特點有兩個（一個是網頁可以自適應寬度、二是網頁的長度理論上沒有限制） 網頁一般分為三部分：頭部、內容、底部；再根據內容的多少給網頁分欄（又稱分列）：一列布局、二列布局、三列布局、混合布局等）查看全部
舉報
0/150
提交
取消