-
Div{width:800px; height:500px; margin:0 auto}，上面這段樣式，可以讓 div 在頁面的水平居中查看全部
-
清除浮動： clear:both; //清除兩邊元素的浮動對他的影響 overflow: hidden; // 用在浮動元素本身清除對父元素的影響 這里是一個排版陷阱：當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，不代表它不存在。查看全部
-
http://isux.tencent.com/css3/tools.html查看全部
-
與傳統媒體的差別，網頁寬度的設置。網頁的長度可以無限延長查看全部
-
加載順序一般是從上到下，設置width100%和margin-left是關鍵。查看全部
-
<!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:100px; background-color:gray;} .main{height:800px; background-color:red;} .left{width:200px; height:800px; background-color:blue; position:absolute; top:100px; left:0;} .right{height:800px; background-color:pink; margin-left:210px;} .foot{height:100px; background-color: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>查看全部
-
清除浮動的兩種方法： clean:both overflow:hidden查看全部
-
div三種方式 塊連接塊，嵌套和疊壓查看全部
-
要點： margin：0 auto；自適應 多列布局用float：left/right和position:absolute定位查看全部
-
寬度不定義的話，那么此寬度就是充滿整個窗口的 寬度設置為百分比的話是自適應 寬度用像素設置就是固定寬度的 float是浮動 浮動只針對html標簽設置靠左靠右浮動樣式 position:absolute position:relative絕對定位 父元素用position:relative;子元素position:absolute;查看全部
-
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局</title> <style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; margin:0 auto;} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; float:left;} .right{ width:740px; height:600px;background:#FCC; float:right} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left} .r_sub_right{ width:200px; height:600px; background:#9FC; float:right;} .footer{ height:50px; background:#9F9; clear:both;} </style> </head> <body> <div class="top"> <div class="head">head</div> </div> <div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div> </div> <div class="footer">footer</div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> .header{height:100px;background:#f90;} .main{height:800px; width:600px; background:#ff0; margin:0 auto; } .main_l{width:200px; height:800px; background:yellow; float:left;} .main_r{width:400px; height:800px; background:green; float:right;} .main_r_l{width:200px;height:800px;background:green;float:left;} .main_r_r{width:200px;height:800px;background:blue;float:right;} .footer{width:600px; height:200px; background:#d9007e; margin:0 auto;} </style> </head> <body> <div class="header">header</div> <div class="main"> <div class="main_l"> </div> <div class="main_r"> <div class="main_r_l"></div> <div class="main_r_r"></div> </div> </div> <div class="footer">footer</div> </body> </html>查看全部
-
<!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; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; position:absolute; margin-left:0; margin-top:0;} .main{ height:600px;margin:0 300 0 200; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0;background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網 頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編 劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要 點，舉一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> .left{width:300px; height:500px; background:#ccc; position:absolute; left:0; top:0; } .right{width:200px; height:500px; background:#ddd; position:absolute; right:0; top:0; } .middle{background:#eee; margin:0 210 0 310; } </style> </head> <body> <div class="left">300px</div> <div class="middle">sdfkjasd;fksdla;fjkl;asjdfkl;sdjafjsdakl;fjsdajfsdjfvsdjkafjsdakl;jflsdajfkl sdajfasdjf;jasdl;kfsdafasd</div> <div class="right">200px</div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> .main{width:800px; margin:0 auto; } .left{width:20%; height:500px; background:#ccc; } .right{width:80%; height:500px; background:#ddd; } </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>查看全部
舉報
0/150
提交
取消