-
寬度自適應用百分比來表示查看全部
-
main的高度設定為600px，就是和left一樣高，如果不設置的話，因為left和right都設置為了float，那么元素就會脫離，在沒有顯示的地方比如最左邊和最右邊，那么footer就會顯示補全。。。所以要么清楚浮動要么給main設置高度查看全部
-
<!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{width:100%;background:gray;height:100px;} .main{width:100%;background:red;height:500px;position:relative;} .left{width:200px;position:absolute;background:blue;height:500px;top:0;} .right{background:green;height:500px;margin-left:210px;} .foot{width:100%;background:orange;height:100px;} </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>查看全部
-
1、清除body自適應: body{margin:0;padding:0;} 2、元素自動居中： margin:0 auto; (這時不能在使用浮動屬性和絕對定位屬性和固定定位屬性)查看全部
-
在使用浮動時，如果是布局自適應的話，寬度必須使用百分比?。。。。。?！查看全部
-
隱藏溢出的條件： 1、擁有overflow:hidden樣式的塊元素不具有position:relative和position:absolute樣式； 2、內部溢出的元素是通過position:absolute絕對定位；查看全部
-
三版式模板查看全部
-
Div{width:800px; height:500px; margin:0 auto} 居中對齊查看全部
-
clear:both是用來清除緊鄰后面元素的浮動，如前一個div左浮動了，后面的div就會與其同行，假如你不想兩個div同行顯示，想讓后面的div單獨一行，你就可以用clear:both,可看做是兄弟元素之間浮動的清除。<br> width:100%;overflow:hidden也可以實現浮動清除，它一般用于清除父元素和子元素之間的浮動影響。查看全部
-
<!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:60px;background:#ccc;} .main{height:600px;width:100%;background:red;positive:relative;} .left{ height:600px;width:200px;background:blue;position:absolute;left:0;top:60px;} .right{height:600px;background:#9c9;margin:0 auto 0 210px;} .foot{height:60px;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> 自適應用margin，定位absolute查看全部
-
position:absolute top:xxx left/right:xxx固定位置查看全部
-
<!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:#000} .top{background:#ccc;height:100px;} .main{background:red;} .left{background:blue;height:500px;width:200px;position:absolute;left:0;top:100px;} .right{background:green;margin-left:210px;height:500px} .foot{background:#f63;height:50px;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">rigth</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
margin:0 auto 水平居中，放在代碼后面查看全部
-
<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{width:100%;background:RGB(204,204,204);height:100px;} .main{background:red;overflow:hidden;position:relative;}/*使left以main為基準絕對定位*/ .left{ width:200px;height:500px;background:blue;position:absolute;left:0;top:0;} .right{height:500px;background:RGB(154,204,153);margin-left:210px;} .foot{width:100%;background:RGB(255,102,52);}/*因為是position實現排版,所以不需要清除浮動*/ </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>查看全部
-
<!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:grey} .main{background:red;} .left{ left:0;top:100px;height:200px;width:200px;background:blue;position:absolute;} .right{margin-left:210px;height:200px;background:green;} .foot{background:yellow;} </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
提交
取消