DIV+CSS 命名規範

來源:互聯網
上載者:User

1.CSS ID 的命名
外 套:  wrap
主導航:  mainnav
子導航:  subnav
頁 腳:  footet
整個頁面: content
頁 眉:  header
頁 腳:  footer
商 標:  label
標 題:  title
主導航:  mainbav(globalnav)
頂導航:  topnav
邊導航:  sidebar
左導航:  leftsidebar
右導航:  rightsidebar
旗 志:  logo
標 語:  banner
菜單內容1: menu1 content
菜單容量: menu container
子功能表:  submenu
邊互動中心圖示:sidebarIcon
注釋:   note
麵包屑:  breadcrumb(即頁面所處位置導航提示)
容器:   container
內容:   content
搜尋:   search
登陸:   Login
功能區:  shop(如購物車,收銀台)
當前的   current

2.另外在編輯樣式表時可用的注釋可這樣寫:
<-- Footer -->
內容區
<-- End Footer -->

3.樣式檔案命名
主要的 master.css
布局,版面 layout.css
專欄 columns.css
文字 font.css
列印樣式 print.css
主題 themes.css

注:來源於“煙兒圈教程網”
css命名:
頁頭:header
登入條:loginbar
標誌:logo
側欄:sidebar
廣告:banner
導航:nav
子導航:subnav
菜單:menu
子功能表:submenu
搜尋:search
滾動:scroll
頁面主體:main
內容:content
標籤頁:tab
文章列表:list
提示資訊:msg
小技巧:tips
欄目標題:title
加入:joinus
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
註冊:regsiter
狀態:status
按鈕:btn
投票:vote
夥伴:partner
友情連結:friendlink
頁尾:footer
著作權:copyright

3.樣式檔案命名
基本的 base.css
主要的 master.css
布局,版面 layout.css
局部 part.css
專欄 columns.css
文字 font.css
列印樣式 print.css
主題 themes.css

4.縮寫命名
左浮 fl = float:left;
右浮 fr = float:right;
清楚浮動 clear = clear:both;

靠左對齊 tl = text-align:left;
靠右對齊 tri = text-align:right;
置中   tc = text-align:center;

寬度  w1(width) = 1px……..w1000 = 1000px
高度  h1(height) = 1px……..h1000 = 1000px

清楚邊框  bd_n = border:none!important;

加粗     fw_b = font-weight:bold;
清楚加粗 fw_n = font-weight:normal;

隱藏塊   dp_n = disipay:none;
顯示塊   dp_b = disipay:block;
清楚背景色 bg_n = background:none;

外邊距(上右下左) m_05 = margin:5px;
外邊距(上下左右) m_0510 = margin:5px 10px;
外邊距(上左右下) m_051007 = margin:5px 10px 7px;
外邊距(上)       mt_10 = margin-top:10px;
外邊距(右)       mr_10 = margin-right:10px;
外邊距(下)       mb_10 = margin-bottom:10px;
外邊距(左)       ml_10 = margin-left:10px;

內邊距(上右下左) p_05 = padding:5px;
內邊距(上下左右) p_0510 = padding:5px 10px;
內邊距(上左右下) p_051007 = padding:5px 10px 7px;
內邊距(上)       pt_10 = padding-top:10px;
內邊距(右)       pr_10 = padding-right:10px;
內邊距(下)       pb_10 = padding-bottom:10px;
內邊距(左)       pl_10 = padding-left:10px;

如:<div class="fl h100">www.hemin.cn</div>//適合做大型網站重複調用樣式

5.顏色命名
黑色 black = #000
白色 white = #FFF
灰色 gray  = #999   #666   #333

紅色 gules = #F00
黃色 yellow= #FF0
藍色 blue  = #00F
綠色 green = #0F0
青色 cyan  = #0FF
紫色 purple= #F0F

縮寫 #F0F = #FF00FF
如:<div><a href="#">hm</a><a class="gules" href="#">hemin</a></div> 皆可

 

http://xiaozmn.javaeye.com/category/31298?show_full=true

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.