css命名規則

内容：content/container

導航：nav

側欄：sidebar

欄目：column

标志：logo

頁面主體：main

廣告：banner

熱點：hot

新聞：news

下載下傳：download

子導航：subnav

菜單：menu

搜尋：search

頁腳：footer

滾動：scroll

版權：copyright

友情連結：friendlink

子菜單：submenu

内容：content

标簽頁：tab

文章清單：list

注冊：regsiter

提示資訊：msg

小技巧：tips

加入：joinus

欄目标題：title

指南：guild

服務：service

狀态：status

投票：vote

尾：footer

合作夥伴：partner

登入條：loginbar

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

左右中：left right center

(二)注釋的寫法:

/* Footer */

内容區

/* End Footer */

(三)id的命名:

(1)頁面結構

容器: container 頁頭：header 内容：content/container

頁面主體：main 頁尾：footer 導航：nav

側欄：sidebar 欄目：column 左右中：left right center

(2)導航

主導航：mainbav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu 子菜單：submenu 标題: title 摘要: summary

(3)功能

登陸：login

功能區：shop

标題：title

按鈕：btn

目前的: current

圖示: icon

注釋：note

友情連結：link

(四)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

主題 themes.css

專欄 columns.css

列印 print.css

文字 font.css

表單 forms.css

更新檔 mend.css

布局，版面 layout.css