個人博客點這里
最重要的部分先說(命名書寫格式)
常見的格式有:連接符(search-btn)、下劃線、全小(searchbox)、小駝峰(searchBox)。
現在用得多廣泛的還是第一種使用連接符,易讀、書寫方便。
在這里小編推薦大家id使用下劃線_
來進行連接,class用中劃線-
來進行連接
網頁公共命名:
- #wrapper - - 頁面外圍控制整體布局寬度
- #container或#content - - 容器,用于最外層
- #layout - - 布局
- #head,#header - - 頁頭部分
- #foot,#footer - - 頁腳部分
- #nav - - 主導航
- #subnav - - 二級導航
- #menu - - 菜單
- #submenu - - 子菜單
- #sidebar - - 側欄
- #sidebar_a,#sidebar_b - - 左邊欄或右邊欄
- #main - - 頁面主體
- #tag - - 標簽
- #msg,#message - - 提示信息
- #tips - - 小技巧
- #vote - - 投票
- #friendlink - - 友情鏈接
- #title - - 標題
- #summary - - 摘要
- #loginbar - - 登錄條
- #searchInput - - 搜索輸入框
- #hot - - 熱門熱點
- #search - - 搜索
- #search_output - - 搜索輸出和搜索結果相似
- #searchBar - - 搜索條
- #search_results - - 搜索結果
- #copyright - - 版權信息
- #branding - - 商標
- #logo - - 網站LOGO標志
- #siteinfo - - 網站信息
- #siteinfoLegal - - 法律聲名
- #siteinfoCredits - - 信譽
- #joinus - - 加入我們
- #partner - - 合作伙伴
- #service - - 服務
- #regsiter - - 注冊
- arr/arrow - - 箭頭
- #guild - - 指南
- #sitemap - - 網站地圖
- #list - - 列表
- #homeepage - - 首頁
- #subpage - - 二級頁面子頁面
- #tool,#toolbar - - 工具條
- #drop - - 下拉
- #dorpmenu - - 下拉菜單
- #status - - 狀態
- #scroll - - 滾動
- .tab - - 標簽頁
- .left,.right,.center - - 居中、左、右
- .news - - 新聞
- .download - - 下載
- .banner - - 廣告條(頂部廣告條)
電子貿易相關:
- .products - - 產品
- .products_prices - - 產品價格
- .products_description - - 產品描述
- .products_review - - 產品評論
- .editor_review - - 編輯評論
- .news_release - - 最新產品
- .publisher - - 生產商
- .screenshot - - 縮略圖
- .faqs - - 常見問題
- .keyword - - 關鍵詞
- .blog - - 博客
- .forum - - 論壇
基礎的命名:
- 外套 wrap - - 用于最外層
- 頭部 header - - 用于頭部
- 主要內容 main - - 用于主體內容(中部)
- 左側 main-left - - 左側布局
- 右側 main-right - - 右側布局
- 導航條 nav - - 網頁菜單導航條
- 內容 content - - 用于網頁中部主體
- 底部 footer - - 用于底部
CSS文件命名:
- master.css,style.css - - 主要的
- module.css - - 模塊
- base.css - - 基本共用
- layout.css - - 布局,版面
- themes.css - - 主題
- columns.css - - 專欄
- font.css - - 文字、字體
- forms.css - - 表單
- mend.css - - 補丁
- print.css - - 打印
原文鏈接