CSS樣式命名規則及參考命名標准

(一)常用的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設計
 
web標准化設計:常用的CSS命名規則
  常用的CSS命名規則  頭:header  內容:content/container  尾:footer  導航:nav  側欄:sidebar  欄目:column  頁面外圍控制整體布局寬度:wrapper  左右中:left right center  登錄條:...查看完整版>>web標准化設計:常用的CSS命名規則
 
網頁切圖、css命名規則
頭:header內容:content/container尾:footer導航:nav側欄:sidebar欄目:column頁面外圍控制整體布局寬度:wrapper左右中:left right center登錄條:loginbar標志:logo廣告:banner頁面主體:main熱點:hot新聞...查看完整版>>網頁切圖、css命名規則
 
按整潔易懂的結構組織CSS樣式-css設計
關于如何組織和注釋CSS文件,有很多方法,但是哪一種方法最好,卻沒有答案,這要靠你自己在工作中慢慢的去思考了.如果你有更好的方法請告訴大家讓大家一起分享.....當我們的樣式表變得很大和很複雜時,按整潔易懂的結構組...查看完整版>>按整潔易懂的結構組織CSS樣式-css設計
 
XHTML+CSS建站如何調用樣式表-css設計
WEB標准設計網站,方法主要是采用XHTML+CSS,CSS樣式表是必不可少的。要制作符合web標准的網站,不懂CSS是設計不出漂亮的頁面的。事實上,所有表現的地方都需要用CSS來實現。我們以前都習慣用table來定位和布局,現在...查看完整版>>XHTML+CSS建站如何調用樣式表-css設計
 
讓CSS樣式表優化更整潔而簡短-css設計
  CSS簡寫就是指將多行的CSS屬性聲明化成一行,又稱爲CSS代碼優化。CSS簡寫的最大好處就是能夠顯著減少CSS文件的大小,其實還有很多其他益處。臃腫而雜亂的CSS樣式表會使你遇到問題是難以調試。尤其是當一個團隊在...查看完整版>>讓CSS樣式表優化更整潔而簡短-css設計
 
13種常用按鈕、文本框、表單等CSS樣式
  雖然CSS樣式的學習需要我們動手多實踐,需要多做案例,思致思考,但有時候注意資料的收集與整理也是非常重要的,在實際開發中往往會起到事半功倍的效果。一、按鈕樣式 Example Source Code.buttoncss { font-...查看完整版>>13種常用按鈕、文本框、表單等CSS樣式
 
標記語言:爲指定css樣式
標記語言:爲指定css樣式
把內容與顯示效果分開設定的好處之一就是靈活,通過用CSS控制網站的版面布局(在第十二章用過的方法),就能控制整個網站的設計要素,改變幾條規則,就能立刻戲劇性的更新上千個頁面. 用CSS控制布局的的便利性示範之一,就是...查看完整版>>標記語言:爲指定css樣式
 
在CSS樣式表裏使用JavaScript
CSS樣式裏使用JavaScript(onmouseover/onmouseout)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> CSS樣式裏使用JavaScript(onmouseover/onmouseout)...查看完整版>>在CSS樣式表裏使用JavaScript
 
 
回到王朝網路移動版首頁