我們開發CSS+DIV網頁(Xhtml)時候,比較困惑和糾結的事就是CSS命名，特別是新手不知道什麼地方該如何命名，怎樣命名纔是好的方法。下面本站小編爲大家分享DIV+CSS命名規範及參考值~
命名規則說明：
1)、所有的命名最好都小寫
2)、屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss5",id="divcss5"
3)、每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整
4)、空元素要有結束的tag或於開始的tag後加上"/"
5)、表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
6)、定義，應遵循從大到小的原則，體現文檔的`結構，並有利於搜尋引擎的查詢。
7)、給每一個表格和表單加上一個唯一的、結構標記id
8)、給圖片加上alt標籤
9)、儘量使用英文命名原則
10)、儘量不縮寫，除非一看就明白的單詞
相對網頁外層重要部分CSS樣式命名：
外套wrap------------------用於最外層頭部header----------------用於頭部主要內容main------------用於主體內容(中部)左側main-left-------------左側佈局右側main-right-----------右側佈局導航條nav-----------------網頁選單導航條內容content---------------用於網頁中部主體底部footer-----------------用於底部
DIV+CSS命名參考表：
以下爲CSS樣式命名與CSS檔案命名參考表，DIV CSS命名集合：
CSS樣式命名 | 說明 |
網頁公共命名 | |
#wrapper | 頁面外圍控制整體佈局寬度 |
#container或#content | 容器,用於最外層 |
#layout | 佈局 |
#head,#header | 頁頭部分 |
#foot,#footer | 頁腳部分 |
#nav | 主導航 |
#subnav | 二級導航 |
#menu | 選單 |
#submenu | 子選單 |
#sideBar | 側欄 |
#sidebar_a,#sidebar_b | 左邊欄或右邊欄 |
#main | 頁面主體 |
#tag | 標籤 |
#msg#message | 提示資訊 |
#tips | 小技巧 |
#vote | 投票 |
#friendlink | 友情連接 |
#title | 標題 |
#summary | 摘要 |
#loginbar | 登入條 |
#searchInput | 搜尋輸入框 |
#hot | 熱門熱點 |
#search | 搜尋 |
#search_output | 搜尋輸出和搜尋結果相似 |
#searchBar | 搜尋條 |
#search_results | 搜尋結果 |
#copyright | 版權資訊 |
#branding | 商標 |
#logo | 網站LOGO標誌 |
#siteinfo | 網站資訊 |
#siteinfoLegal | 法律聲明 |
#siteinfoCredits | 信譽 |
#joinus | 加入我們 |
#partner | 合作伙伴 |
#service | |
#regsiter | 註冊 |
arr/arrow | 箭頭 |
#guild | |
#sitemap | 網站地圖 |
#list | 列表 |
#homepage | 首頁 |
#subpage | 二級頁面子頁面 |
#tool,#toolbar | 工具條 |
#drop | 下拉 |
#dorpmenu | 下拉選單 |
#status | 狀態 |
#scroll | 滾動 |
頁籤 | |
er | 居左、中、右 |
新聞 | |
load | 下載 |
er | 廣告條(頂部廣告條) |
電子貿易相關 | |
ucts | 產品 |
ucts_prices | 產品價格 |
ucts_description | 產品描述 |
ucts_review | 產品評論 |
or_review | 編輯評論 |
_release | 最新產品 |
isher | 生產商 |
enshot | 縮略圖 |
常見問題 | |
ord | 關鍵詞 |
博客 | |
m | 論壇 |
CSS檔案命名 | 說明 |
, | 主要的 |
模組 | |
基本共用 | |
佈局，版面 | |
主題 | |
專欄 | |
文字、字型 | |
表單 | |
補丁 | |
打印 |