1 一列固定寬度
2 一列固定寬度置中
3 一列自適應寬度
4 一列自適應寬度置中
5 一列二至多塊布局
採用了dreamweaver來開始網頁設計，其優點主要有：代碼提示，可視化開發環境，完美支援css+div
一列固定寬度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><mce:style type="text/css"><!--<br />#layout { height: 300px; width: 400px; background: #99FFcc; }<br />--></mce:style><style type="text/css" mce_bogus="1">#layout { height: 300px; width: 400px; background: #99FFcc; }</style><br /></head></p><br /><p><body><br /><div id="layout">此處顯示 id "layout" 的內容</div><br /></body><br /></html>
一列固定寬度置中
一列固定寬度置中和一列固定寬度相比，我們要解決的問題就是置中。這裡我們用到css的外邊距屬性：margin。在IE6及以上版本和標準的瀏覽器當中，當設定一個盒模型的的margin:auto;時，可以讓這個盒模型置中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><mce:style type="text/css"><!--<br />#layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }<br />--></mce:style><style type="text/css" mce_bogus="1">#layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }</style><br /></head></p><br /><p><body><br /><div id="layout">此處顯示 id "layout" 的內容</div><br /></body><br /></html>
一列自適應寬
自適應寬度是相對於瀏覽器而言，盒模型的寬度隨著瀏覽器寬度的改變而改變。這時要用到寬度的百分比。當一個盒模型不設定寬度時，它預設是相對於瀏覽器顯示的。
這裡的選取器類型是新手朋友最容易迷糊的地方，類：是指定義一個class，可以多個對象引用；標籤：指對預設的html標籤進行重新定義，如可以定義body{margin:0}，意思是 將body的外邊距設定為0，h2{color:#f00}是將所有h2標籤的文字顏色設定為紅色；進階它把ID和偽類放到一塊了，是一個設定不合理的地方，在cs4版本中已經分開了。ID是以#開始，id只能作用於一個對象，不能作用於多個對象，優先順序高於class，這是id和class的區別。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><mce:style type="text/css"><!--<br />body { margin:0;}<br />#layout { height: 300px; width: 80%; background: #99FFcc; }<br />--></mce:style><style type="text/css" mce_bogus="1">body { margin:0;}<br />#layout { height: 300px; width: 80%; background: #99FFcc; }</style><br /></head></p><br /><p><body><br /><div id="layout">此處顯示 id "layout" 的內容</div><br /></body><br /></html>
一列自適應寬度置中
同樣和固定寬度置中一樣，我們只需要設定div的外邊距為auto即可實現置中了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><mce:style type="text/css"><!--<br />body { margin:0;}<br />#layout { height: 300px; width: 80%; background: #99FFcc; margin:auto;}<br />--></mce:style><style type="text/css" mce_bogus="1">body { margin:0;}<br />#layout { height: 300px; width: 80%; background: #99FFcc; margin:auto;}</style><br /></head></p><br /><p><body><br /><div id="layout">此處顯示 id "layout" 的內容</div><br /></body><br /></html>
一列二至多塊布局
一般的網站整體可以分為上中下結構，即：頭部、中間主體、底部。那麼我們可以用三個div塊來劃分，分別給它們起名為：頭部（header）、主體（maincontent）、詢問（footer）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><mce:style type="text/css"><!--<br />body { margin:0; padding:0;}<br />#header { margin:5px auto; width:500px; height:80px; background:#9F9;}<br />#main { margin:5px auto; width:500px; height:400px; background:#9FF;}<br />#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}<br />--></mce:style><style type="text/css" mce_bogus="1">body { margin:0; padding:0;}<br />#header { margin:5px auto; width:500px; height:80px; background:#9F9;}<br />#main { margin:5px auto; width:500px; height:400px; background:#9FF;}<br />#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}</style><br /></head></p><br /><p><body><br /><div id="header">此處顯示 id "header" 的內容</div><br /><div id="main">此處顯示 id "main" 的內容</div><br /><div id="footer">此處顯示 id "footer" 的內容</div><br /></body><br /></html>
注意：許多朋友在問：為什麼兩個相鄰的容器中間的間距不是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，所以小明執行打掃衛生的任務。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
