2008年10月4日 星期六

語法常用命名

頭: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

沒有留言: