這是去年在中軟時做的一個UI模板規(guī)范，有很多我的經(jīng)驗(yàn)，在做B/S版應(yīng)用程序時比較適用，其實(shí)這樣的東西算不上什么正規(guī)的規(guī)范，只是為了適應(yīng)我們現(xiàn)在面對的開發(fā)環(huán)境和組織流程做的一些權(quán)宜的努力，和解決了一些與程序溝通和接口的問題，盡量避免誤會和摩擦。
--------------------------------------------------------------------------------
一 適用環(huán)境和對象
二 必要性
三 技術(shù)原則
四 代碼編寫規(guī)范
五 頁面模版使用規(guī)范
--------------------------------------------------------------------------------
一 適用環(huán)境和對象
本規(guī)范適用基于瀏覽器的B/S（）版軟件項(xiàng)目開發(fā)工作。開發(fā)流程中的模版頁面編寫和模版文件套用工作必須遵照此規(guī)范執(zhí)行。適用對象為開發(fā)編碼人員、UI設(shè)計人員、模版編寫人員、界面測試人員等。
基于客戶端的C/S版軟件開發(fā)工作不適用本技術(shù)規(guī)范。
二 必要性
本規(guī)范旨在制訂開發(fā)編碼人員和UI模版編寫人員之間在工作交叉部分的技術(shù)標(biāo)準(zhǔn)，使他們遵循同一操作規(guī)范，利于交叉工作的平緩順利交接。以標(biāo)準(zhǔn)化方式，
提高溝通和技術(shù)協(xié)作的水平，提高工作效率。減少和改變責(zé)任不明，任務(wù)不清，和由此產(chǎn)生的信息溝通不暢、反復(fù)修改、重復(fù)勞動、效率低下的現(xiàn)象。
三 技術(shù)原則
代碼規(guī)范化書寫
代碼規(guī)范化書寫實(shí)現(xiàn)了腳本整體風(fēng)格的一致，保證了同一個人不同時期寫的腳本風(fēng)格保持一致，以及同一個工作組中不同的開發(fā)人員編寫的腳本風(fēng)格保持一致。因?yàn)殚_發(fā)不可能在孤立中進(jìn)行，所以代碼規(guī)范化書寫是項(xiàng)目組人員合作溝通的前提。
數(shù)據(jù)層、結(jié)構(gòu)層、表現(xiàn)層分離
數(shù)據(jù)內(nèi)容就是頁面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等。這里強(qiáng)調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身。把信息內(nèi)容以一種合適的方式格式化，簡
言之就是頁面排版，例如：分成標(biāo)題、作者、章、節(jié)、段落和列表等，使內(nèi)容更加具有邏輯性，條理清晰易讀易懂，叫做“結(jié)構(gòu)(Structure)”
雖然定義了結(jié)構(gòu)，但是內(nèi)容還是相同的樣式?jīng)]有改變，例如標(biāo)題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。所有這些用來改變內(nèi)容外觀的東西，
稱之為“表現(xiàn)(Presentation)” “表現(xiàn)”的作用使內(nèi)容看上去漂亮、賞心悅目、打動人心！
所有HTML和XHTML頁面就是由“結(jié)構(gòu)、表現(xiàn)和行為”這三方面組成的。抽象一點(diǎn)理解，內(nèi)容是基礎(chǔ)層，然后是附加上去結(jié)構(gòu)層和表現(xiàn)層，人對頁面內(nèi)容的交互及操作效果叫做“行為（Behavior）”,示意草圖如下：
對于數(shù)據(jù)、結(jié)構(gòu)與表現(xiàn)相分離，最早是在軟件開發(fā)架構(gòu)理論中提出來的。UI設(shè)計師設(shè)計出頁面模版，程序員負(fù)責(zé)內(nèi)容數(shù)據(jù)的嵌入，數(shù)據(jù)可能是從數(shù)據(jù)庫中提取出
來，也可能是靜態(tài)寫入的提示性文字，最后形成一個新的頁面展示給軟件操作者。模版文件的結(jié)構(gòu)利用HTML＋XHTML標(biāo)簽來定義，而所有涉及表現(xiàn)的東西通
通剝離出來，把它放到一個單獨(dú)的文件里，這個單獨(dú)的文件就是CSS。
數(shù)據(jù)、結(jié)構(gòu)與表現(xiàn)相分離的好處是：
程序員不需要過多的思考頁面顯示問題，而只需要根據(jù)模版效果把數(shù)據(jù)放入模版相應(yīng)的位置。界面的結(jié)構(gòu)和表現(xiàn)由UI設(shè)計師負(fù)責(zé)。填入結(jié)構(gòu)的數(shù)據(jù)自覺套用設(shè)計好了的表現(xiàn)效果。最后呈現(xiàn)一個實(shí)現(xiàn)功能的完整界面。
表現(xiàn)層的分離保持整個軟件界面視覺的一致性，使改版也變得非常簡單，修改樣式表就可以了；
由于結(jié)構(gòu)清晰，數(shù)據(jù)層相對獨(dú)立，對數(shù)據(jù)的集成、更新、處理和再利用也更加方便靈活；
四 代碼編寫規(guī)范
（一） 目錄結(jié)構(gòu)及命名規(guī)則
目錄結(jié)構(gòu)規(guī)范
1、 目錄建立的原則：以最少的層次提供最清晰簡便的訪問結(jié)構(gòu)。
2、 根目錄一般只存放index.htm以及其他必須的系統(tǒng)文件
3、 在根目錄中原則上應(yīng)該按照系統(tǒng)的欄目結(jié)構(gòu)，給每一個欄目開設(shè)一個目錄，根據(jù)需要在每一個欄目的目錄中開設(shè)一個images 和media
的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內(nèi)容特別多，又分出很多下級欄目，可以相應(yīng)的再開設(shè)其他目錄。根目錄下的images用于
存放各頁面都要使用的公用圖片，子目錄下的images目錄存放本欄目頁面使用的私有圖片
4、 所有JS,ASP,PHP等腳本存放在根目錄下的scripts目錄
5、 所有CGI程序存放在根目錄下的cgi-bin目錄
6、 所有CSS文件存放在根目錄下style目錄
7、 每個語言版本存放于獨(dú)立的目錄。例如：簡體中文gb
8、 所有flash, avi, ram, quicktime 等多媒體文件存放在根目錄下的media目錄
9、 temp 子目錄放客戶提供的各種文字圖片等等原始資料，以時間為名稱開設(shè)目錄，將客戶陸續(xù)提供的資料歸類整理。
文件和目錄命名規(guī)范
1、 文件命名的原則：以最少的字母達(dá)到最容易理解的意義。
2、 每一個目錄中包含的缺省html 文件，文件名統(tǒng)一用index.htm
3、 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，不得包含漢字、空格和特殊字符
4、 盡量按單詞的英語翻譯為名稱。例如：feedback(信息反饋)，aboutus(關(guān)于我們) 不到萬不得已不要以拼音作為目錄名稱
5、 多個同類型文件使用英文字母加數(shù)字命名，字母和數(shù)字之間用_分隔。例如：news_01.htm。注意，數(shù)字位數(shù)與文件個數(shù)成正比，不夠的用0補(bǔ)齊。例如共有200條新聞，其中第18條命名為news_018.htm
圖片的命名規(guī)范
1、 名稱分為頭尾兩兩部分，用下劃線隔開。
2、 頭部分表示此圖片的大類性質(zhì)。例如： 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們?nèi)∶篵anner
；標(biāo)志性的圖片我們?nèi)∶麨椋簂ogo ；在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton
；在頁面上某一個位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu ；裝飾用的照片我們?nèi)∶簆ic
；不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle 依照此原則類推。
3、 尾部分用來表示圖片的具體含義，用英文字母表示。例如：banner_sohu.gif banner_sina.gif
menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif
logo_national.gif pic_people.jpg pic_hill.jpg.
4、 有onmouse效果的圖片，兩張分別在原有文件名后加"_on"和"_off"命名
其它文件命名規(guī)范
1、 js的命名原則以功能的英語單詞為名。例如：廣告條的js文件名為:ad.js
2、 所有的CGI文件后綴為cgi。所有CGI程序的配置文件為config.cgi
（二） html編寫規(guī)則
一般原則
1、 在編寫模版文件，排布結(jié)構(gòu)表格之前，要思考一個最佳方案，表格的嵌套盡量控制在三層以內(nèi)；要考慮程序套用的可實(shí)現(xiàn)性、通用性、靈活性、預(yù)見性，所有內(nèi)容均采用積木式組織，可替換和刪除，并對總體結(jié)構(gòu)不會造成破壞性影響
2、 盡量避免 <colspan> <rowspan> 兩個標(biāo)記，經(jīng)驗(yàn)表明，這兩個標(biāo)記會帶來許多麻煩
3、
一個網(wǎng)頁要盡量避免用整個一張大表格，所有的內(nèi)容都嵌套在這個大表格之內(nèi)。因?yàn)闉g覽器在解釋頁面元素時，是以表格為單位逐一顯示，如果一張網(wǎng)頁是嵌套在一
個大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對一片空白很長時間，然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做，請使用
<tbody>標(biāo)記，以便能夠使這個大表格分塊顯示
4、 排版中經(jīng)常會遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用全角空格來達(dá)到效果，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標(biāo)記，注意，一般情況下，請不要省略 </p> 結(jié)束標(biāo)記
5、 原則上，我們禁止用 <img width=? height=?> 來人為干預(yù)圖片顯示的尺寸，而且建議 <img>
標(biāo)簽中不要帶上width 和height
兩個屬性，這是因?yàn)橹谱鬟^程中，圖片往往需要反復(fù)的修改，這樣可以避免人為干預(yù)圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個副作用是當(dāng)
網(wǎng)頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網(wǎng)頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現(xiàn)象），尤其是當(dāng)圖片
的尺寸較大時，這種現(xiàn)象會很明顯，所以當(dāng)預(yù)料到這種會明顯導(dǎo)致網(wǎng)頁抖動的情況會發(fā)生時，務(wù)必在最后給 <img>附上 width 和
height 屬性
6、 為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中盡量不要使用<br> 來人工干預(yù)分段
7、 不同語種的文字之間應(yīng)該有一個半角空格，但避頭的符號之前和避尾的符號之后除外，漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)，英文字母和數(shù)字周圍的括號應(yīng)該使用半角括號
8、
為貫徹結(jié)構(gòu)層和表現(xiàn)層分離的原則，嚴(yán)禁使用傳統(tǒng)的HTML3.2/4.0控制表現(xiàn)的標(biāo)簽，例如<font>,<b>，還有本意用
于結(jié)構(gòu)后來被濫用于控制表現(xiàn)的標(biāo)簽，例如：<h1>,<table>等。所有的字號都應(yīng)該用樣式表來實(shí)現(xiàn)，禁止在頁面中出現(xiàn)
<font size=?>
標(biāo)記，<b>??</b> <h1>??</h1>標(biāo)記，嚴(yán)禁在結(jié)構(gòu)頁面寫表現(xiàn)標(biāo)簽
9、 不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實(shí)現(xiàn)。
10、 中英文混排時，我們盡可能的將英文和數(shù)字定義為verdana 和arial 兩種字體
11、 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%
12、 系統(tǒng)中的路徑全部采用相對路徑
13、 為保證系統(tǒng)和瀏覽器的兼容性，當(dāng)設(shè)置背景圖片時，要堅持用雙引號。
14、 “網(wǎng)頁大小”為網(wǎng)頁的所有文件大小的總和，包括HTML文件和所有的嵌入的對象。頁面大小保持在34K以下為合適
代碼規(guī)則
head區(qū)標(biāo)識（head區(qū)是指首頁HTML代碼的<head>和</head>之間的內(nèi)容）
1、 公司版權(quán)注釋
<!--
Generator: 中軟融鑫
Creation Data: 2005-8-1
Original Author: 張三
-->
2、網(wǎng)頁顯示字符集
簡體中文：
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁體中文：
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 語：
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
3、 簡介
<META NAME="DESCRIPTION" CONTENT="這里填您網(wǎng)站的簡介">
4、 網(wǎng)頁的css文件定義，所有css文件盡量采用外部調(diào)用
<LINK href="style/style.css" rel="stylesheet" type="text/css">
5、 網(wǎng)頁標(biāo)題
<title>這里是你的網(wǎng)頁標(biāo)題</title>
7、所有的javascript腳本盡量采取外部調(diào)用
<SCRIPT LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>
head區(qū)可以選擇加入的標(biāo)識
7、設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新調(diào)閱。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
8、禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
9、用來防止別人在框架里調(diào)用你的頁面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
10、自動跳轉(zhuǎn)。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
5指時間停留5秒。
11、網(wǎng)頁搜索機(jī)器人向?qū)?用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all。
12、收藏夾圖標(biāo)
<link rel = "Shortcut Icon" href="favicon.ico">
13、搜索關(guān)鍵字
<META NAME="keywords" CONTENT="關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3,...">
head區(qū)以下的標(biāo)記
1、body標(biāo)記
為了保證瀏覽器的兼容性，必須設(shè)置頁面背景
<body bgcolor="#FFFFFF">
2、 table標(biāo)記
在寫 <table>
互相嵌套時，嚴(yán)格按照的規(guī)范，對于單獨(dú)的一個<table>來說，<tr>，<td>各縮進(jìn)兩個半角空格，結(jié)束標(biāo)記
和開始標(biāo)記平齊。<td>
中如果還有嵌套的表格，<table>也縮進(jìn)兩個半角空格，如果<td>中沒有任何嵌套的表格，</td>
結(jié)束標(biāo)記應(yīng)該與 <td> 處于同一行，不要換行。
正確寫法：
a\
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
b\
<td><img src=”../images/sample.gif”></td>
錯誤寫法
a\
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
b\
<td><img src=”../images/sample.gif”>
</td>
這是因?yàn)闉g覽器認(rèn)為換行相當(dāng)于一個半角空格，以上不規(guī)范的寫法相當(dāng)于無意中增加一個半角空格，如果確實(shí)有必要增加一個半角空格，也應(yīng)該這樣寫：
<td><img src=”../images/sample.gif”> </td>
于同一個級別 的 <table> 一定是左首對齊的，另外不允許沒有任何內(nèi)容的空的單元格存在，高度大于等于12px 的單元格應(yīng)該 在 <td> 和 </td> 之間寫一個 ，如果高度小于12px, 則應(yīng)該 在 <td> 和 </td> 之間插入一個1*1 大小的透明的gif 圖片，這是因?yàn)槟承g覽器認(rèn)為空單元格非法而不會予以解釋。如果代碼順序較亂，在DW中可以通過command->apply souce formatting進(jìn)行重新整理！
3、 Width 和height標(biāo)記
一般情況下只有一列的表格，width 寫在<table> 的標(biāo)簽內(nèi)，只有一行的表格，height 寫在 <table>
的標(biāo)簽內(nèi)，多行多列的表格，width 和height 寫在第一行或者第一列的 <td>
標(biāo)簽內(nèi)?？傊裱粭l原則：不出現(xiàn)多于一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height
都是有效的，也就是改動代碼中任何一個width 和height 的數(shù)值，都應(yīng)該在瀏覽器中看到變化。
A、只一列的表格的width標(biāo)記
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
b、只一行的表格的height標(biāo)記
<table width="100%" height="30" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
c、多行多列表格的width和height標(biāo)記
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="30"> </td>
<td width="200"> </td>
<td width="300"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
4、 table的width屬性
為遵循頁面結(jié)構(gòu)靈活性、通用性原則，table的width屬性原則上全部寫成100％或者不寫width屬性，不推薦寫成其他非100％寬度屬性。留空顯示效果通過其給外部td施加style的padding屬性實(shí)現(xiàn)。
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="200" bgcolor="#FF0000" style="padding:20px; ">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>table寬度100％</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
需要說明的是這里td的style雖然是css的寫法，但不屬于表現(xiàn)層的內(nèi)容，而是屬于結(jié)構(gòu)層的內(nèi)容，所以可以直接寫在html標(biāo)記中間。
5、數(shù)據(jù)列表表格代碼寫法
表格外加上一個<div>，并對<div>賦一個id，即<div id =list>，然后通過樣式表對這個id下的所有html元素進(jìn)行控制，
用<th>表示表頭
設(shè)置每列寬度的位置在表頭對應(yīng)的<th>中，其中列表項(xiàng)中，字?jǐn)?shù)最多或者字?jǐn)?shù)不定的一項(xiàng)不設(shè)置寬度。
寬度的值依據(jù)列表項(xiàng)內(nèi)容的多少來定，2個字的30px，三個字40px，時間、年月日（比如2004-11-11）80-120px,
類似于標(biāo)題的列表項(xiàng)，表格對齊方式為左對齊（align=left）,時間，人名一般居中對齊，數(shù)據(jù)一般右對齊（align=right）。
對齊頁面內(nèi)容時不要用div來對齊，直接在td 或th中寫align=…
表頭文字一般不折行，方法是在<th>中加上nowrap,或者通過樣式表來控制
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="30" nowrap>選擇</th>
<th align="left" nowrap>標(biāo)題</th>
<th width="80" nowrap>發(fā)表人</th>
<th width="120" nowrap>時間</th>
<th width="40" nowrap>大小</th>
</tr>
<tr>
<td> </td>
<td align="left"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="right"> </td>
</tr>
<tr>
<td> </td>
<td align="left"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="right"> </td>
</tr>
</table>
（三） css編寫規(guī)則
css文件調(diào)用寫法
1、所有的CSS的盡量采用外部調(diào)用，特殊情況才允許使用內(nèi)置html寫法。
<LINK href="style/style.css" rel="stylesheet" type="text/css">
css文件結(jié)構(gòu)組織
1、 文件提頭，css文件名稱、時間、作者
/*--------------------------------------------------------------------
* CRM系統(tǒng)的標(biāo)準(zhǔn)樣式
* DateTime: 2005-1-28 v1.1
* author: lizhi
*--------------------------------------------------------------------*/
2、 將不同目的和效果的CSS選擇符分別編組，編組分層級使結(jié)構(gòu)清晰，便于查對。并恰當(dāng)?shù)爻蓧K注釋，注釋要說明施加的頁面文件的對象。頂級注釋用*TOP*打頭，次級注釋不用。
/* TOP* head文件的風(fēng)格--------------------------------*/
/*head導(dǎo)航文字風(fēng)格*/
.headtext {
font-size: 14px;
color: #ffffff;
font-weight: bold;
}
.headtext a:link {
color: #ffffff;
text-decoration: none;
}
.headtext a:visited {
color: #ffffff;
text-decoration: none;
}
.headtext a:hover {
color: FED078;
text-decoration:none ;
}
/*客戶簡明信息文字風(fēng)格*/
#clientcard {
align:left;
}
#clientcard th {
height:20;
font-size: 12px;
color: #737373;
padding-left:10;
font-weight: bold;
background-attachment: fixed;
background:url(images/dot2.gif);
background-repeat: no-repeat;
background-position: left center;
}
#clientcard td {
height:20;
font-size: 12px;
color: #FD783A;
padding-right:25;
}
3、選擇符分組的順序是重定義的最先，偽類其次，自定義最后。便于自己和他人閱讀。
例如：
/*
* 系統(tǒng)的背景部分和滾動條效果
*/
BODY {
margin-left: 0px;
…
}
TD {
font-size: 12px;
…
}
/*
* 這個部分是超級連接部分
*/
a:link {
color: #484848;
text-decoration: none;
}
a:visited {
color: #484848;
text-decoration: none;
}
a:hover {
color:#BD0800;
text-decoration: underline;
}
/*左邊樹型結(jié)構(gòu)名稱文字風(fēng)格*/
.ltreename {
font-size: 14px;
…
}
類和ID命名規(guī)則
1、以功能和定義對象的位置，而不是外觀為類和ID命名。例如創(chuàng)建了一個 .smallblue 類，后來打算將文字改大，顏色變?yōu)榧t色，這個類名就不再有任何意義了。所以，用更有描述性的名字如 .copyright 和.info-list更加合適。
單位
1、0不用單位
2、非零值要指明單位，指定字體、邊距或大小時，必須指明所用的單位
例如： padding: 0 2px 0 1em;
3、特例：line-height不需要單位
字號大小
1、為了保證不同瀏覽器上字號保持一致，字號像素px來定義，一般使用中文宋體12px 和14.7px 這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用14.7px 的字號比較合適
例如： font-size: 12px;
順序
1、a:link a:visited a:hover a:actived 要按照規(guī)范順序?qū)?br>
2、邊框(border)、邊距(margin)和補(bǔ)白(padding)的簡寫次序?yàn)椋喉槙r針方向從上開始，即 Top, Right, Bottom, Left。
例如： margin: 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。
組合選擇符
1、保持CSS短小對減少下載時間非常重要。盡量為選擇符分組、 利用繼承(inheritance)以及使用簡寫(shorthand)來減少冗余。
使用圖片
1、css中經(jīng)常遇到使用圖片的情況, 圖片的路徑一律采用相對路徑。
例如：
/*信息分類td底圖和文字風(fēng)格*/
.hurdlename {
font-size: 14px;
color: #0B43C2;
height:25px;
font-weight: bold;
background-image: url(images/rbar_bg.gif);
background-repeat: repeat-y;
text-indent: 12px;
}
/* 按鈕風(fēng)格*/
.but1{
background-image: url(../images/but1.gif);
font-size: 12px;
color: #000000;
border: 0;
width:85px;
height:26px;
cursor: hand;
}
2、使用圖片替換技術(shù)時要考慮與系統(tǒng)和文件結(jié)構(gòu)的親和力。如果引用css的所有文件不在同一級相對路徑，就會出現(xiàn)css指定的圖片無法顯示的問題。在這種情況下不支持使用圖片技術(shù)。建議采用filter技術(shù)
例如：
/* TOP * 通用按鈕風(fēng)格---------------------------------------*/
input.buttton {
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#CFD1CF, endcolorstr=#EFEFEF);
border: #B5B6B5 1px solid;
font-size: 12px;
color: #000000;
cursor: hand;
height:24px;
background:#ffffff;
}
五 頁面模版使用規(guī)范
頁面模版使用規(guī)范的目的是統(tǒng)一和約定UI設(shè)計、界面工程師與不同的程序編碼人員的行為方式，光有了書寫代碼的規(guī)范還不能完全解決界面套用的統(tǒng)一性問 題。因?yàn)椴煌木幋a人員對同一個模版的理解有可能不同，再加上個人工作習(xí)慣的不同，界面套用的結(jié)果往往很容易出現(xiàn)差異。哪怕是每人一點(diǎn)點(diǎn)差異，都可能使軟 件的質(zhì)量收到很大的影響。
責(zé)任分工明確
1、 UI設(shè)計、界面工程師負(fù)責(zé)界面風(fēng)格的設(shè)計和軟件模版的編寫，并監(jiān)督界面套用的效果。對軟件最終的界面負(fù)責(zé)。
2、 編碼工程師負(fù)責(zé)軟件業(yè)務(wù)邏輯的實(shí)現(xiàn)，軟件模版的套用。對軟件的數(shù)據(jù)和程序負(fù)責(zé)。
3、 現(xiàn)實(shí)的情況是個別編碼工程師在模版套用出現(xiàn)偏差后，在界面工程師提出修改意見的時候拒絕修改，以開發(fā)進(jìn)度、時間不夠?yàn)橛商氯?，甚至主觀認(rèn)為“這個（界面）不重要”致使界面工程師的作用得不到應(yīng)有的發(fā)揮，影響軟件產(chǎn)品質(zhì)量。
4、 解決辦法是各負(fù)其責(zé)。界面問題提高重視程度，并納入開發(fā)流程和進(jìn)度管理之中。
界面模版交界過程
1、 模版文件制作完成后，在提交給編碼工程師時，要簡要說明模版的文件的使用說明和提醒。
2、 編碼工程師和界面工程師密切合作，完全理解模版使用說明。
3、
對界面結(jié)構(gòu)層html的table嵌套關(guān)系理解清楚并明確和程序結(jié)合的用意。有和程序不相配合的情況，進(jìn)一步和界面工程師討論，獲得解決方案。不得在界面
工程師不知情的情況下隨意修改table結(jié)構(gòu)、定位屬性和嵌套關(guān)系。這樣做的壞處是雖然一個人解決了暫時的顯示問題，但和其他編碼工程師套用的結(jié)果出現(xiàn)不
同。也不利于界面工程師控制總體界面。
4、 對表現(xiàn)層的界面元素和css文件選擇符的對應(yīng)關(guān)系。做到心中有數(shù)，理解一個模版文件，到套用其他文件時就能夠舉一反三。
5、 編碼工程師完全理解了界面模版后，就能夠順暢的把數(shù)據(jù)層的內(nèi)容放到結(jié)構(gòu)層合適的位置，并指定表現(xiàn)層合適的選擇符屬性。完成界面套用工作。
模版說明的內(nèi)容
1、 總體的界面結(jié)構(gòu)
2、 頁面板塊的布局和定位table的寫法
3、 table嵌套的方式的理由
4、 不同功能的界面顯示單元說明和使用方法
5、 css文件中選擇符的使用說明，一般的都能理解，個別特殊的要著重說明。
Css文件的版本控制
Css文件應(yīng)引入版本控制的機(jī)制，項(xiàng)目組中應(yīng)指定專人負(fù)責(zé)css文件的上傳和修改。服務(wù)器的css文件和界面工程師的css文件應(yīng)該同步更新。不支持編碼工程師隨意添加選擇符修改css文件。誰都可以改就沒有標(biāo)準(zhǔn)，沒有版本控制就做很難做到界面統(tǒng)一。
