常用的CSS命名規(guī)則:

頭：header

內(nèi)容：content/container

尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar欄目：column

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

左右中：left right center登錄條：loginbar

標(biāo)志：logo

廣告：banner

頁面主體：main　　熱點(diǎn)：hot新聞：news

下載：download

子導(dǎo)航：subnav

菜單：menu子菜單：submenu

搜索：search

友情鏈接：friendlink

頁腳：footer版權(quán)：copyright

滾動(dòng)：scroll

內(nèi)容：content

標(biāo)簽頁：tab文章列表：list

提示信息：msg

小技巧：tips

欄目標(biāo)題：title加入：joinus

指南：guild

服務(wù)：service

注冊：regsiter狀態(tài)：status

投票：vote

合作伙伴：partner

id的命名:

(1)頁面結(jié)構(gòu)　　容器: container　　頁頭：header　　內(nèi)容：content/container　　頁面主體：main　　頁尾：footer　　導(dǎo)航：nav　　側(cè)欄：sidebar　　欄目：column　　頁面外圍控制整體布局寬度：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　　注冊：regsiter　　搜索：search 搜索條：searchbar??　　功能區(qū)：shop?????標(biāo)題：title　　加入：joinus 　狀態(tài)：status　　按鈕：btn　　滾動(dòng)：scroll　　標(biāo)簽頁：tab　　文章列表：list　　提示信息：msg　　當(dāng)前的: current　　小技巧：tips　　圖標(biāo): icon　　注釋：note　　指南：guild　服務(wù)：service　　熱點(diǎn)：hot　　新聞：news　　下載：download　　投票：vote　　合作伙伴：partner　　友情鏈接：link　　版權(quán)：copyright

注意事項(xiàng):1）、所有的命名最好都小寫2）重绷、屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss5",id="divcss5"3）歹河、每個(gè)標(biāo)簽都要有開始和結(jié)束，且要有正確的層次花吟，排版有規(guī)律工整4）秸歧、空元素要有結(jié)束的tag或于開始的tag后加上"/"5）、表現(xiàn)與結(jié)構(gòu)完全分離衅澈，代碼中不涉及任何的表現(xiàn)元素键菱，如style、font、bgColor经备、border等6）拭抬、<h1>到<h5>的定義，應(yīng)遵循從大到小的原則侵蒙，體現(xiàn)文檔的結(jié)構(gòu)造虎，并有利于搜索引擎的查詢。7）纷闺、給每一個(gè)表格和表單加上一個(gè)唯一的算凿、結(jié)構(gòu)標(biāo)記id8）、給圖片加上alt標(biāo)簽9）犁功、盡量使用英文命名原則10）氓轰、盡量不縮寫，除非一看就明白的單詞.

CSS樣式命名

[if !supportLists]1.?[endif]對齊樣式命名：left（左邊內(nèi)容）浸卦、center（中間內(nèi)容）署鸡、right（右邊內(nèi)容）等；

[if !supportLists]2.?[endif]顏色英文命名：red（紅色）限嫌、green（綠色）靴庆、yellow（黃色），又或者border_red（紅色邊框）等怒医；

[if !supportLists]3.?[endif]顏色代碼命名：f00（紅色）撒穷、ff0（黃色）、f90（橙色）等裆熙；

[if !supportLists]4.?[endif]文字大小命名：font12px（字體12像素）、font16px（字體16像素）等禽笑；

[if !supportLists]5.?[endif]頁面線條命名：line_x （橫線）入录、line_y （縱線）或 line_red（紅線）、line_black（黑線）

[if !supportLists]6.?[endif]圖片圖標(biāo)命名：pic_1.jpg佳镜、pic_2.jpg 或 ico_1.gif僚稿、ico_2.gif

[if !supportLists]7.?[endif]頁面廣告命名：ad_01、ad_02

[if !supportLists]8.?[endif]背景框架命名：nav_bg（代表導(dǎo)航條的背景圖片位置）蟀伸、tool_bg（代表工具欄的背景圖片位置）

Css文件命名規(guī)范

[if !supportLists]1.?[endif]index.css：單獨(dú)為首頁建立樣式

[if !supportLists]2.?[endif]head.css：頭部樣式蚀同，多個(gè)頁面頭部設(shè)計(jì)風(fēng)格相同時(shí)使用。

[if !supportLists]3.?[endif]base.css：共用樣式啊掏。

[if !supportLists]4.?[endif]style.css：獨(dú)立頁面所使用的樣式文件蠢络。

[if !supportLists]5.?[endif]global.css：頁面樣式基礎(chǔ)，全局公用樣式迟蜜，頁面中必須包含刹孔。

[if !supportLists]6.?[endif]layout.css：布局、版面樣式娜睛，公用類型較多時(shí)使用髓霞，一般用在首頁級頁面和產(chǎn)品類頁面中

[if !supportLists]7.?[endif]module.css：模塊卦睹，用于產(chǎn)品類頁，也可與其它樣式配合使用方库。

[if !supportLists]8.?[endif]master.css：主要的樣式表

[if !supportLists]9.?[endif]columns.css：專欄樣式

[if !supportLists]10.?[endif]themes.css：主體樣式

[if !supportLists]11.?[endif]forms.css：表單樣式

[if !supportLists]12.?[endif]mend.css：補(bǔ)丁结序，基于以上樣式進(jìn)行的私有化修補(bǔ)。

頁面結(jié)構(gòu)命名

[if !supportLists]1.?[endif]page：代表整個(gè)頁面纵潦，用于最外層徐鹤。

[if !supportLists]2.?[endif]wrap：外套，將所有元素包在一起的一個(gè)外圍包酪穿，用于最外層

[if !supportLists]3.?[endif]wrapper：頁面外圍控制整體布局寬度凳干，用于最外層

[if !supportLists]4.?[endif]container：一個(gè)整體容器，用于最外層

[if !supportLists]5.?[endif]head被济、header：頁頭區(qū)域救赐，用于頭部

[if !supportLists]6.?[endif]nav：導(dǎo)航條

[if !supportLists]7.?[endif]content：內(nèi)容，網(wǎng)站中最重要的內(nèi)容區(qū)域只磷，用于網(wǎng)頁中部主體

[if !supportLists]8.?[endif]main：網(wǎng)站中的主要區(qū)域（表示最重要的一塊位置）经磅，用于中部主體內(nèi)容

[if !supportLists]9.?[endif]column：欄目

[if !supportLists]10.?[endif]sidebar：側(cè)欄

[if !supportLists]11.?[endif]foot、footer：頁尾钮追、頁腳预厌。網(wǎng)站一些附加信息放置區(qū)域，（或命名為copyright）用于底部

導(dǎo)航命名

[if !supportLists]1.?[endif]nav元媚、navbar轧叽、navigation、nav-wrapper：導(dǎo)航條或?qū)Ш桨兀頇M向?qū)Ш?/p>

[if !supportLists]2.?[endif]topnav：頂部導(dǎo)航

[if !supportLists]3.?[endif]mainbav：主導(dǎo)航

[if !supportLists]4.?[endif]subnav：子導(dǎo)航

[if !supportLists]5.?[endif]sidebar：邊導(dǎo)航

[if !supportLists]6.?[endif]leftsidebar 或 sidebar_a ：左導(dǎo)航

[if !supportLists]7.?[endif]rightsidebar 或 sidebar_b：右導(dǎo)航

[if !supportLists]8.?[endif]title：標(biāo)題

[if !supportLists]9.?[endif]summary：摘要/li>

[if !supportLists]10.?[endif]menu：菜單炭晒。區(qū)域包含一般的鏈接和菜單

[if !supportLists]11.?[endif]submenu：子菜單

[if !supportLists]12.?[endif]drop：下拉

[if !supportLists]13.?[endif]dorpmenu：下拉菜單

[if !supportLists]14.?[endif]links：鏈接菜單

功能命名

[if !supportLists]1.?[endif]logo：標(biāo)記網(wǎng)站logo標(biāo)志

[if !supportLists]2.?[endif]banner：標(biāo)語、廣告條甥角、頂部廣告條

[if !supportLists]3.?[endif]login：登陸网严，（例如登錄表單：form-login）

[if !supportLists]4.?[endif]loginbar：登錄條

[if !supportLists]5.?[endif]regsiter：注冊

[if !supportLists]6.?[endif]tool、toolbar：工具條

[if !supportLists]7.?[endif]search：搜索

[if !supportLists]8.?[endif]searchbar：搜索條

[if !supportLists]9.?[endif]searchlnput：搜索輸入框

[if !supportLists]10.?[endif]shop：功能區(qū)嗤无，表示現(xiàn)在的

[if !supportLists]11.?[endif]icon：小圖標(biāo)

[if !supportLists]12.?[endif]label：商標(biāo)

[if !supportLists]13.?[endif]homepage：首頁

[if !supportLists]14.?[endif]subpage：二級頁面子頁面

[if !supportLists]15.?[endif]hot：熱門熱點(diǎn)

[if !supportLists]16.?[endif]list：文章列表震束，（例如新聞列表：list-news）

[if !supportLists]17.?[endif]scroll:滾動(dòng)

[if !supportLists]18.?[endif]tab：標(biāo)簽

[if !supportLists]19.?[endif]sitemap：網(wǎng)站地圖

[if !supportLists]20.?[endif]msg 或 message：提示信息

[if !supportLists]21.?[endif]current：當(dāng)前的

[if !supportLists]22.?[endif]joinus：加入

[if !supportLists]23.?[endif]status：狀態(tài)

[if !supportLists]24.?[endif]btn：按鈕，（例如搜索按鈕可寫成：btn-search）

[if !supportLists]25.?[endif]tips：小技巧

[if !supportLists]26.?[endif]note：注釋

[if !supportLists]27.?[endif]guild：指南

[if !supportLists]28.?[endif]arr当犯、arrow：標(biāo)記箭頭

[if !supportLists]29.?[endif]service：服務(wù)

[if !supportLists]30.?[endif]breadcrumb：(即頁面所處位置導(dǎo)航提示）

[if !supportLists]31.?[endif]download：下載

[if !supportLists]32.?[endif]vote：投票

[if !supportLists]33.?[endif]siteinfo：網(wǎng)站信息

[if !supportLists]34.?[endif]partner：合作伙伴

[if !supportLists]35.?[endif]link垢村、friendlink：友情鏈接

[if !supportLists]36.?[endif]copyright：版權(quán)信息

[if !supportLists]37.?[endif]siteinfoCredits：信譽(yù)

[if !supportLists]38.?[endif]siteinfoLegal：法律信息

以下為CSS樣式命名與CSS文件命名參考表，DIV CSS命名集合：

CSS樣式命名說明

網(wǎng)頁公共命名

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

#container或#content容器,用于最外層

#layout布局

#head, #header頁頭部分

#foot, #footer頁腳部分

#nav主導(dǎo)航

#subnav二級導(dǎo)航

#menu菜單

#submenu子菜單

#sideBar側(cè)欄

#sidebar_a, #sidebar_b左邊欄或右邊欄

#main頁面主體

#tag標(biāo)簽

#msg #message提示信息

#tips小技巧

#vote投票

#friendlink友情連接

#title標(biāo)題

#summary摘要

#loginbar登錄條

#searchInput搜索輸入框

#hot熱門熱點(diǎn)

#search搜索

#search_output搜索輸出和搜索結(jié)果相似

#searchBar搜索條

#search_results搜索結(jié)果

#copyright版權(quán)信息

#branding商標(biāo)

#logo網(wǎng)站LOGO標(biāo)志

#siteinfo網(wǎng)站信息

#siteinfoLegal法律聲明

#siteinfoCredits信譽(yù)

#joinus加入我們

#partner合作伙伴

#service服務(wù)

#regsiter注冊

arr/arrow箭頭

#guild指南

#sitemap網(wǎng)站地圖

#list列表

#homepage首頁

#subpage二級頁面子頁面

#tool, #toolbar工具條

#drop下拉

#dorpmenu下拉菜單

#status狀態(tài)

#scroll滾動(dòng)

.tab標(biāo)簽頁

.left .right .center居左嚎卫、中肝断、右

.news新聞

.download下載

.banner廣告條(頂部廣告條)

電子貿(mào)易相關(guān)

.products產(chǎn)品

.products_prices產(chǎn)品價(jià)格

.products_description產(chǎn)品描述

.products_review產(chǎn)品評論

.editor_review編輯評論

.news_release最新產(chǎn)品

.publisher生產(chǎn)商

.screenshot縮略圖

.faqs常見問題

.keyword關(guān)鍵詞

.blog博客

.forum論壇

[if !supportLists]39.?[endif]

CSS文件命名說明

master.css,style.css主要的

module.css模塊

base.css基本共用

layout.css布局，版面

themes.css主題

columns.css專欄

font.css文字、字體

forms.css表單

mend.css補(bǔ)丁

print.css打印