-
一列布局查看全部
-
margin后面如果只有兩個參數的話，第一個表示top和bottom，第二個表示left和right 因為0 auto，表示上下邊界為0，左右則根據寬度自適應相同值（即居中）查看全部
-
這節課主要講了網頁的簡單介紹； 網頁的主要元素是文本和圖片，網頁設計的特點有兩個（一個是網頁可以自適應寬度、二是網頁的長度理論上沒有限制） 網頁一般分為三部分：頭部、內容、底部；再根據內容的多少給網頁分欄（又稱分列）：一列布局、二列布局、三列布局、混合布局等）查看全部
-
常見的布局方式查看全部
-
.left{width:200px;height:600px;background:#ccc;position:absolute;left:0;top:0;} .main{height:600px;background:#9CF;margin:0 310px 0 210px;} .right{height:600px;width:300px;background:#FCC;position:absolute;right:0;top:0;} /*position:absolute;使得其脫離標準文檔流，因而使main參照body顯示（margin:0 310px 0 210px;）*/查看全部
-
寬度不定義 就是一個通欄查看全部
-
清除默認樣式 body{margin:0;padding:0;}查看全部
-
三列布局較為特殊的例子，左右固定列寬，中間自適應寬度，只能用position，不能用float<br/> .left{width:200px;height:500px;background-color:red;position:absolute;left:0} .middle{height:500px;background-color:silver;margin:0px 300px 0px 200px;} .right{width:300px;height:500px;background-color:blue;position:absolute;right:0;}查看全部
-
float:left; float:right;查看全部
-
有三種情況使得元素脫離文檔流： 1、浮動：float; 2、絕對定位：absolute; 3、固定定位：fixed;查看全部
-
什么叫布局查看全部
-
自適應的三列分布布局，可以DIY 。查看全部
-
float:left;text-align:left;有關浮動樣式的選擇。查看全部
-
左右的寬度不一樣 margin 定義的寬度也應該不一樣查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局編程挑戰</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:200px;magrin:0 auto;background: #ccc} .main{height:600px;magrin:0 auto;background: red;} .left{width:200px;height:600px;background: blue;position:absolute;top:200px;left:0;} .right{height:600px;background:green; position:absolute;top:200px;right:0;left :220px;} .foot{height:200px;magrin:0 auto;background:orange;} </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> </html>查看全部
舉報
0/150
提交
取消