web前端頁(yè)面規(guī)范

《web前端頁(yè)面規(guī)范》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、web前端頁(yè)面規(guī)范目錄web前端頁(yè)面規(guī)范11.概述32.html文件32.1結(jié)構(gòu)樣式分離32.2type屬性32.3注釋32.4縮進(jìn)42.5布局42.5.1布局原則42.5.1布局框架43.CSS文件43.1命名43.2CSS初始化73.3CSS書(shū)寫(xiě)順序73.4CSS縮寫(xiě)屬性73.5去掉小數(shù)點(diǎn)前面的“0”83.6“0”后面不跟單位83.7其他常用屬性設(shè)置83.7.1頁(yè)面字體83.7.2文字顏色83.7.3邊距93.7.4留白93.7.5行間距103.7.6段落設(shè)置113.7.7容器寬高114.頁(yè)面功能114.1鍵盤響應(yīng)支持114.2新增114.3修改114.4刪除124.

2、5查詢125.其他121.概述本文針對(duì)目前所開(kāi)發(fā)產(chǎn)品中出現(xiàn)的問(wèn)題，制定的部分關(guān)于前端頁(yè)面的書(shū)寫(xiě)規(guī)范，統(tǒng)一標(biāo)準(zhǔn)，便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)，提高團(tuán)隊(duì)協(xié)作效率，本文檔如有不對(duì)或者不合適的地方請(qǐng)及時(shí)提出,經(jīng)討論決定后可以更改此文檔。2.html文件2.1結(jié)構(gòu)樣式分離（1）盡量避免在html文件的head部分使用的形式來(lái)定義樣式。（2）盡量避免在html標(biāo)簽中直接使用style=””的形式來(lái)定義樣式。（3）統(tǒng)一通過(guò)外部調(diào)用css樣式表文件來(lái)實(shí)現(xiàn)行為結(jié)構(gòu)的分離：

3、ylesheet”/>2.2type屬性在引用樣式和腳本時(shí)，無(wú)需指定type屬性2.3注釋為方便頁(yè)面維護(hù)，以及不同人員閱讀頁(yè)面代碼，頁(yè)面中不同的模塊起始位置和功能模板需分別添加注釋。如下圖：2.4縮進(jìn)為方便檢查需保證標(biāo)簽的正確閉合，且代碼需根據(jù)不同的層級(jí)進(jìn)行縮進(jìn)對(duì)齊。2.5布局2.5.1布局原則響應(yīng)式布局，根據(jù)瀏覽設(shè)備的不同分辨率實(shí)現(xiàn)自動(dòng)調(diào)整頁(yè)面布局。其中PC端能自適應(yīng)1024*768分辨率。2.5.1布局框架目前均采用bootstrap響應(yīng)式框架3.CSS文件3.1命名為了讓樣式文件管理

4、更加方便，通過(guò)名稱就能知道樣式文件的作用范圍，css樣式和css文件均采用語(yǔ)義化命名方式：（1）常用CSS選擇器命名：選擇器命名說(shuō)明wrapper頁(yè)面外圍控制整體布局寬度container、content容器,用于最外層main頁(yè)面主體head、header頁(yè)頭部分logoLOGO標(biāo)志foot、footer頁(yè)腳部分copyright版權(quán)信息nav導(dǎo)航subnav子導(dǎo)航menu菜單submenu子菜單sidebar側(cè)欄title標(biāo)題searchInput搜索輸入框search搜索banner廣告條dorpmenu下拉菜單list列表tool、toolbar工具條news新聞

5、news-trends新聞動(dòng)態(tài)hot熱點(diǎn)login登錄register注冊(cè)（2）常用CSS文件命名：文件命名說(shuō)明master.css，style.css，main.css主要的module.css模塊base.css基本共用forms.css表單font.css文字columns.css專欄themes.css主題print.css打印mend.css補(bǔ)丁*注：若自定義css樣式和文件與所用框架或插件中命名沖突，可采用前綴或后綴的形式來(lái)命名。（3）長(zhǎng)名稱或詞組可以使用“中橫線”來(lái)為選擇器命名。（4）不建議使用“_”下劃線來(lái)命名CSS選擇器（可區(qū)分JS變量命名，解決低版本瀏

6、覽器兼容問(wèn)題）。3.2CSS初始化為減少CSS代碼量以及統(tǒng)一不同瀏覽器某些標(biāo)簽的默認(rèn)值，使用初始化來(lái)控制一些常用的頁(yè)面元素：其中font-family中文可根據(jù)具體項(xiàng)目需要進(jìn)行設(shè)置“微軟雅黑”或“宋體”。3.3CSS書(shū)寫(xiě)順序（1）位置信息（position，top，right，z-index，display，float等）（2）大?。╳idth，height，padding，margin）（3）文字系列（font，line-height，letter-spacing，color，text-align等）（4）背景（background，border等）（5）其他（anim

7、ation，transition等）3.4CSS縮寫(xiě)屬性CSS的有些屬性是可以縮寫(xiě)的，譬如padding，margin，font等，這樣精簡(jiǎn)代碼又可以提高閱讀體驗(yàn)：3.5去掉小數(shù)點(diǎn)前面的“0”3.6“0”后面不跟單位3.7其他常用屬性設(shè)置3.7.1頁(yè)面字體在規(guī)定字體屬性時(shí)，需要設(shè)置：中文采用“宋體”或“微軟雅黑”，英文采用“Arial”或者“verdana”,一般css初始化時(shí)font-family里需有“宋體”或者“微軟雅黑”。對(duì)于頁(yè)面屬性中字體的大小需根據(jù)不同級(jí)別來(lái)設(shè)置，通常：（1）“Head”中標(biāo)題性文字設(shè)置20px；（