DIV+CSS規範命名集合
- 巴扎黑原創
- 2017-05-01 14:51:211548瀏覽
我們開發CSS+p網頁（Xhtml）時候,比較困惑和糾結的事就是CSS命名，特別是新手不知道什麼地方該如何命名，怎樣命名才是好的方法。
命名規則說明：
# 1）、所有的命名最好都小寫
# 2）、屬性的值一定要用雙引號("")括起來，且一定要有值如class="pcss5",id="pcss5"
3）、每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整
4）、空元素要有結束的tag或於開始的tag後面加上"/"
# 5）、表現與結構完全分離，程式碼中不涉及任何的表現元素，如style、font、bgColor、border等
6）、定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜尋引擎的查詢。
7）、為每一個表格和表單加上一個唯一的、結構標記id
# 8）、為圖片加上alt標籤
9）、盡量使用英文命名原則
10）、盡量不縮寫，除非一看就明白的單字
相對網頁外層重要部分CSS樣式命名：
# 外套wrap------------------------用於最外層頭部header----------------用於頭部主要內容main------------用於主體內容（中）左側main-left-------------左側佈局右側main-right---- -------右側佈局導覽條nav-----------------網頁選單導覽列內容content-------------- -用於網頁中部主體底部footer-----------------用於底部
# p+CSS命名參考表：
以下為CSS樣式命名與CSS檔案命名參考表，p CSS命名集合：
CSS樣式命名 |
說明 |
| #
網頁公命名 |
|
| #
#wrapper |
頁面外圍控制整體佈局寬度 |
| #
#container或#content |
容器,用於最外層 |
| #
#layout |
佈局 |
| #
#head,#header |
頁頭部分 |
| #
#foot,#footer |
頁尾部分 |
| #
#nav |
主導航 |
| #
#subnav |
二級導航 |
| #
#menu |
選單 |
| #
#submenu |
子選單 |
| #
#sideBar |
側欄 |
| #
#sidebar_a,#sidebar_b |
左邊欄或右邊欄 |
| #
#main |
頁面主體 |
| #
#tag |
標籤 |
| #
#msg#message |
提示訊息 |
| #
#tips |
小技巧 |
| #
#vote |
投票 |
| #
#friendlink |
友情連結 |
| #
#title |
標題 |
| #
#summary |
摘要 |
| #
#loginbar |
登入列 |
| #
#searchInput |
搜尋輸入框 |
| #
#hot |
熱門熱點 |
| #
#search |
搜尋 |
| #
#search_output |
搜尋輸出和搜尋結果相似 |
| #
#searchBar |
搜尋條 |
| #
#search_results |
搜尋結果 |
| #
#copyright |
版權資訊 |
| #
#branding |
商標 |
| #
#logo |
網站LOGO標誌 |
| #
#siteinfo |
網站資訊 |
| #
#siteinfoLegal |
法律聲明 |
| #
#siteinfoCredits |
信譽 |
| #
#joinus |
加入我們 |
| #
#partner |
合作夥伴 |
| #
#service |
服務 |
| #
#regsiter |
註冊 |
| #
arr/arrow |
箭頭 |
| #
#guild |
指南 |
| #
#sitemap |
網站地圖 |
| #
#list |
列表 |
| #
#homepage |
首頁 |
| #
#subpage |
二級頁面子頁面 |
| #
#tool,#toolbar |
工具條 |
| #
#drop |
下拉 |
| #
#dorpmenu |
下拉式選單 |
| #
#status |
狀態 |
| #
#scroll |
滾動 |
| #
.tab |
標籤頁 |
| #
.left.right.center |
居左、中、右 |
| #
.news |
新聞 |
| #
.download |
下載 |
| #
.banner |
廣告條(頂部廣告條) |
| #
電子貿易相關 |
|
| #
.products |
產品 |
| #
.products_prices |
產品價格 |
| #
.products_description |
產品描述 |
| #
.products_review |
產品評論 |
| #
.editor_review |
編輯評論 |
| #
.news_release |
最新產品 |
| #
.publisher |
生產商 |
| #
.screenshot |
縮圖 |
| #
.faqs |
常見問題 |
| #
.keyword |
關鍵字 |
| #
.blog |
部落格 |
| #
.forum |
論壇 |
CSS檔命名 |
說明 |
| #
master.css,style.css |
主要的 |
| #
module.css |
模組 |
| #
base.css |
基本共用 |
| #
layout.css # |
佈局，版面 |
| #
themes.css # |
主題 |
| #
columns.css # |
專欄 |
| #
font.css |
文字、字體 |
| #
forms.css # |
表單 |
| #
mend.css # |
補丁 |
| #
print.css |
列印 |
以上是DIV+CSS規範命名集合的詳細內容。更多資訊請關注PHP中文網其他相關文章！