-
一、清除默認樣式body{margin：0；padding：0} 二、兩列布局： 1、寬度自適應（用的比較少）， 1.1因為寬度要自適應，所以要設置左側left的width:xx%；1.2，需要左右排列，所以設置float:left；1.3另一側right也設置width和float(left和right都可以吧，再微調) 2、固定寬度（☆☆☆☆☆）left和right增加一個父div#main,設置這個main的width，以及margin 0 auto；2.1如果要精確控制left和right的寬度，可以使用px【就是說也可以使用%粗略控制。】 如下代碼 （這就是自適應寬度的布局，拖動頁面的窗口可以“縮小或放大”頁面的內容 寬度自適應（用的比較少），1.1因為寬度要自適應，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更確切的控制它的寬度可以將（%）改為像素（px）的形式查看全部
-
1.一列布局不適于存放文本，太長容易看走眼 一列布局： 1.通常作為網頁頭部。固定寬度。 2.真正開發，高度設置自動的。 兩列布局自適應，使用百分比。 三列布局，使用絕對定位和margin。 盒子之間的三種關系： 1、相鄰 2、嵌套 3、疊加 我們要做的就是擺放好盒子的位置。 關于頁面上元素的加載順序： 元素是從前往后依次加載的，要想先加載就要寫在前面。 通常left部分是作為菜單，right部分作為主體內容，我們打開網頁，都希望先看到 主體內容，所以有意把right部分寫在left部分前面，然后把right部分右浮動，left部分左浮動， 這樣布局不會出現問題，而且還解決了IE6下右浮動換行的問題。 ------------------------------ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto;} .top{height:100px;background-color: blue;} .foot{width: 800px;height:100px; background-color: #900;margin: 0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>查看全部
-
網頁設計特點（相對紙媒來說） 1、網頁可以自適應寬度 2、網頁的長度理論上可以無限延長查看全部
-
一列布局通常作為網站首頁，不適合放置多行文字，多為固定寬度查看全部
-
布局：又稱板式布局，是網頁UI設計師將有限的視覺元素進行排列組合查看全部
-
pasition絕對定位定位查看全部
-
1、頂部和底部寬度自適應一般將其設置寬度為百分比,例如width:100% 2、多列中，其中一列需要寬度自適應，不需要加寬度（width）。只需要設置margin值 3、塊的加載順序由HTML代碼編寫順序決定查看全部
-
一列布局：margin：0 auto 兩列布局：左右浮動 三列布局：左右絕對定位，中間靠margin調整位置 混合布局：在一列布局的基礎上，保留top和foot部分，將中間的main部分改造成兩列或三列布局查看全部
-
<title>混合布局編程挑戰</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{background:#ccc;margin:0 auto;} .main{width:100%;background:red;position:relative;} .left{width:200px;height:500px;background:#00f;} .right{width:100%;height:500px;position:absolute;margin-left:210px;background:#0c6;} .foot{width:100%;background:orange;height:100px;clear:both;} </style>查看全部
-
<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; text-align:center;} .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>查看全部
-
清除浮動兩種方法：1. clear:both; 2. 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; font-weight:bold} div{ line-height:50px} .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;} </style> </head> <body> <div class="left">left</div> <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div> <div class="right">right</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} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px;margin:0 auto;} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
-
實現三列布局用float達不到效果了，要用到定位布局中的絕對定位absolute，實現三列布局的思路是：固定左右兩列后，再固定中間列。三列布局注意1.絕對定位的寫法：posision:absolute;left/right:**px;top/bottom:**px;2.中間列如果自適應就不設置寬度，如果是固定的，就要把寬度設置上；且中間列的絕對定位的寫法：posision:absolute;left:左列的寬度px;right:右列的寬度px;查看全部
-
自適應寬度的兩列布局，列隨瀏覽器的變化而變化，有兩個知識點：1.因為是自適應，所以不能定義元素的寬度，只能用百分比表示；2.兩列布局是分別居于頁面的左右兩側的，所以要用到浮動float; 固定寬度的兩列布局，列不會隨瀏覽器的變化而變化，有兩個知識點：1.因為是固定寬度，所以必須定義元素的寬度，不能再用百分比表示；2.兩列布局是分別居于頁面的左右兩側的，所以要用到浮動float查看全部
舉報
0/150
提交
取消