-
<!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:50px;background:#ccc;} .main{height:960px;background:red;} .left{width:300px;height:960px;background:blue;position:absolute;left:0;top:50px;} .right{height:960px;background:#AAE27E;margin-left:310px;} .foot{height:30px;background:#E2452F;} </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>查看全部
-
margin 0 auto 單列布局水平居中查看全部
-
單列布局:margin:o auto; 兩列布局 左float:left; 右float:right; 三列布局 左加入屬性width:300px;position:absolute;left:0; 中間加入屬性margin:0 300px 0 200px; 右側加入屬性width:200px;position:absolute;right:0;查看全部
-
文檔流：將窗口自上而下分成一行一行，并在每行中按從左至右的依次排放元素，即為文檔流。 有三種情況使得元素離開文檔流而存在，分別是浮動 絕對布局 固定定位查看全部
-
margin:0 auto 水平居中查看全部
-
把left right的width設小一點 就可以左右留白了查看全部
-
文檔流：將窗口自上而下分成一行一行，并在每行中按從左至右的依次排放元素，即為文檔流 相對定位（position：relative），不可以脫離文本流 浮動（float）和絕對定位（position：absolute）可以脫離文檔流查看全部
-
3列布局查看全部
-
三列布局采用絕對定位查看全部
-
浮動float和絕對定位能夠脫離文檔流查看全部
-
CSS中脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。 需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。 所以 用 clear :both:清除浮動 是footer這個盒子 不會緊跟在 top盒子之后，而是跟在main之后。查看全部
-
clear:both 是用來清除緊鄰后面元素的浮動，如前一個div左浮動了，后面的div就會與其同行，假如你不想兩個div同行顯示，想讓后面的div單獨一行，你就可以用clear:both,可看做是兄弟元素之間浮動的清除。 width:100%;overflow:hidden可實現浮動清除，它一般用于清除父元素和子元素之間的浮動影響。查看全部
-
.top{height:100px;background:#ccc;} .main{background:red;position:relative;height:500px;overflow:hidden;} .left{height:500px;width:200px;float:left;background:blue;} .right{height:500px;width:99%; position:absolute;margin:0 0 0 210px;background:#AAE27E;} .foot{height:50px; background:#E2452F;}查看全部
-
相對定位（position：relative），不可以脫離文本流查看全部
-
.left{ width:200px; height:600px; background:#ccc; margin-right:10px;position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; margin-left:10px;position:absolute; top:0; right:0; background:#FCC;}查看全部
舉報
0/150
提交
取消