你對(duì)DIV+CSS命名規(guī)則是否了解，這里和大家分享一下，首先看一下常用代碼結(jié)構(gòu)，div：主要用于布局，分割頁面的結(jié)構(gòu)；ul/ol：用于無序/有序列表。

DIV+CSS命名規(guī)則

常用代碼結(jié)構(gòu)：

div：主要用于布局，分割頁面的結(jié)構(gòu)

ul/ol：用于無序/有序列表

span：沒有特殊的意義，可以用作排版的輔助，例如：

然后在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)頁面中出現(xiàn)***行為類似標(biāo)題/簡述，然后下面為詳細(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)語言，看起來與HTML有些想像，  
只有一些小的但重要的區(qū)別?？梢赃@樣看，  
XHTML就是一個(gè)扮演著類似 HTML的角色的XML。本質(zhì)上說，  
XHTML是一個(gè)橋接（過渡）技術(shù)，  
結(jié)合了XML（有幾分）的強(qiáng)大功能及HTML（大多數(shù)）的簡單特性。dd> 
 
dl> 

C #content

S #subcol

M #maincol

X #xcol

這是縱向布局的XHTML結(jié)構(gòu)，c-smx表示網(wǎng)頁有三個(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)頁面結(jié)構(gòu)

容器:container　　頁頭：header　　內(nèi)容：content/container

頁面主體：main　　頁尾：footer　　導(dǎo)航：nav

側(cè)欄：sidebar　　欄目：column　　頁面外圍控制整體布局寬度：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)簽頁：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)

【編輯推薦】

1. 五大常用Div高度自適應(yīng)的方法
2. IE6.0對(duì)padding的解讀分析
3. CSS中position屬性的用法和作用
4. Float構(gòu)建三欄DIV CSS網(wǎng)頁布局
5. 技術(shù)分享 如何使用CSS控制超鏈接文字樣式