網頁製作技巧：關於CSS樣式命名問題

css|技巧|網頁|問題 商　標：　　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

<!--START: Header -->
<!--END: Header -->
<!--START: Content -->
<!--START: Main Navigation -->
<!--END: Main Navigation -->
<!--START: Search -->
<!--END: Search -->
<!--START: Submenu Navigation -->
<!--END: Submenu Navigation -->
<!--START: Left Column -->
<!--END: Left Column -->
<!--START: Left Column -->
<!--END: Right Column -->
<!--END: Content -->
<!-- START: Crazyegg code -->
<!-- END: Crazyegg code -->
<!--END: Body -->
<!-- 1159340743 -->

CSS

/********************** Site General Tag *************************/
/********************** Navigation Tag *************************/
/********************** Right Content Tag *************************/
/********************** Left Content Tag *************************/
/********************** Comments Tag *************************/
/********************** Header Tag *************************/
/********************** Form Tag *************************/
/********************** MOS Tag *************************/
/********************** Sub Navigation Tag *************************/
/************************ Resources Tag ***************************/
/********************** Sitemap Tag **********************/
/********************** Footer Tag *************************/

執行個體三（網易）

CSS
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#NewsCenter
.keyword
#MallArea
#city
#aboutus


HTML

<!-- 通欄1 Start -->
<!-- 通欄1 End --><!-- 第1屏 Start-->
<!-- 最新訊息 Start -->
<!-- 最新訊息 End --><!--產品導航 Start -->
<!-- 產品導航 End--><!-- 搜尋 Start -->
<!-- 搜尋 End --><!-- 第1屏小Logo Start-->
<!-- 第1屏小Logo End--><!-- 無線推薦 Start -->
<!-- 鈴聲搜尋 -->
<!-- 鈴聲搜尋 End --><!-- 精彩推薦 --><!-- 左邊內容 -->
<!-- 右邊內容 -->
<!-- 精彩推薦 END-->
<!-- 無線推薦 End -->
略……………………