CSS命名規(guī)則--參考表

****************************************************

CSS命名規(guī)則

****************************************************

?? ?頭：header?

　　內(nèi)容：content/containe?

　　尾：footer?

　　導(dǎo)航：nav?

　　側(cè)欄：sidebar?

　　欄目：column?

　　頁面外圍控制整體布局寬度：wrapper?

　　左右中：left right center?

　　登錄條：loginbar?

　　標(biāo)志：logo?

　　廣告：banner?

　　頁面主體：main?

　　熱點：hot?

　　新聞：news?

　　下載：download?

　　子導(dǎo)航：subnav?

　　菜單：menu?

　　子菜單：submenu?

　　搜索：search?

　　友情鏈接：friendlink?

　　頁腳：footer?

　　版權(quán)：copyright?

　　滾動：scroll?

　　內(nèi)容：content?

　　標(biāo)簽頁：tab?

　　文章列表：list?

　　提示信息：msg?

　　小技巧：tips?

　　欄目標(biāo)題：title?

　　加入：joinus?

　　指南：guild?

　　服務(wù)：service?

　　注冊：regsiter?

　　狀態(tài)：status?

　　投票：vote?

　　合作伙伴：partner

*******************************************************

XHTML文件中id的命名

*******************************************************

1)頁面結(jié)構(gòu)

　　容器: container?

　　頁頭：header?

　　內(nèi)容：content/container?

　　頁面主體：main?

　　頁尾：footer?

　　導(dǎo)航：nav?

　　側(cè)欄：sidebar?

　　欄目：column?

　　頁面外圍控制整體布局寬度：wrapper?

　　左右中：left right center?

(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?

　　注冊：regsiter?

　　搜索：search?

　　功能區(qū)：shop?

　　標(biāo)題：title?

　　加入：joinus?

　　狀態(tài)：status?

　　按鈕：btn?

　　滾動：scroll?

　　標(biāo)簽頁：tab?

　　文章列表：list?

　　提示信息：msg?

　　當(dāng)前的: current?

　　小技巧：tips?

　　圖標(biāo): icon?

　　注釋：note?

　　指南：guild?

　　服務(wù)：service?

　　熱點：hot?

　　新聞：news?

　　下載：download?

　　投票：vote?

　　合作伙伴：partner?

　　友情鏈接：link?

　　版權(quán)：copyright

******************************************************

XHTML文件中class的命名

******************************************************

(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如(不建議以表現(xiàn)來命名)

　　.red { color: red; }?

　　.f60 { color: #f60; }?

　　.ff8600 { color: #ff8600; }?

(2)字體大小,直接使用"font+字體大小"作為名稱,如?

　　.font12px { font-size: 12px; }?

　　.font9pt {font-size: 9pt; }?

(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如?

　　.left { float:left; }?

　　.bottom { float:bottom; }?

(4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如

　　.barnews { }?

　　.barproduct { }?

******************************************************

其它相關(guān)注意事項

******************************************************

?? ?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

?

?

總結(jié)

以上是生活随笔為你收集整理的CSS命名规则--参考表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。