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

DIV+CSS命名規(guī)則

常用代碼結構：

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有些想像，  
只有一些小的但重要的區(qū)別?？梢赃@樣看，  
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*/

內容區(qū)

/*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　　功能區(qū)：shop

標題：title　　加入：joinus　狀態(tài)：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)

【編輯推薦】

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