一、頁面結(jié)構(gòu)
容器:container
頁頭:header
內(nèi)容:content/container
頁面主體:main
頁尾:footer
導(dǎo)航:nav
側(cè)欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
左右中:left right center
二、導(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
三、功能
標(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
熱點(diǎn):hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:friendlink
版權(quán):copyright
四、顏色
使用顏色的名稱或者16進(jìn)制代碼,如:
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
五、字體大小
直接使用“font+字體大小”作為名稱,如:
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
六、對齊樣式
使用對齊目標(biāo)的英文名稱,如:
.left { float:left; }
.bottom { float:bottom; }
七、標(biāo)題欄樣式
使用“類別+功能”的方式命名,如:
.barnews { }
.barproduct { }
電子貿(mào)易相關(guān)命名:
.products 產(chǎn)品
.products_prices 產(chǎn)品價格
.products_des cription 產(chǎn)品描述
.products_review 產(chǎn)品評論
.editor_rwview 編輯產(chǎn)品
.news_release 最新產(chǎn)品
.publisher 生產(chǎn)商
.screenshot 縮略圖
.faqs 常見問題
.keyword 關(guān)鍵詞
.blog 博客
.forum 論壇
八、注意事項
1、一律小寫;
2、盡量用英文;
3、不加中杠和下劃線;
4、盡量不縮寫,除非一看就明白的單詞;
5、屬性的值一定要用雙引號(“”)括起來,且一定要有值如class="divcss5",id="divcss5";
6、每個標(biāo)簽都要有開始和結(jié)束,且要有正確的層次,排版有規(guī)律工整。
九、樣式文件命名
主要的master.css
模塊module.css
基本共用base.css
布局,版面layout.css
主題themes.css
專欄columns.css
文字font.css
表單forms.css
補(bǔ)丁mend.css
打印print.css