DIV+CSS命名規則
你對DIV+CSS命名規則是否了解，這里和大家分享一下，首先看一下常用代碼結構，div：主要用于布局，分割頁面的結構；ul/ol：用于無序/有序列表。
DIV+CSS命名規則
常用代碼結構：
div：主要用于布局，分割頁面的結構
ul/ol：用于無序/有序列表
span：沒有特殊的意義，可以用作排版的輔助，例如：
然后在css中定義span為右浮動，實現了日期和標題分兩側顯示的效果
h1-h6：標題
h1-h6 根據重要性依次遞減
h1位最重要的標題
◆label：為了使你的表單更有親和力而且還能輔助表單排版的好東西，例如：
- <label for="user-password">密 碼label>
- <input type="password" name="password"
- id="user-password" />
◆fieldset & legend：fildset套在表單外，legend用于描述表單內容。例如：
- <form>
- <fieldset>
- <legend>titlelegend>
- <label for="user-password">密 碼label>
- <input type="password" name="password" id="user-password" />
- fieldset>
- form>
◆dl,dt,dd：當頁面中出現***行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽，例如：
- <dl>
- <dt>什么是CSS?dt>
- <dd>CSS就是一種叫做樣式表（stylesheet）的技術。
- 也有的人稱之為層疊樣式表（Cascading Stylesheet）。<dd>
- <dt>什么是XHTML？dt>
- < dd>XHTML是一個基于XML的置標語言，看起來與HTML有些想像，
- 只有一些小的但重要的區別?？梢赃@樣看，
- XHTML就是一個扮演著類似 HTML的角色的XML。本質上說，
- XHTML是一個橋接（過渡）技術，
- 結合了XML（有幾分）的強大功能及HTML（大多數）的簡單特性。dd>
- dl>
C #content
S #subcol
M #maincol
X #xcol
這是縱向布局的XHTML結構，c-smx表示網頁有三個縱欄, c-sm表示有兩個縱欄, c-mx表示有兩個縱欄其中一個是附屬的, c-m表示一個縱欄。
其中在三縱欄的布局需要分為兩層 ***層是#subcol與#main第二層是#main中的#maincol與#xcol。#p#
（一）自定義命名：
根據w3c網站上給出的,***是用意義命名
比如：是重要的新聞高亮顯示（像紅色）
有兩種
◆red{color:red}
◆important-news{color:red}
很顯然第二種傳達的意義更加明確,所以盡量不要用意義不明確的作為自己自定義的名字
(二)注釋的寫法:
/*Footer*/
內容區
/*EndFooter*/
(三)id的命名:
(1)頁面結構
容器:container 頁頭：header 內容：content/container
頁面主體：main 頁尾：footer 導航：nav
側欄：sidebar 欄目：column 頁面外圍控制整體布局寬度：wrapper
左右中：leftrightcenter
(2)導航
導航：nav 主導航：mainbav 子導航：subnav
頂導航：topnav 邊導航：sidebar 左導航：leftsidebar
右導航：rightsidebar 菜單：menu 子菜單：submenu
標題:title 摘要:summary
(3)功能
標志：logo 廣告：banner 登陸：login 登錄條：loginbar
注冊：regsiter 搜索：search 功能區：shop
標題：title 加入：joinus 狀態：status 按鈕：btn
滾動：scroll 標簽頁：tab 文章列表：list 提示信息：msg
當前的:current 小技巧：tips 圖標:icon 注釋：note
指南：guild 服務：service 熱點：hot 新聞：news
下載：download 投票：vote 合作伙伴：partner
友情鏈接：link 版權：copyrigh。t#p#
(四)class的命名:
(1)顏色:使用顏色的名稱或者16進制代碼,如
- .red{color:red;}
- .f60{color:#f60;}
- .ff8600{color:#ff8600;}
(2)字體大小,直接使用’font+字體大小’作為名稱,如
- .font12px{font-size:12px;}
- .font9pt{font-size:9pt;}
(3)對齊樣式,使用對齊目標的英文名稱,如
- .left{float:left;}
- .bottom{float:bottom;}
(4)標題欄樣式,使用’類別+功能’的方式命名,如
- .barnews{}
- .barproduct{}
注意事項::
1.一律小寫;
2.盡量用英文;
3.不加中杠和下劃線;
4.盡量不縮寫，除非一看就明白的單詞.
主要的master.css 模塊module.css 基本共用base.css
布局，版面layout.css 主題themes.css 專欄columns.css
文字font.css 表單forms.css 補丁mend.css 打印print.css
◆DIV排版的核心：即CSS盒子模式
CSS每個div盒子模式包括：內容(content)、填充(padding)、邊框(border)、邊界(margin)
【編輯推薦】
