我們開發CSS+DIV網頁(Xhtml)時候,比較困惑和糾結的事就是CSS命名,特別是新手不知道什麼地方該如何命名,怎樣命名才是好的`方法。下面yjbys小編為大家分享DIV+CSS命名規範及參考值~
命名規則說明:
1)、所有的命名最好都小寫
2)、屬性的值一定要用雙引號("")括起來,且一定要有值如class="divcss5",id="divcss5"
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-----------------用於底部
DIV+CSS命名參考表:
以下為CSS樣式命名與CSS檔案命名參考表,DIV 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 | 滾動 |
標籤頁 | |
er | 居左、中、右 |
新聞 | |
load | 下載 |
er | 廣告條(頂部廣告條) |
電子貿易相關 | |
ucts | 產品 |
ucts_prices | 產品價格 |
ucts_description | 產品描述 |
ucts_review | 產品評論 |
or_review | 編輯評論 |
_release | 最新產品 |
isher | 生產商 |
enshot | 縮圖 |
常見問題 | |
ord | |
部落格 | |
m | 論壇 |
CSS檔案命名 | 說明 |
, | 主要的 |
模組 | |
基本共用 | |
佈局,版面 | |
主題 | |
專欄 | |
文字、字型 | |
表單 | |
補丁 | |
列印 |