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