css命名規則:圖片切圖轉網頁的代碼規范


id的命名:

  (1)頁面結構

  容器: container 頁頭:header 內容:content/container

  頁面主體:main 頁尾:footer 導航:nav

  側欄:sidebar 欄目:column 左右中:left right center

  頁面外圍控制整體布局寬度:wrapper

  (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.不使用大寫形式的類名和id名;

  2.盡可能使用描述性的英文單詞的組合作為類名和id名;

  3.id名及類名的多個英文單詞之間使用“_”短橫線分隔;

  4.按區域進行描述編號 例:main01_div01_ul01 (可以理解為主體第一區域 第一DIV下的第一個UL)

  附:一些CSS框架的命名參考

  主要的 master.css 模塊 module.css 基本共用 base.css

  主題 themes.css 專欄 columns.css 打印 print.css

  文字 font.css 表單 forms.css 補丁 mend.css

  布局,版面 layout.css


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com