網頁切圖過程中div+css命名規則

網頁切圖過程中div+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 　　            

(二)注釋的寫法:

内容區

(三)id的命名:

(1)頁面結構

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

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

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

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

(2)導航

導航：nav

主導航：mainbav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

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

(3)功能

标志：logo

廣告：banner

登陸：login

登入條：loginbar

注冊：regsiter

搜尋：search

功能區：shop

标題：title

加入：joinus

狀态：status

按鈕：btn

滾動：scroll

标簽頁：tab

文章清單：list

提示資訊：msg

目前的: current

小技巧：tips

圖示: icon

注釋：note

指南：guild

服務：service

熱點：hot

新聞：news

下載下傳：download

投票：vote

合作夥伴：partner

友情連結：link

版權：copyright

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