作為一名資深的建站愛好者，對DIV+CSS技術，筆者是十分癡迷的，如果發現哪一個頁面做的十分漂亮，會第一時間查看原代碼，看一下它是怎么設計的，當然時間久了，你就會發現一些有關CSS很有趣的現象，比如他們的命名規則哦。

網頁設計中常用的CSS命名規則：

      頭：header

      內容：content/container

      尾：footer

      導(dao)航：nav

      側欄：sidebar

      欄目：column

      頁面外圍控(kong)制整體(ti)布局寬(kuan)度：wrapper

      左右中：left right center

      登(deng)錄條(tiao)：loginbar

      標志：logo

      廣告：banner

      頁(ye)面(mian)主體：main

      熱點：hot

      新聞：news

      下(xia)載：download

      子導航：subnav

      菜單：menu

      子菜單(dan)：submenu

      搜索：search

      友(you)情鏈接：friendlink

      頁腳(jiao)：footer

      版權：copyright

      滾動：scroll

      內容(rong)：content

      標簽頁：tab

      文章列表：list

      提(ti)示(shi)信息：msg

      小技巧：tips

      欄目標題：title

      加入：joinus

      指南：guild

      服務：service

      注冊(ce)：regsiter

      狀態(tai)：status

      投票：vote

      合作(zuo)伙伴：partner

注釋的寫法:

      /* Footer */

      內容區

      /* End Footer */

id的命名:

      (1)頁面結構

      容器: container

      頁(ye)頭：header

      內容：content/container

      頁面主(zhu)體：main

      頁(ye)尾：footer

      導航：nav

      側欄：sidebar

      欄目：column

      頁面外圍控制(zhi)整體布(bu)局寬度：wrapper

      左右中：left right center

      (2)導航

      導航(hang)：nav

      主導航：mainbav

      子導航(hang)：subnav

      頂(ding)導航：topnav

      邊(bian)導航：sidebar

      左(zuo)導航：leftsidebar

      右(you)導航：rightsidebar

      菜(cai)單：menu

      子(zi)菜單：submenu

      標題(ti): title

      摘要: summary

      (3)功能

      標志：logo

      廣告：banner

      登陸：login

      登錄條(tiao)：loginbar

      注冊：regsiter

      搜索：search

      功能區：shop

      標題(ti)：title

      加入：joinus

      狀態：status

      按鈕：btn

      滾動(dong)：scroll

      標簽頁：tab

      文章(zhang)列表(biao)：list

      提示信息：msg

      當前的(de): current

      小技(ji)巧：tips

      圖標: icon

      注釋(shi)：note

      指南：guild

      服(fu)務：service

      熱點：hot

      新聞：news

      下載：download

      投票(piao)：vote

      合作伙(huo)伴：partner

      友情鏈接：link

      版(ban)權：copyright

      (四)class的命名:

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

      .red { color: red; }

      .f60 { color: #f60; }

      .ff8600 { color: #ff8600; }

      (2)字(zi)(zi)體(ti)(ti)大(da)(da)小(xiao),直接使用"font+字(zi)(zi)體(ti)(ti)大(da)(da)小(xiao)"作(zuo)為名稱(cheng),如(ru)

      .font12px { font-size: 12px; }

      .font9pt {font-size: 9pt; }

      (3)對(dui)齊樣(yang)式,使用對(dui)齊目標(biao)的英(ying)文名稱,如

      .left { float:left; }

      .bottom { float:bottom; }

     ; (4)標題欄樣式,使用"類別(bie)+功能"的方(fang)式命名,如

      .barnews { }

      .barproduct { }

注意事項:

      1.一(yi)律(lv)小寫;

      2.盡量用英文;

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

      4.盡(jin)量(liang)不縮寫，除非一(yi)看就明(ming)白的單詞，如：

      主(zhu)要的 master.css

      模塊(kuai) module.css

      基本共用(yong) base.css

      布局(ju)，版面 layout.css

      主(zhu)題(ti) themes.css

      專欄 columns.css

      文字 font.css

      表單(dan) forms.css

      補丁 mend.css

      打(da)印 print.css

是(shi)不是(shi)很有意(yi)思(si)呢，當然了，以后再寫(xie)CSS時能夠注意(yi)到這(zhe)些的(de)話，不僅(jin)會顯著你的(de)頁(ye)面正規，還會增加搜(sou)索引擎(qing)的(de)好(hao)感的(de)哦。