程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 更多關於編程 >> DIV+CSS命名規范全記錄

DIV+CSS命名規范全記錄

編輯:更多關於編程

      我們開發CSS+DIV網頁(Xhtml)時候,比較困惑和糾結的事就是CSS命名,特別是新手不知道什麼地方該如何命名,怎樣命名才是好的方法。

      命名規則說明:

      1)、所有的命名最好都小寫

      2)、屬性的值一定要用雙引號("")括起來,且一定要有值如class="divcss5",id="divcss5"

      3)、每個標簽都要有開始和結束,且要有正確的層次,排版有規律工整

      4)、空元素要有結束的tag或於開始的tag後加上"/"

      5)、表現與結構完全分離,代碼中不涉及任何的表現元素,如style、font、bgColor、border等

      6)、定義,應遵循從大到小的原則,體現文檔的結構,並有利於搜索引擎的查詢。

      7)、給每一個表格和表單加上一個唯一的、結構標記id

      8)、給圖片加上alt標簽

      9)、盡量使用英文命名原則

      10)、盡量不縮寫,除非一看就明白的單詞

      相對網頁外層重要部分CSS樣式命名:

      外套wrap------------------用於最外層頭部header----------------用於頭部主要內容main------------用於主體內容(中部)左側main-left-------------左側布局右側main-right-----------右側布局導航條nav-----------------網頁菜單導航條內容content---------------用於網頁中部主體底部footer-----------------用於底部

      DIV+CSS命名參考表:

      以下為CSS樣式命名與CSS文件命名參考表,DIV CSS命名集合:

    CSS樣式命名

    說明

    網頁公共命名

    #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

    列表

    #homepage

    首頁

    #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

    論壇

    CSS文件命名

    說明

    master.css,style.css

    主要的

    module.css

    模塊

    base.css

    基本共用

    layout.css

    布局,版面

    themes.css

    主題

    columns.css

    專欄

    font.css

    文字、字體

    forms.css

    表單

    mend.css

    補丁

    print.css

    打印

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved