ADJ網路實驗室
打印

[介紹] 常用的CSS命名規則

常用的CSS命名規則

(一)常用的寫法:  
         頭:header
     內容:content/container   
        尾: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

(二)注釋的寫法:   
        /* Footer */
  內容區
  /* End Footer */

(三)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   

(四)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





TOP


更多好康分享中~~

回復 1# 的帖子

   謝分享提供


TOP

ARTERY.cn