常用CSS元素div ul dl dt ol的簡單解釋

幾個css元素的簡單解釋 div ul dl dt oldiv，這個很常見，塊級元素，div儘量少用，和table一樣，巢狀越少越好

ol 有序列表。

1. ……


2. ……


3. ……

表現為：

1……
2……
3……

ul 無序列表，表現為li前面是大圓點而不是123

• ……


• ……

很多人容易忽略 dl dt dd的用法

dl 內容塊
dt 內容塊的標題
dd 內容
可以這麼寫：

標題

內容1

內容2

dt 和dd中可以再加入 ol ul li和p

理解這些以後，在使用div佈局的時候，會方便很多，w3c提供了很多元素輔助佈局

由於專案中編寫文件結構、編寫CSS的人員較多，並與程式設計師協同工作，就需要統一class與id的名稱，前天花了一點時間，按照大多人的習慣，制定了下面的常用關鍵字：
容 器：container/box
頭 部：header
主 導 航：mainNav
子 導 航：subNav
頂 導 航：topNav
網站標誌：logo
大 廣 告：banner
頁面中部：mainBody
底 部：footer
菜 單：menu
選單內容：menuContent
子 菜 單：subMenu
子選單內容：subMenuContent
搜 索：search
搜尋關鍵字：keyword
搜尋範圍：range
標籤文字：tagTitle
標籤內容：tagContent
當前標籤：tagCurrent/currentTag
標　 題：title
內 容：content
列 表：list
當前位置：currentPath
側 邊 欄：sidebar
圖 標：icon
注 釋：note
登 錄：login
注 冊：register
列 定 義：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)

程式碼精簡

　　使用DIV CSS佈局，頁面程式碼精簡，這一點相信對XHTML有所瞭解的都知道。程式碼精簡所帶來的直接好處有兩點：一是提高spider爬行效率，能在最短的時間內爬完整個頁面，這樣對收錄質量有一定好處;二是由於能高效的爬行，就會受到spider喜歡，這樣對收錄數量有一定好處。

　　表格的巢狀問題搜尋引擎一般不抓取三層以上的表格巢狀，這一點一直沒有得到搜尋引擎官方的證實。我的幾項實驗結果沒有完全出來，但根據目前掌握的情況來看，spider爬行Table佈局的頁面，遇到多層表格巢狀時，會跳過巢狀的內容或直接放棄整個頁面。

　　使用Table佈局，為了達到一定的視覺效果，不得不套用多個表格。如果巢狀的表格中是核心內容，spider爬行時跳過了這一段沒有抓取到頁面的核心，這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及域名信任度。

　　而DIV CSS佈局基本上不會存在這樣的問題，從技術角度來說，XHTML在控制樣式時也不需要過多的巢狀。搜尋引擎最佳化及營銷都是非常有利的。搜尋引擎表示排名規則會傾向於符合W3C標準的網站或頁面，但事實證明使用XTHML架構的網站排名狀況一般都不錯。這一點或許會有爭議，但樂思蜀本人保持這樣的觀點，有異議者可以拿三組以上基本同等質量的網站對比觀察。內容來自中國站長資訊網()

　　我想，這樣的情況可能不是排名規則，最大的可能還是spider爬行網站時，出現以上差異導致收錄質量的不同。

　　畢竟廖勝於無，建議建站或改版的朋友們，技術許可的情況下，還是選擇DIV CSS佈局為好。

CSS佈局常用的方法：float:none|left|right
取值：
none:　預設值。物件不飄浮
left:　文字流向物件的右邊
right:　文字流向物件的左邊

它是怎樣工作的，看個一行兩列的例子
xhtml:

CSS:
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}

position:static|absolute|fixed|relative
取值：
static:　預設值。無特殊定位，物件遵循HTML定位規則
absolute:　將物件從文件流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件，則依據body物件。而其層疊透過z-index屬性定義
fixed:　未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範
relative:　物件不可層疊，但將依據left，right，top，bottom等屬性在正常文件流中偏移位置

它來實現一行兩列的例子
xhtml:

CSS:
#wrap{position:relative;width:770px;}
#column1{position:absolute;top:0;left:0;width:300px;}
#column2{position:absolute;top:0;right:0;width:470px;}
他們的區別在哪?
顯然，float是相對定位的，會隨著瀏覽器的大小和解析度的變化而改變，而position就不行了，所以一般情況下還是float佈局！

CSS常用佈局例項

單行一列
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}

兩行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

三行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

單行兩列
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}

兩行兩列
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}

三行兩列
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

單行三列

絕對定位
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}

float定位
xhtml: