本文格式為Word版，下載可任意編輯——DIVCSS命名規(guī)范記錄DIV+CSS命名模范記錄

我們開(kāi)發(fā)CSS+DIV網(wǎng)頁(yè)Xhtml時(shí)候,對(duì)比困惑和糾結(jié)的事就是CSS命名，更加是新手不知道什么地方該如何命名，怎樣命名才是好的方法。

命名規(guī)矩說(shuō)明：

1、全體的命名最好都小寫(xiě)

2、屬性的.值確定要用雙引號(hào)括起來(lái)，且確定要有值如class=pcss5,id=pcss5

3、每個(gè)標(biāo)簽都要有開(kāi)頭和終止，且要有正確的層次，排版有規(guī)律工整

4、空元素要有終止的tag或于開(kāi)頭的tag后加上/

5、表現(xiàn)與布局完全分開(kāi)，代碼中不涉及任何的表現(xiàn)元素，如style、font、bgColor、border等

6、定義，應(yīng)遵循從大到小的原那么，表達(dá)文檔的布局，并有利于探尋引擎的查詢(xún)。

7、給每一個(gè)表格和表單加上一個(gè)唯一的、布局標(biāo)記id

8、給圖片加上alt標(biāo)簽

9、盡量使用英文命名原那么

10、盡量不縮寫(xiě)，除非一看就明白的單詞

相對(duì)網(wǎng)頁(yè)外層重要片面CSS樣式命名：

外套wrap用于最外層頭部header用于頭部主要內(nèi)容main用于主體內(nèi)容中部左側(cè)main-left左側(cè)布局右側(cè)main-right右側(cè)布局導(dǎo)航條nav網(wǎng)頁(yè)菜單導(dǎo)航條內(nèi)容content用于網(wǎng)頁(yè)中部主體底部footer用于底部

DIV+CSS命名參考表：

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

CSS樣式命名

說(shuō)明

網(wǎng)頁(yè)公共命名

#wrapper

頁(yè)面外圍操縱整體布局寬度

#container或#content

容器,用于最外層

#layout

布局

#head,#header

頁(yè)頭片面

#foot,#footer

頁(yè)腳片面

#nav

主導(dǎo)航

#subnav

二級(jí)導(dǎo)航

#menu

菜單

#submenu

子菜單

#sideBar

側(cè)欄

#sidebar_a,#sidebar_b

左邊欄或右邊欄

#main

頁(yè)面主體

#tag

標(biāo)簽

#msg#message

提示信息

#tips

小技巧

#vote

投票

#friendlink

友情連接

#title

標(biāo)題

#summary

摘要

#loginbar

登錄條

#searchInput

探尋輸入框

#hot

熱門(mén)熱點(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

注冊(cè)

arr/arrow

箭頭

#guild

指南

#sitemap

網(wǎng)站地圖

#list

列表

#homepage

首頁(yè)

#subpage

二級(jí)頁(yè)面子頁(yè)面

#tool,#toolbar

工具條

#drop

下拉

#dorpmenu

下拉菜單

#status

狀態(tài)

#scroll

滾動(dòng)

.tab

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

.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)品評(píng)論

.editor_review

編輯評(píng)論

.news_release

最新產(chǎn)品

.publisher

生產(chǎn)商

.screenshot

縮略圖

.faqs

常見(jiàn)問(wèn)題

.keyword

關(guān)鍵詞

.blog

博客

.forum

論壇

CSS文件命名

說(shuō)明

master.css,style.css

主要的

module.css

模塊

base.css

根本共用

layout.css

布局，版面

themes