1、web前端頁面規范目 錄web前端頁面規范11.概述32.html文件32.1結構樣式分離32.2 type屬性32.3注釋32.4縮進42.5布局4布局原則4布局框架43.CSS文件43.1命名43.2CSS初始化73.3CSS書寫順序73.4CSS縮寫屬性73.5去掉小數點前面的“0”83.6“0”后面不跟單位83.7其他常用屬性設置8頁面字體8文字顏色8邊距9留白9行間距10段落設置11容器寬高114.頁面功能114.1鍵盤響應支持114.2新增114.3修改114.4刪除124.5查詢125.其他121.概述本文針對目前所開發產品中出現的問題，制定的部分關于前端頁面的書寫規范，統一標準

2、，便于后臺人員添加功能及前端后期優化維護，提高團隊協作效率，本文檔如有不對或者不合適的地方請及時提出, 經討論決定后可以更改此文檔。2.html文件2.1結構樣式分離（1）盡量避免在html文件的head部分使用的形式來定義樣式。（2）盡量避免在html標簽中直接使用style=”的形式來定義樣式。（3）統一通過外部調用css樣式表文件來實現行為結構的分離：2.2 type屬性在引用樣式和腳本時，無需指定type屬性2.3注釋為方便頁面維護，以及不同人員閱讀頁面代碼，頁面中不同的模塊起始位置和功能模板需分別添加注釋。如下圖：2.4縮進為方便檢查需保證標簽的正確閉合，且代碼需根據不同的層級進行縮

3、進對齊。2.5布局2.5.1布局原則響應式布局，根據瀏覽設備的不同分辨率實現自動調整頁面布局。其中PC端能自適應1024*768分辨率。 2.5.1布局框架目前均采用bootstrap響應式框架3.CSS文件3.1命名為了讓樣式文件管理更加方便，通過名稱就能知道樣式文件的作用范圍，css樣式和css文件均采用語義化命名方式：（1）常用CSS選擇器命名：選擇器命名說明wrapper頁面外圍控制整體布局寬度container、content容器,用于最外層main頁面主體head、header頁頭部分logoLOGO標志foot、footer頁腳部分copyright版權信息nav導航subnav

4、子導航menu菜單submenu子菜單 sidebar側欄title標題searchInput搜索輸入框search搜索banner廣告條dorpmenu 下拉菜單list列表tool、toolbar工具條news新聞news-trends新聞動態hot熱點login登錄register 注冊（2）常用CSS文件命名：文件命名說明master.css，style.css，main.css主要的 module.css模塊base.css基本共用forms.css表單font.css文字columns.css專欄themes.css主題print.css打印mend.css補丁*注：若自定義css

5、樣式和文件與所用框架或插件中命名沖突，可采用前綴或后綴的形式來命名。（3）長名稱或詞組可以使用“中橫線”來為選擇器命名。（4）不建議使用“_”下劃線來命名CSS選擇器（可區分JS變量命名，解決低版本瀏覽器兼容問題）。3.2CSS初始化為減少CSS代碼量以及統一不同瀏覽器某些標簽的默認值，使用初始化來控制一些常用的頁面元素：其中font-family中文可根據具體項目需要進行設置“微軟雅黑”或“宋體”。3.3CSS書寫順序（1）位置信息（position，top，right，z-index，display，float等）（2）大小（width，height，padding，margin）（3）文

6、字系列（font，line-height，letter-spacing，color，text-align等）（4）背景（background，border等）（5）其他（animation，transition等）3.4CSS縮寫屬性CSS的有些屬性是可以縮寫的，譬如padding，margin，font等，這樣精簡代碼又可以提高閱讀體驗：3.5去掉小數點前面的“0”3.6“0”后面不跟單位3.7其他常用屬性設置3.7.1頁面字體在規定字體屬性時，需要設置：中文采用“宋體”或“微軟雅黑”，英文采用“Arial”或者“verdana”,一般css初始化時font-family里需有“宋體”或者“

7、微軟雅黑”。對于頁面屬性中字體的大小需根據不同級別來設置，通常：（1）“Head”中標題性文字設置20px；（2）“Menu”中的導航文字設置14px；（3）“Sidebar”中的文字設置12px；（4）“Content”中正文設置12px或14px；（5）“foot”中的文字設置12px；3.7.2文字顏色（1）重要文字： #C00 適用范圍：提示性文字，需要特別注意的內容；（2）常規文字： #333 適用范圍：普通信息、標題；（3）次級文字： #666 適用范圍：幫助信息、說明性文字；（4）輔助文字： #999 適用范圍：一些輔助性文字；所有文字顏色可根據不同項目的具體需求進行更改，目的是

8、同一作用范圍的文字顏色一致。3.7.3邊距（1）WEB頁面和其中的表格都應該設置邊距，避免頁面元素緊貼邊沿。（2）一般表單元素如radio、checkbox以及select和所關聯文字也應設置一定的間距，通常設置為3px，可根據具體情況在3px-5px之間進行調整。（3）表單元素所關聯文字根據表單元素的高度設置相應的行高。3.7.4留白頁面的模塊之間需要控制相同的間距，通常板塊間距、板塊與內容間距、內容單元之間的間距以及內容的間距設置為10px-20px。14號字體可調整為15px-20px。3.7.5行間距行高的幾種表示方式：px/em，normal，百分值，數值或inherit。一般來說，

9、設置行高為數值（line-height:1.2或line-height:1.5）是最理想的方式，并且會隨著對應的font-size而縮放。（1）使用px定值，由于繼承性，無法實現根據文字大小自動調整間距，會出現大號文字重疊的現象。（2）一般瀏覽器的normal值在11.2之間，使用normal文字間距過小，閱讀吃力。（3）百分值也有繼承性。（4）數值，雖然150%和1.5在值上是一樣的，但是它們也是有差別的，使用百分比會計算line-height的值，然后以px像素為單位繼承下去，而1.5則是先繼承1.5這個值，遍歷到了該標簽再計算去line-height的像素值。3.7.6段落設置（1）首行

10、縮進時，禁止使用“ ”或者鍵盤空格鍵，而是設置text-indent:2em（縮進2個文字）。（2）一段完整的文字應該用標簽，盡量不要使用來人工干預分段。3.7.7容器寬高容器寬度根據實際情況設置固定數值、百分比或彈性自適應，高度根據內容自適應，無需設置固定值。4.頁面功能4.1鍵盤響應支持頁面需要提供一些簡單的鍵盤支持，例如：“Enter”、”Tab”。Enter：確認，提交或進行下一步操作。Tab：按照一定的次序切換input焦點。4.2新增新增一條或多條記錄時：（1）新增的記錄排在首頁首行。（2）提交失敗后，保存已經輸入的內容，以便再次提交。4.3修改修改一條或多條記錄時：（1） 修改完成后，須回到原記錄所在位置，并刷新記錄。（2） 修改內容提交失敗后，保存修改的內容，以便再次提交。4.4刪除刪除一條或多條記錄時：（1） 須有確認刪除的提示信息。（2） 刪除成功后，返回到原記錄所在頁，若原記錄所在頁不存在，則返回上一頁。4.5查詢按照條件查詢時：（1） 每次查詢后定位到原頁面。（2） 每次查詢后保留當前查詢條件。（3） 查詢條件較多時，可配置“重置”按鈕。（4） 未查詢到對應記錄時，需給予相關提示。（5） 除明確要求外，需提供模