網(wǎng)頁規(guī)劃中常用的CSS命名規(guī)矩整理 |
發(fā)布時間:2020-05-18 文章來源:本站 瀏覽次數(shù):2584 |
許多站長制造網(wǎng)站模板的時候或許會呈現(xiàn)CSS分明不標準的問題,為了提高網(wǎng)站模板的CSS款式表的可讀性,引薦站長們了解下常用的CSS命名規(guī)矩。 頭:header 內(nèi)容:content/container 尾:footer 導航:nav 側欄:sidebar 欄目:column 頁面外圍操控整體布局寬度:wrapper 或 wrap 左右中:left right center 登錄條:loginbar 標志:logo 廣告:banner 頁面主體:main 熱門:hot 新聞:news 下載:download 子導航:subnav 菜單:menu 子菜單:submenu 搜索:search 友情鏈接:friendlink 頁腳:footer 版權:copyright 翻滾:scroll 內(nèi)容:content 標簽頁:tab 文章列表:list 提示信息:msg 小技巧:tips 欄方針題:title 參加:joinus 指南:guild 服務:service 注冊:regsiter 狀況:status 投票:vote 合作伙伴:partner 注釋的寫法: /* Footer */ 內(nèi)容區(qū) /* End Footer */ id的命名: 1.頁面結構 容器: container 頁頭:header 內(nèi)容:content/container 頁面主體:main 頁尾:footer 導航:nav 側欄:sidebar 欄目:column 頁面外圍操控整體布局寬度:wrapper 左右中:left right center 2. 導航 導航:nav 主導航:mainbav 子導航:subnav 頂導航:topnav 邊導航:sidebar 左導航:leftsidebar 右導航:rightsidebar 菜單:menu 子菜單:submenu 標題: title 摘要: summary 3. 功用 標志:logo 廣告:banner 登陸:login 登錄條:loginbar 注冊:regsiter 搜索:search 功用區(qū):shop 標題:title 參加:joinus 狀況:status 按鈕:btn 翻滾:scroll 標簽頁:tab 文章列表:list 提示信息:msg 當時的: current 小技巧:tips 圖標: icon 注釋:note 指南:guild 服務:service 熱門:hot 新聞:news 下載:download 投票:vote 合作伙伴:partner 友情鏈接:link 版權:copyright class的命名: 1.色彩:運用色彩的稱號或許16進制代碼,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } 2. 字體大小,直接運用"font+字體大小"作為稱號,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } 3. 對齊款式,運用對齊方針的英文稱號,如 .left { float:left; } .bottom { float:bottom; } 4. 標題欄款式,運用"類別+功用"的方法命名,如 .barnews { } .barproduct { } 注意事項: 1. 一律小寫; 2. 盡量用英文; 3. 不加中杠和下劃線; 4. 盡量不縮寫,除非一看就理解的單詞. 主要的 master.css 模塊 module.css 基本共用 base.css 布局,版面 layout.css 主題 themes.css 專欄 columns.css 文字 font.css 表單 forms.css 補丁 mend.css 打印 print.css |
|