收集於網路的Web Standard正常化CSS+XHTML命名參考

來源:互聯網
上載者:User
CSS命名規則

  頭:header 
  內容:content/containe 
  尾:footer 
  導航:nav 
  側欄:sidebar 
  欄目:column 
  頁面外圍控制整體布局寬度:wrapper 
  左右中:left right center 
  登入條:loginbar 
  標誌:logo 
  廣告:banner 
  頁面主體:main 
  熱點:hot 
  新聞:news 
  下載:download 
  子導航:subnav 
  菜單:menu 
  子功能表:submenu 
  搜尋:search 
  友情連結:friendlink 
  頁尾:footer 
  著作權:copyright 
  滾動:scroll 
  內容:content 
  標籤頁:tab 
  文章列表:list 
  提示資訊:msg 
  小技巧:tips 
  欄目標題:title 
  加入:joinus 
  指南:guild 
  服務:service 
  註冊:regsiter 
  狀態:status 
  投票:vote 
  夥伴:partner

 
XHTML檔案中id的命名

(1)頁面結構
  容器: container 
  頁頭:header 
  內容: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 
  功能區:shop 
  標題:title 
  加入:joinus 
  狀態:status 
  按鈕:btn 
  滾動:scroll 
  標籤頁:tab 
  文章列表:list 
  提示資訊:msg 
  當前的: current 
  小技巧:tips 
  表徵圖: icon 
  注釋:note 
  指南:guild 
  服務:service 
  熱點:hot 
  新聞:news 
  下載:download 
  投票:vote 
  夥伴:partner 
  友情連結:link 
  著作權:copyright

 
XHTML檔案中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 

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。