-
這里用到了定位技術 /*原本設置了寬度自適應后，由于DIV的特性，他會沾滿整行，因為左右兩側div都設置了寬度，因此中間寬度自適應的div將重啟一行 顯示，導致頁面錯亂，在這種情況下，實現左中右三列布局的原理是，將自適應DIV設置margin外部填充，將左右兩邊的DIV的寬度讓出來 最后，中間的DIV就又回到中間的位置上，由于通過設置margin填充，使得三個div元素配合絕對定位，可以存在與一行，因此實現了三列布局。 */查看全部
-
在寫下查看全部
-
<style type="text/css"> body{margin:0;padding:0;} .top{height:100px;background:blue;} .main{width:800px;height:300px;background:#ccc;margin:0 auto;} .foot{width:800px;height:100px;background:#900;margin:0 auto;} </style> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body>查看全部
-
文檔流：將窗口自上而下分成一行一行，并在每行中按從左至右的依次排放元素，即為文檔流。 有三種情況使得元素離開文檔流而存在，分別是浮動 絕對布局 固定定位查看全部
-
margin：0 auto；查看全部
-
清除浮動是clear：both查看全部
-
頁面布局有叫板式布局 分欄又叫做分列，通常使用混合布局（頭部、內容、底部）查看全部
-
clear:both div是塊狀元素，它會很霸道的占一行，從代碼可以看出啊，整個的main內容塊沒有指定高度的，只有它的子內容塊指定了高度，但是它的子內容塊是浮動的，所以子內容塊的高度不能影響成為main的高度，那么瀏覽器就默認了把footer的div顯示在top的下一行，這個時候添加clear:both清除了上面模塊的浮動特性，那么此時main的高度就是和子內容塊的高度是一樣的，因此瀏覽器就會把footer的div顯示在main的下一行； 你可以嘗試把clear:both語句清除，然后定義如下的樣式 .main{height:600px;}；把main的高度加上，那么瀏覽器也會正確顯示的查看全部
-
body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%; height:50px;background:gray;} .main{width:100%; height:300px;background:red;} .left{width:200px;height:300px;background:blue;float:left;} .right{margin-left:210px;width:100%;height:300px;background:green;position:absolute;} .foot{width:100%; height:50px;background:orange;}查看全部
-
編程練習 學習完《二列布局》課程后，完成本次實戰練習，快來檢驗你的實戰成果吧！任務最終效果如下： 任務 1.請在編輯器第10行補充div左浮動樣式 2.請在編輯器第11行補充div右浮動樣式 溫馨提示:完成任務后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經掌握此技能，否則，請重復學習此節內容。如果代碼無誤，效果未出現，請拷貝到本地編輯器進行調試。查看全部
-
編程練習 學習完《一列布局》課程后，完成本次實戰練習，快來檢驗你的實戰成果吧！ 任務 請補充完整代碼，完成代碼編輯器中的任務1，要求main和footer在瀏覽器中水平居中。如下圖所示： 溫馨提示:完成任務后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經掌握此技能，否則，請重復學習此節內容。如果代碼無誤，效果未出現，請拷貝到本地編輯器進行調試。查看全部
-
<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%; height:50px;background:gray;} .main{width:100%; height:300px;background:red;} .left{width:200px;height:300px;background:blue;float:left;position:absolute;} .right{margin-left:210px;width:100%;height:300px;background:green;float:left;position:absolute;} .foot{width:100%; height:50px;background:#369;} </style> </head> <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>查看全部
-
body{margin:0; padding:0;}清除默認樣式查看全部
-
清除浮動兩種方法：1. clear:both; 2. overflow:hidden.查看全部
-
position:absolute;left:0;top:0 margin:0 300px 0 200px查看全部
舉報
0/150
提交
取消