html頁面的CSS、DIV命名規則

12、          html頁面的CSS、DIV命名規則

名稱	命名	名稱	命名	名稱	命名	名稱	命名
頁頭	header	廣告條	banner	登陸條	loginbar	標誌	logo
側欄	sidebar	菜單	menu	子菜單	subMenu	下拉菜單	dropMenu
導航	nav	工具條	toolbar	表單	form	欄目	column
子導航	subNav	箭頭	arrow	搜索	search	搜索按鈕	btn-search
滾動條	scroll	內容	content	標籤頁	tab	文章列表	list
提示信息	msg	小技巧	tips	欄目標題	title	連接	links
頁腳	footer	服務	service	熱點	hot	新聞	news
下載	download	註冊	regsiter	狀態	status	按鈕	btn
投票	vote	合做夥伴	partner	版權	copyright	網站地圖	sitemap
最外層	wrap	主體內容（中部）	main	左側佈局	main-left	右側佈局	main-right
中部主體	content	底部	footer
css、js文件命名：
名稱	命名	名稱	命名	名稱	命名	名稱	命名
主要的	master.css/main.css	佈局，版面	layout.css	專欄	columns.css	文字	font.css
打印樣式	print.css	主題	themes.css	模塊	module.css	基本共用	base.css
表單	forms.css	補丁	mend.css
ID命名：
名稱	命名	名稱	命名	名稱	命名	名稱	命名
頁面外圍控制總體佈局寬度	#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	搜索條	#searchBar
搜索輸出和搜索結果類似	#search_output	搜索結果	#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_description	編輯評論	.editor_review	生產商	.publisher
產品價格	.products_prices	產品評論	.products_review	最新產品	.news_release	縮略圖	.screenshot
常見問題	.faqs	關鍵詞	.keyword	博客	.blog	論壇	.forum

 

http://www.cnblogs.com/rising-fay/archive/2013/02/25/2932592.html

 

 

67.    CSS命名規則

　　頭：header

　　內容：content/containe

　　尾：footer

　　導航：nav

　　側欄：sidebar

　　欄目：column

　　頁面外圍控制總體佈局寬度：wrapper

　　左右中：left right center

　　登陸條：loginbar

　　標誌：logo

　　廣告：banner

　　頁面主體：main

　　熱點：hot

　　新聞：news

　　下載：download

　　子導航：subnav

　　菜單：menu

　　子菜單：submenu

　　搜索：search

　　友情連接：friendlink

　　頁腳：footer

　　版權：copyright

　　滾動：scroll

==========

68.    XHTML文件中id的命名

(1)頁面結構

　　容器: container

　　頁頭：header

　　內容：content/container

　　頁面主體：main

　　頁尾：footer

　　導航：nav

　　側欄：sidebar

　　欄目：column

　　頁面外圍控制總體佈局寬度：wrapper

　　左右中：left right center

(2)導航

　　導航：nav

　　主導航：mainbav

　　子導航：subnav

　　頂導航：topnav

　　邊導航：sidebar

　　左導航：leftsidebar

　　右導航：rightsidebar

　　菜單：menu

　　子菜單：submenu

　　標題: title

　　摘要: summary

(3)功能

　　標誌：logo

　　廣告：banner

　　登錄：login

　　登陸條：loginbar

　　註冊：regsiter

　　搜索：search

　　功能區：shop

　　標題：title

　　加入：joinus

　　狀態：status

　　按鈕：btn

　　滾動：scroll

　　標籤頁：tab

　　文章列表：list

　　提示信息：msg

　　當前的: current

　　小技巧：tips

　　圖標: icon

　　註釋：note

　　指南：guild

　　服務：service

　　熱點：hot

　　新聞：news

　　下載：download

　　投票：vote

　　合做夥伴：partner

　　友情連接：link

　　版權：copyright

======

69.    CSS+DIV的命名規則：

　　登陸條: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，

　　內容：content

　　標籤頁：tab

　　文章列表：list

　　提示信息：msg

　　小技巧：tips

　　欄目標題：title

　　加入：joinus

　　指南：guild

　　服務：service

　　註冊：regsiter

　　狀態：status

　　投票：vote

　　合做夥伴：partner