命名規則:
登錄條: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
1.CSSID的命名
外套: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
2.樣式文件命名
主要的:master.css
佈局版面:layout.css
專欄:columns.css
文字:font.css
打印樣式:print.css
主題:themes.css
說明:均爲class,需要擴展,則在當前命名內以“_“(下劃線)後綴自定名稱。
我習慣稱列表頁爲list,新聞列表則爲newslist,圖片列表爲piclist,
內容頁爲view,
/**/
整體大框架:#wrapper
大框架內:#inwrapper
/////////////////////////////////////////////////////////////////////////////////////////////////////////
頂部及banner:.top
頂部及banner內:.intop
Logo:.logo
Banner:.banner
導航:.menu
導航內:.inmenu
.Menuul
.Menuul li
.Menuul li a
下拉菜單:.inmenu_xiala
.Inmenu_xialaul
.Inmenu_xialaul li
.Inmenu_xialaul li a
///////////////////////////////////////////////////////////////////////////////////////////////////////////
主體內容:.mainWrapper
主體內容內:.inmainwrapper
左側攔:.sideleft
左側內:.insideleft
右側欄:.sideright
右側內:.insideright
中間:.sidecenter
中間內:.insidecenter
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
底部:.foot
底部內:.infoot
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*其他命名*/
搜索:.search
搜索內:.insearch
搜索條:.searchselect
搜索按鈕:.serachbuttom
輸入文本框:.input
.select
/*表格樣式*/
表格整體框架:.listbox
表格的寬度:.listbox-table
表格頭部文字樣式:.listbox-header
表格正文文字樣式:.listbox-entry
/*通用型*/
通用:.GM/*這個有點鬱悶,英文太差...*/
通用內:.INGM
通用左浮動:.GMfl(GM FLOAT LEFT)
通用右浮動:.GMfr(GM FLOAT RIGHT)
/*通用圖片樣式*/
通用圖片樣式:.img
/*清除浮動*/
清除所有浮動:.clear
清除左側浮動:.clearleft
清除右側浮動:.clearright
/*文字樣式*/
文字:.font
/*新聞列表*/
新聞列表:.fontnews
/*View頁字體總樣式*/
VIEW頁字體:.fontview
商 標: label
標 題: title
主導航: mainbav(globalnav)
頂導航: topnav
邊導航: sidebar
左導航: leftsidebar
右導航: rightsidebar
旗 志: logo
標 語: banner
菜單內容1: menu1 content
菜單容量: menu container
子菜單: submenu
邊導航圖標:sidebarIcon
註釋: note
麪包屑: breadcrumb(即頁面所處位置導航提示)
容器: container
內容: content
搜索: search
登陸: Login
功能區: shop(如購物車,收銀臺)
當前的 current
報頭: masthead
摘要, 概要 summary或general
左邊的浮動照圖片 photoleft
右邊的浮動圖片 photoright
標題 title
條目底端 entrybottom
更多 extended或.more
容器背景 containerbg
服務 service
服務鏈接 servicelink
線 line
文本 text
右邊 rightside
版權 copyright
新聞 news
書皮 wrapper
介紹 intro-part1
專欄 column
路徑 pathways
片斷 section
模塊 module
上導航 subnav
2.另外在編輯樣式表時可用的註釋可這樣寫:
<-- Footer -->
內容區
<-- End Footer -->
3.樣式文件命名
主要的 master.css
佈局,版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css
主題 themes.css
4.樣式表中的注示
實例一
/* GLOBAL --------------------------- */
/* LINKS --------------------------- */
/* FORMS --------------------------- */
/* IDS --------------------------- */
/* HEADER --------------------------- */
/* COLUMN 1 --------------------------- */
/* COLUMN 2 --------------------------- */
/* CLASSES --------------------------- */
實例二
HTML
實例三(網易)
CSS
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#NewsCenter
.keyword
#MallArea
#city
#aboutus
……………………
常見命名
包含 wrapper和container
頁頭 header 或縮寫爲hd
頁尾 footer 或縮寫爲ft
導航 nav
您的位置 breadcrumbs
二級導航 sub_nav
側欄 sidebar或side-column
模塊 module