-
margin:0 auto;查看全部
-
一列布局： 1，通常作為網站的首頁，一般固定寬度； 2，一列布局不適于存放文本，太長容易看串行。 3，真正開發，高度設置自動的，適于自動撐開；查看全部
-
網頁布局 布局：又稱板式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合。 特點：網頁可以自適應寬度（按百分比） 網頁的長度理論上可以無限延伸；查看全部
-
慕課群 167137884歡迎大家加入。查看全部
-
<!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:#ccc;} .main{height:600px;background:red;} .left{ width：200px;height:600px;background:blue;position:absolute;left:0; } .right{width:100%;height:600px;background:green;position: absolute;left:210px;} .foot{height:50px;background:#f93;} </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.混合布局：我們可以把一列布局加入“左”和“右”改造為混合布局。 2.在中部mian中加入子div 分別是（左，右）。 然后分別在style中加入“.left和.right”的樣式！ 3.注“left和right”都要加浮動“float” 4.還可以在混合布局下進行更復雜的混合布局 5.可以將right定義為sub_right和sub_right 分為化為更為密集的混合布局查看全部
-
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}查看全部
-
三列布局特殊案例代碼： 注意點：當在三個div中加入文字并且設置好寬度之后，三個div無法排列在一列上。這時候就需要刪掉float 換成position。 示例代碼： <!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;} /*.main{width:800px;height:500px;margin:0;padding:0;}*/ .left{width:200px;height:500px;background-color:#9FC ;position:absolute;left:0; top : 0} /*中間的寬度自適應*/ .middle{height:500px;background-color:#C6F; margin: 0 310px 0 210px} .right{width:300px;height:500px;background-color:#F9F ;position:absolute;right:0;top:0;} </style> </head> <body> <div class="main"></div> <div class="left">200px</div> <div class="middle">JavaScript 中的幾乎所有事務都是對象：字符串、數字、數組、日期、函數，等等。 你也可以創建自己的對象。 本例創建名為 "person" 的對象，并為其添加了四個屬性：</div> <div class="right">300px</div> </body> </html>查看全部
-
.left{ width:300px; height:600px; background:#ccc;float:left;}}/*左浮動樣式*/ .right{ width:660px; height:600px; background:#FCC; float:right;}/*右浮動樣式*/查看全部
-
兩列布局： 1.清除默認樣式：body{margin:0;padding :0;} 2.有關兩列布局：一般用的很少 1寬度自適應 所以要按%來設置（例如 設置left:20% right:80%） 事例代碼如下：不固定的兩列布局 <!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;} .left{width:20%;height:500px;background-color:#CFF;float:left;} .right{width:80%;height:500px; background-color:#F9F;float:right;} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>查看全部
-
.main,.footer{ width:960px; margin:0 auto;}查看全部
-
一列布局：通常作為網站首頁 一般固定寬度；.一列布局不適于存放文本，太長容易看串行。查看全部
-
.footer{ height:50px; background:#9F9;clear:both;}清楚浮動查看全部
-
1.混合布局：我們可以把一列布局加入“左”和“右”改造為混合布局。 2.在中部mian中加入子div 分別是（左，右）。 然后分別在style中加入“.left和.right”的樣式！ 3.注“left和right”都要加浮動“float” 4.還可以在混合布局下進行更復雜的混合布局 5.可以將right定義為sub_right和sub_right 分為化為更為密集的混合布局查看全部
-
<head> <style type="text/css"> body{margin:0;padding:0} .left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0} .middle{height:500px;background:#999;margin:0 300px 0 200px} .right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0} </style> </head> <body> <div class="left">200px</div> <div class="middle"></div> <div class="right">300px</div> </body> </html>查看全部
舉報
0/150
提交
取消