1 一列固定寬度
2 一列固定寬度居中
3 一列自適應寬度
4 一列自適應寬度居中
5 一列二至多塊布局
采用了dreamweaver來開始網頁設計，其優點主要有：代碼提示，可視化開發環境，完美支持css+div
一列固定寬度
一列固定寬度居中
一列固定寬度居中和一列固定寬度相比，我們要解決的問題就是居中。這里我們用到css的外邊距屬性：margin。在IE6及以上版本和標準的瀏覽器當中，當設置一個盒模型的的margin:auto;時，可以讓這個盒模型居中。
一列自適應寬
自適應寬度是相對于瀏覽器而言，盒模型的寬度隨著瀏覽器寬度的改變而改變。這時要用到寬度的百分比。當一個盒模型不設置寬度時，它默認是相對于瀏覽器顯示的。
這里的選擇器類型是新手朋友最容易迷糊的地方，類：是指定義一個class，可以多個對象引用；標簽：指對默認的html標簽進行重新定義，如可以定義body{margin:0}，意思是 將body的外邊距設置為0，h2{color:#f00}是將所有h2標簽的文字顏色設置為紅色；高級它把ID和偽類放到一塊了，是一個設置不合理的地方，在cs4版本中已經分開了。ID是以#開始，id只能作用于一個對象，不能作用于多個對象，優先級高于class，這是id和class的區別。
一列自適應寬度居中
同樣和固定寬度居中一樣，我們只需要設置div的外邊距為auto即可實現居中了。
一列二至多塊布局
一般的網站整體可以分為上中下結構，即：頭部、中間主體、底部。那么我們可以用三個div塊來劃分，分別給它們起名為：頭部（header）、主體（maincontent）、詢問（footer）。
注意：許多朋友在問：為什么兩個相鄰的容器中間的間距不是10px，而是5px呢？按照我們正常的理解，認為應該是兩個值相加，其實這里是兩個合并后取最大值。用css手冊中的話說：塊級元素的垂直相鄰外邊距會合并，而行內元素實際上不占上下外邊距。行內元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負的外邊距值，不過使用時要小心
小結
1、CSS可視化生成、格式化
2、CSS縮寫
3、CSS語法
如圖所示，CSS語法由如下三部分構成，選擇器：可以是ID、CLASS或標簽；屬性和值是用來定義這個物件的某一個特性。如一張桌子的長120cm，寬60cm，套用css的格式為，桌子{長:120cm;寬:60cm;}，這樣是不是容易理解。
4、ID和CLASS選擇器
id只能在頁面中對應一個元素，就像我們的身份證號一樣，每個人的都不一樣；class為類，可以對應多個元素，比如說一年級三班的學生，它所對應的可能是10個20個學生。
id的優先級高于class，比如說今天三班的學生上體育課，小明留下來打掃衛生。那么三班的學生上體育課這是一個類，而小明打掃衛生這是個id，雖然小明也是三班的學生，但id高于class，所以小明執行打掃衛生的任務。
已有 0 人發表留言，猛擊->>這里<<-參與討論
ITeye推薦