WEB標準頁面CSS命名參考

來源:互聯網
上載者:User
web標準頁面及css的命名參考


HTML布局命名

頁頭:header

登入條:loginBar

標誌:logo

側欄:sideBar

廣告:banner

導航:nav

子導航:subNav

菜單:menu

子功能表:subMenu

搜尋:search

滾動:scroll

頁面主體:main

內容:content

標籤頁:tab

文章列表:list

提示資訊:msg

小技巧:tips

欄目標題:title

友情連結:friendLink

頁尾:footer

加入:joinus

指南:guild

服務:service

熱點:hot

新聞:news

下載:download

註冊:regsiter

狀態:status

按鈕:btn

投票:vote

夥伴:partner

著作權:copyRight

 

 

CSS ID及CLASS的命名

外套:wrap

主導航:mainNav

子導航:subnav

頁尾:footer

整個頁面:content

頁首:header

頁尾:footer

商標:label

標題:title

主導航:mainNav(globalNav)

頂導航:topnav

邊導航:sidebar

左導航:leftsideBar

右導航:rightsideBar

旗志:logo

標語:banner

菜單內容1:menu1Content

菜單容量:menuContainer

子功能表:submenu

邊互動中心圖示:sidebarIcon

注釋:note

麵包屑:breadCrumb(即頁面所處位置導航提示)

容器:container

內容:content

搜尋:search

登陸:login

功能區:shop(如購物車,收銀台)

當前的current

 

 

樣式檔案命名

主要的:master.css

布局版面:layout.css

專欄:columns.css

文字:font.css

列印樣式:print.css

主題:themes.css

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.