網(wǎng)頁(yè)標(biāo)準(zhǔn)化設(shè)計(jì):常用的CSS命名規(guī)則

2010-08-28 10:51:53來(lái)源:西部e網(wǎng)作者:

1、類(lèi)class的命名規(guī)范示例

  頭:header

  內(nèi)容:content/container

  尾:footer

  導(dǎo)航:nav

  側(cè)欄:sidebar

  欄目:column

  頁(yè)面外圍控制整體布局寬度:wrapper

  左右中:left right center

  登錄條:loginbar

  標(biāo)志:logo

  廣告:banner

  頁(yè)面主體:main

  熱點(diǎn):hot

  新聞:news

  下載:download

  子導(dǎo)航:subnav

  菜單:menu

  子菜單:submenu

  搜索:search

  友情鏈接:friendlink

  頁(yè)腳:footer

  版權(quán):copyright

  滾動(dòng):scroll

  內(nèi)容:content

  標(biāo)簽頁(yè):tab

  文章列表:list

  提示信息:msg

  小技巧:tips

  欄目標(biāo)題:title

  加入:joinus

  指南:guild

  服務(wù):service

  注冊(cè):regsiter

  狀態(tài):status

  投票:vote

  合作伙伴:partner


2、注釋的寫(xiě)法

  /* Footer */

  內(nèi)容區(qū)

  /* End Footer */


3、id的命名規(guī)范示例

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

  容器: container

  頁(yè)頭:header

  內(nèi)容:content/container

  頁(yè)面主體:main

  頁(yè)尾:footer

  導(dǎo)航:nav

  側(cè)欄:sidebar

  欄目:column

  頁(yè)面外圍控制整體布局寬度: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

  注冊(cè):regsiter

  搜索:search

  功能區(qū):shop

  標(biāo)題:title

  加入:joinus

  狀態(tài):status

  按鈕:btn

  滾動(dòng):scroll

  標(biāo)簽頁(yè):tab

  文章列表:list

  提示信息:msg

  當(dāng)前的: current

  小技巧:tips

  圖標(biāo): icon

  注釋?zhuān)簄ote

  指南:guild

  服務(wù):service

  熱點(diǎn):hot

  新聞:news

  下載:download

  投票:vote

  合作伙伴:partner

  友情鏈接:link

  版權(quán):copyright


4、類(lèi)class的書(shū)寫(xiě)規(guī)范示例

  (1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如

  .red { color: red; }

  .f60 { color: #f60; }

  .ff8600 { color: #ff8600; }

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

  .font12px { font-size: 12px; }

  .font9pt {font-size: 9pt; }

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

  .left { float:left; }

  .bottom { float:bottom; }

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

  .barnews { }

  .barproduct { }


5、CSS文件命名示例

  主要的 master.css

  模塊 module.css

  基本共用 base.css

  布局,版面 layout.css

  主題 themes.css

  專(zhuān)欄 columns.css

  文字 font.css

  表單 forms.css

  補(bǔ)丁 mend.css

  打印 print.css

6、注意事項(xiàng)

  (1)一律小寫(xiě);

  (2)盡量用英文;

  (3)不加中杠和下劃線;

  (4)盡量不縮寫(xiě),除非一看就明白的單詞.

關(guān)鍵詞:CSS

贊助商鏈接: