網頁切圖、css命名規則

頭:header

內容:content/container

尾:footer

導航:nav

側欄:sidebar

欄目:column

頁面外圍控制整體布局寬度:wrapper

左右中:left right center

登錄條:loginbar

標志:logo

廣告:banner

頁面主體:main

熱點:hot

新聞:news

下載:download

子導航:subnav

菜單:menu

子菜單:submenu

搜索:search

友情鏈接:friendlink

頁腳:footer

版權:copyright

滾動:scroll

內容:content

標簽頁:tab

文章列表:list

提示信息:msg

小技巧:tips

欄目標題:title

加入:joinus

指南:guild

服務:service

注冊:regsiter

狀態:status

投票:vote

合作夥伴:partner

(二)注釋的寫法:

/* Footer */

內容區

/* End Footer */

(三)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

(四)class的命名:

(1)顔色:使用顔色的名稱或者16進制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用"font+字體大小"作爲名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)標題欄樣式,使用"類別+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事項:

1.一律小寫;

2.盡量用英文;

3.不加中杠和下劃線;

4.盡量不縮寫,除非一看就明白的單詞.

主要的 master.css

模塊 module.css

基本共用 base.css

布局,版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

打印 print.css

 
編寫CSS代碼時樣式命名的通用規則-css設計
  命名一直是個讓我頭痛的問題,特別是那些看上去差不多的模塊,所以就得想辦法啦,我總結了下面的方法,雖然還在試驗中。希望對大家有幫助。歡迎大家提出改進的意見。具體如下:  要注意的內容:  一,命名所...查看完整版>>編寫CSS代碼時樣式命名的通用規則-css設計
 
Dreamweaver CS3網頁制作之CSS布局規則
  CSS文件的鏈接方式   ·附加鏈接:外部CSS文件   ·導入CSS:常用應用多個CSS文件時,將多個CSS導入一個CSS文件中   CSS規則定義有三種:   1)類比如“.RedText”、“.BlueText”和“.BigText”等等   ...查看完整版>>Dreamweaver CS3網頁制作之CSS布局規則
 
基礎教程:CSS選擇器規範化命名-css設計
規範的命名也是Web標准中的重要一項,標准的命名可以更好的看懂代碼,我想大家應該都有這種經曆,某日翻出自己過去寫的代碼居然看不懂了,呵呵,爲了避免這種情況我們就要規範化命名,再說了,現在一個項目不是一個人...查看完整版>>基礎教程:CSS選擇器規範化命名-css設計
 
設計技巧:CSS選擇符命名的原則-css設計
  坦率的說,我寫CSS時,有至少1/4的時間是在糾結選擇符該如何命名。隨意的命名,會讓你陷入尴尬。  舉個例子,我們需要在一段文字裏將某些詞標紅。所以爲此建了一個.red { color: red; }。結果産品經理覺得,紅...查看完整版>>設計技巧:CSS選擇符命名的原則-css設計
 
常用CSS命名參考資料
  在XHTML中定義ID時都用得上,主要是方便CSS定義樣式時能一眼看穿。所以,CSS命名僅作參考。  (1)頁面結構類  容器: container  頁頭:header  內容:content/container  頁面主體:main  頁尾:foot...查看完整版>>常用CSS命名參考資料