網頁切圖過程中div+css命名規則

網頁切圖過程中div+css命名規則<br />　　內容：content/container 導航：nav 側欄：sidebar 　 　<br />　　欄目：column 標誌：logo 頁面主體：main 　　<br />　　廣告：banner 熱點：hot 新聞：news<br />　　下載：download 子導航：subnav 菜單：menu<br />　　搜尋：search 頁尾：footer 滾動：scroll<br />　　著作權：copyright 友情連結：friendlink 子功能表：submenu<br />　　內容：content 標籤頁：tab 文章列表：list<br />　　註冊：regsiter 提示資訊：msg 小技巧：tips<br />　　加入：joinus 欄目標題：title 指南：guild<br />　　服務：service 狀態：status 投票：vote<br />　　 尾：footer 夥伴：partner 登入條：loginbar<br />　　頁面外圍控制整體布局寬度：wrapper 左右中：left right center 　　<br />　　<br />　　(二)注釋的寫法:<br />　　/* Footer */<br />　　內容區<br />　　/* End Footer */<br />　　<br />　　(三)id的命名:<br />　　<br />　　(1)頁面結構<br />　　容器: container 頁頭：header 內容：content/container<br />　　頁面主體：main 頁尾：footer 導航：nav<br />　　側欄：sidebar 欄目：column 左右中：left right center<br />　　頁面外圍控制整體布局寬度：wrapper<br />　　(2)導航<br />　　導航：nav<br />　　主導航：mainbav<br />　　子導航：subnav<br />　　頂導航：topnav<br />　　邊導航：sidebar<br />　　左導航：leftsidebar<br />　　右導航：rightsidebar<br />　　菜單：menu 子功能表：submenu 標題: title 摘要: summary<br />　　<br />　　(3)功能<br />　　標誌：logo<br />　　廣告：banner<br />　　登陸：login<br />　　登入條：loginbar<br />　　註冊：regsiter<br />　　搜尋：search<br />　　功能區：shop<br />　　標題：title<br />　　加入：joinus<br />　　狀態：status<br />　　按鈕：btn<br />　　滾動：scroll<br />　　標籤頁：tab<br />　　文章列表：list<br />　　提示資訊：msg<br />　　當前的: current<br />　　小技巧：tips<br />　　表徵圖: icon<br />　　注釋：note<br />　　指南：guild<br />　　服務：service<br />　　熱點：hot<br />　　新聞：news<br />　　下載：download<br />　　投票：vote<br />　　夥伴：partner<br />　　友情連結：link<br />　　著作權：copyright<br />　　<br />　　(四)class的命名:<br />　　(1)顏色:使用顏色的名稱或者16進位代碼,如<br />　　.red { color: red; }<br />　　.f60 { color: #f60; }<br />　　.ff8600 { color: #ff8600; }<br />　　(2)字型大小,直接使用"font+字型大小"作為名稱,如<br />　　.font12px { font-size: 12px; }<br />　　.font9pt {font-size: 9pt; }<br />　　(3)對齊樣式,使用對齊目標的英文名稱,如<br />　　.left { float:left; }<br />　　.bottom { float:bottom; }<br />　　(4)標題列樣式,使用"類別+功能"的方式命名,如<br />　　.barnews { }<br />　　.barproduct { }<br />　　<br />　　注意事項:<br />　　1.一律小寫;<br />　　2.盡量用英文;<br />　　3.不加中杠和底線;<br />　　4.盡量不縮寫，除非一看就明白的單詞.<br />　　主要的 master.css 模組 module.css 基本共用 base.css<br />　　主題 themes.css 專欄 columns.css 列印 print.css<br />　　文字 font.css 表單 forms.css 補丁 mend.css<br />　　布局，版面 layout.css<br />