-
通過css的浮動float 、定位position（靜態定位static、相對定位relative、絕對定位absolute）查看全部
-
網頁布局查看全部
-
foot使用clear:both可以清除緊挨著它的上面的浮動元素查看全部
-
塊與塊之間的關系：1.塊挨著塊 2.塊嵌套塊 3.塊壓著塊 CSS就是把塊擺放正確！查看全部
-
針對： <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> 方法一： 寬度自適應，左側固定寬度右側自適應，父盒子position:relative;左側子盒子position:absolute;右側margin-left <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;background:#ccc;} .main{height:300px;background:red;position:relative;} .left{ width:200px;height:300px;background:blue;position:absolute; left:0; top:0;} .right{height:300px;margin-left:210px;background:green;} .foot{height:50px;background:#f60;} </style> 方法二： <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;background:#ccc;} .main{height:300px;background:red;} .left{ width:200px;height:300px;background:blue;position:absolute; left:0; top:100px;} .right{height:300px;margin-left:210px;background:green;} .foot{height:50px;background:#f60;} </style>查看全部
-
混合布局查看全部
-
盒子之間的三種關系： 1、相鄰 2、嵌套 3、層疊 我們要做的就是擺放好盒子的位置。查看全部
-
三列布局 左右為固定寬度，中間為自適應寬度的情況，需通過絕對定位方式實現。 三列布局：左側和右側固定，中間自適應： 左側{position：absolute；left:0;top:0} 右側{position：absolute；top:0；right：0} 中間{margin-left:100px;margin-right:100px;}查看全部
-
浮動（float）和 絕對定位（position：absolute）可以讓元素脫離文檔流查看全部
-
兩列布局：自適應的兩列布局：width用百分比+float； 兩列布局的自適應布局一般用的比較少，用固定的比較多 固定寬度的兩列布局：width：具體值/父級元素的寬度確定，width+百分比；+float; 如果沒有加float的話，不能實現并排的兩列布局。 div作為外聯元素獨占一行，使后面的元素在下一行（設置display：inline/inline-block可以達到float效果） 另外一種設置兩列布局（固定寬度+自適應寬度）的方法： position：relative——父元素：相對定位（因為不設置偏移量時，它還是在原來的位置，不影響其位置） position：absolute——子元素：絕對定位（通過設置top :0;margin/left設置其與另一邊的位置使其位于同行的另一側） 注意：固定寬度的列的高度>自適應的列的高度查看全部
-
一列布局不適于存放文本，太長容易看走眼。 一列布局： 1.通常作為網頁頭部。固定寬度。 2.正真開發，高度設置自動的。 兩列布局自適應，使用百分比。 三列布局，使用絕對定位和margin。 盒子之間的三種關系： 1、相鄰 2、嵌套 3、疊加 我們要做的就是擺放好盒子的位置。 關于頁面上元素的加載順序： 元素是從前往后依次加載的，要想先加載就要寫在前面。 通常left部分是作為菜單，right部分作為主體內容，我們打開網頁，都希望先看到 主體內容，所以有意把right部分寫在left部分前面，然后把right部分右浮動，left部分左浮動， 這樣布局不會出現問題，而且還解決了IE6下右浮動換行的問題。查看全部
-
網頁布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性的化的表現出來，是一種具有個人藝術特色的視覺傳達方式。 排版布局：float:right/left;常用于兩列布局（還是在正常的文檔流中，并沒有脫離文檔流）；position:absolute(相對于瀏覽器窗口視圖進行絕對定位）/relative(相對于原來位置進行移動）/fixed(相對于視圖的絕對定位，且不隨滾動而發生改變 網頁設計特點（相對紙媒來說） 1、網頁可以自適應寬度 2、網頁的長度理論上可以無限延長查看全部
-
三列布局 左右為固定寬度，中間為自適應寬度的情況，需通過絕對定位方式實現。 <!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:200px; height:500px; background:#CCC; position:absolute; left:0;top:0;} .center{height:500xp; background:#99C; margin:0 320px 0 220px; } .right{height:500px; width:300px; background:#933; position:absolute; right:0; top:0;} </style> </head> <body> <div class="left"></div> <div class="center">據央視14日消息,流失海外近200年的"明朝永樂御制紅閰摩敵刺繡唐卡",近日由上海藏家劉益謙以2.8億元人民幣拍下回到祖國。已知存世的永樂款刺繡唐卡僅3件,其余兩件藏于西藏大昭寺。去年7月,劉益謙2.2億拍回明代雞缸杯,此前還拍得皇帝龍椅等多件國寶。(央視記者張成)</div> <div class="right"></div> </body> </html>查看全部
-
Div{width:800px; height:500px; margin:0 auto}居中查看全部
-
方法2 .top{height:100px; background-color:#ccc;} .main{height:400px; background-color:red;} .left{height:400px; width:200px; background-color:blue;position:absolute; left:0; top:100px;} .right{height:400px;margin-left:210px; background-color:green;} .foot{height:60px; background-color:orange;}查看全部
舉報
0/150
提交
取消