Zving前端開發(fā)規(guī)范(CSS部分).doc
《Zving前端開發(fā)規(guī)范(CSS部分).doc》由會員分享，可在線閱讀，更多相關(guān)《Zving前端開發(fā)規(guī)范(CSS部分).doc（18頁珍藏版）》請在裝配圖網(wǎng)上搜索。
Zving前端開發(fā)規(guī)范（CSS部分） 為了保持頁面規(guī)范，避免錯誤，加快學習和開發(fā)效率，以下列出Zving前端開發(fā)中CSS的一些規(guī)范及注意事項，此規(guī)范適用于項目前端頁面。（2009年7月31日初稿 2012年11月22日修正） 頁面制作最重要的就是CSS，定義合理的CSS命名規(guī)范，可以大幅提高頁面制作的效率和方便開發(fā)及相關(guān)人員修改編寫。關(guān)于CSS的命名我們采用下劃線命名法或駱駝式命名法，不要使用中劃線命名法。 駱駝式命名法：是指混合使用大小寫字母來構(gòu)成變量和函數(shù)的名字,即函數(shù)名中的每一個邏輯斷點都有一個大寫字母來標記。例如：mianNav footNav 下劃線命名法：是指函數(shù)名中的每一個單詞都用一個下劃線來隔開。例如：mian_nav foot_nav 1.通用命名規(guī)則： 1)所有ID或者class字母和數(shù)字之間用“_”連接，如: #col_left、#col_right 2)或所有ID或者class兩個單詞之間的鏈接采用駱駝式命名法，如:mianNav、footNav 3)頁面主體框架布局命名：lay_left、lay_center、lay_right 4)欄目布局容器命名一律采用:col_left、col_right 5)欄目標題塊命名一律采用title元素標簽采用: 如： 標題 6)頁面所有圖片區(qū)域全部采用：pic_banner、pic_logo 7)頁面文本列表區(qū)域全部采用：list_pic、list_item 8)頁面上按鈕采用：btn_submit、btn_search 9)廣告區(qū)域：ad_left,ad_right,ad_top,ad_bottom 2.主框架命名規(guī)則： 1)#header (頁面頭部) 2)#main (頁面主體) 3)#footer (頁面尾部) 3.通用命名規(guī)則： 主 體：main 外層：wrap 功能條：funcBar 主導航：mainNav 子導航：subNav 友情鏈接：friendLink 版 權(quán)：copyright 頁眉：header 頁腳：footer 標題：title 主導航：mainNav 子菜單：subMenu 注釋：note 面包屑：breadcrumb 容器：container 內(nèi)容：content 搜索：search 登陸：Login 當前狀態(tài)：current 頁頭：header 標志：logo 側(cè)欄：sidebar 廣告：banner 導航：nav 子導航：subnav 菜單：menu 子菜單：submenu 搜索：search 滾動：scroll 頁面主體：main 內(nèi)容：content 標簽頁：tab 文章列表：list 信息：msg 提示技巧：tips 欄目標題：title 指南：guide 服務：service 熱點：hot 新聞：news 下載：download 注冊：reg（register） 狀態(tài)：status 按鈕：btn 投票：vote 4.常用簡寫命名規(guī)則： bd：Body hd：Header fnt：字體 nav：導航 tb：表格 lnk：鏈接 ml/mr：margin-left/margin-right lst：列表 pl / pr / pd：padding-left/-right/padding col：欄目 frm：表單 con：內(nèi)容 inf：信息 lg：Logo inp：Input ft：Footer btn：Button more：更多 fl /fr float:left/float:right tit 標題欄 spr 空行 t / d / mid / l / r：上 / 下/中 / 左 / 右 bdr：邊 w：寬 h：高 網(wǎng)站布局和樣式文件命名 1.網(wǎng)站樣式文件命名和樣式從屬關(guān)系 1)全局布局共用CSS文件：common（s包括cssreset（用來清除默認值）、全局性的一些屬性值的定義，還有網(wǎng)站布局容器的共用的CSS部分：頁眉、頁腳、搜索共用CSS） 2)頻道私有CSS文件：home.css（當前頻道或者頁面的CSS獨有屬性值以及為了兼容不同的瀏覽器的所采用的hack） 2.網(wǎng)站布局： 網(wǎng)站采用目前最流行的960寬度布局；布局類型分為3欄和2欄兩種方式。分欄寬度參考設計稿，如果沒有設計稿就按下面的規(guī)則 兩欄布局：主容器寬度為700px 副容器寬度為240px 三欄布局：依次為190px、510px、240px； 3.網(wǎng)站欄目： web頁面上不同內(nèi)容的組合方式：圖片展示、圖文組合、文字列表、標題段落、按鈕等幾種。所以common樣式文件中按照如下規(guī)則定義： 1)全局框架通用樣式 2)頁眉 3)導航 4)搜索 5)頁腳 6)內(nèi)容列表通用樣式 7)圖片通用樣式 8)表單通用樣式 4.頻道私有CSS文件：針對網(wǎng)站頻道不同風格所以各部分需要獨自私有定義，但是通用布局不需要再重新設置，只需要設置私有部分。 XHTML文檔結(jié)構(gòu) 1.html基本框架結(jié)構(gòu) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>標題title> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/home.css" /> head> <body> <div id="header" class="pageWidth header"> …… div> <div id="main" class="pageWidth main"> …… div> <div id="footer" class="pageWidth footer"> …… div> <script src="js/jquery.js" type="text/javascript"> script> body> html> 2.HTML5標準的Doctype聲明。 第一行必須加文檔聲明不同的文檔聲明影響頁面元素的渲染效果，上例中我們使用HTML 5。以保證在IE6.0以上及非IE的現(xiàn)代瀏覽器里采用一致的“盒模型”。 3.編碼聲明。默認使用UTF-8編碼。 web文件的“換行符類型”為“windows換行符-CR/LF”；編碼為“UTF-8”或“GBK”（在GBK版本里，或在需要與支持GBK的其他系統(tǒng)/控件交互的情況下，使用“GBK”編碼） 4.meta，title等處填寫相應的關(guān)鍵詞和描述。 也是必須的，這一句是讓IE8及以上版本以最高級內(nèi)核渲染頁面，即使系統(tǒng)里安裝有IE8或更高版本，一些以IE為內(nèi)核的瀏覽器（如360瀏覽器），仍然采用IE7的內(nèi)核渲染，使用上面這一句設置，讓IE以最高等級內(nèi)核渲染頁面，減少針對IE7作兼容處理的工作量。 關(guān)鍵詞" /> 頁面描述" /> 標題 5.基本結(jié)構(gòu)(考慮到頁頭頁腳將會制作成包含文件，所以 區(qū)的內(nèi)容至少要分散到三個獨立div內(nèi)。) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 div#header div.globalNav a img.logo div#loginBar div#mainNav div#search div#main div#lay_left: (布局容器1) div.col (內(nèi)容塊1) div.col (內(nèi)容塊2) div#lay_right: (布局容器2) div.col (內(nèi)容塊3) div.col (內(nèi)容塊4) div#footer: div.link div.copyright Web頁面切圖和CSS注意事項 1.Web頁面切圖 1)Web頁面的切圖類型可以歸納為背景（bg）、列表項目的符號（li）、內(nèi)容中插入的圖片（pic）、按鈕（btn）、圖標等幾種形式（ico）。 2)建議把用CSS背景加載的圖片拼合成一張圖片。這樣可減少對服務器的請求。從而提升頁面加載速度。 3)除頁面頭部大圖保存格式為jpg外，其他圖片一律采用gif格式 2.CSS相關(guān)事項： 1)所有的xhtml代碼小寫 2)每個標簽都要有開始和結(jié)束，且要有正確的層次,沒有結(jié)束標簽的，標簽后加上"/"。 如：、 3)所有的屬性必須用引號""括起來 4)文檔類型必須聲明，禁止文檔類型亂用 5)所有<和&特殊符號用編碼表示 6)必須正確使用代碼縮進，縮進時使用tab(鍵盤中的TAB鍵)，禁止無縮進、亂縮進，禁止使用空格縮進 7)CSS加載的背景圖片要預定義寬度和高度，路徑采用絕對路徑可以直接從訪問者計算機緩存中加載，提高頁面加載速度。 8)要盡可能做到表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及到表現(xiàn)元素，如style、font、bgColor、border。 9)到的定義，應遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。采用繼承方式，否則個性定義就會失效。 10)Font的縮寫為：樣式粗細大小行高字體（font:italic bold 12px/30px “simsun”） 11)class和id選擇器，盡量使用class選擇器，id只能在同一頁面中不能重復適用 12)給頁面的布局和重要的區(qū)塊加上注釋,如： 13)給圖片加上alt標簽，利于搜索引擎的查詢。 14)所有的標簽必須進行合理的嵌套。 15)頁面的實現(xiàn)過程中出現(xiàn)的問題是有規(guī)律的幾種：3個像素的bug、雙倍浮動空白邊距、文字溢出bug。盡可能采用合理布局可以避免不同瀏覽器下所產(chǎn)生的問題。css的hack應該盡量避免采用。 16)盡可能的合理的去用繼承，好處是代碼結(jié)構(gòu)清晰，方便其他修改人員辨認頁面結(jié)構(gòu)、減少css的代碼的重復定義。 17)網(wǎng)站上經(jīng)常會出現(xiàn)用戶輸入一大段字符和字母以至于文字無法正常折行，把版式破壞，這樣我們就要參考以下樣式：word-wrap:break-word; overflow:hidden; 當然必須得有寬度屬性值。 18)文字過長要出現(xiàn)省略號樣式如下： 1 white-space: nowrap; text-overflow:ellipsis; overflow:hidden; 19)一個完整的表單應該包括： 1 2 3 4 5 <fieldset> <legend>legend> <label>label> <input /> fieldset> 20)頁面上的列表元素除了ul ol外，我們還可以采用dl dt dd組合。 21)合理采用多重樣式定義可以有效的增加樣式的重用性。 22)我們要清楚哪些標簽是塊狀元素和內(nèi)聯(lián)元素。一般我們可以把css元素分為block（塊狀）和inline（內(nèi)聯(lián)）。熟悉這些元素屬性有利于我們深入理解css。 23)按照推薦css屬性書寫順序： 顯示屬性： 1 2 3 4 5 6 7 display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float 自身屬性： 1 2 3 4 5 6 7 8 9 10 width max-width || min-width height max-height || min-height overflow || clip margin : margin-top || margin-right || margin-bottom || margin-left padding : padding-top || padding-right || padding-bottom || padding-left outline : outline-color || outline-style || outline-width border background : background-color || background-image || background-repeat || background-attachment || background-position 文本屬性： 1 2 3 4 5 6 7 8 9 10 color font : font-style || font-variant || font-weight || font-size || line-height || font-family font : caption | icon | menu | message-box | small-caption | status-bar text-overflow text-align text-indent line-height white-space vertical-align cursor CSS及HTML編寫問題： 1）考慮到cms內(nèi)的文章編輯器內(nèi)編輯文章時會對正文字體進行大小設置，所以建議前端頁面的樣式定義里不要對 body,textarea,select,button,之外的標簽重新設置字體大??；并且建議不要對body,textarea,td之外的標簽重設行高。 2）基本的css設定（global.css）可以如下，（僅示例，請視情況修改或擴展） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 body {background-color:#fff;color: #222;} a { color: #06a; text-decoration: none; } a:hover { color: #f90; text-decoration: underline; } body,div,q,iframe,form, ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p{ margin: 0; padding: 0;} img,fieldset{border: none 0;} body,td,textarea{word-break: break-all; line-height:1.5;} body,input,textarea,select,button{margin: 0; font-size: 12px;font-family: Tahoma, SimSun, sans-serif;} div,p,table,th,td{ font-size:1em; font-family:inherit; line-height:inherit;} .tc { text-align:center; } .tr { text-align:right; } .tl { text-align:left; } .fl{ float:left; } .fr{ float:right; } a{text-decoration:none;} a:hover{text-decoration:underline;} 3)允許使用css hack，以提高制作效率，如 1 2 3 .fl{ float:left; _display:inline;} .fr{ float:right; _display:inline;} 4)頁面布局，編寫html時盡量不要對元素進行ID命名，亦即盡量少使用css中的ID選擇器，對元素ID命名可以在編寫js交互腳本時進行 5)頁使用Dreamweaver CS以上版本：在頁面制作時注意清除浮動、及定義浮動元素寬度，可以讓頁面在Dreamweaver里的“設計視圖”下接近最終瀏覽效果下載提示(請認真閱讀)
- 1.請仔細閱讀文檔，確保文檔完整性，對于不預覽、不比對內(nèi)容而直接下載帶來的問題本站不予受理。
- 2.下載的文檔，不會出現(xiàn)我們的網(wǎng)址水印。
- 3、該文檔所得收入（下載+內(nèi)容+預覽）歸上傳者、原創(chuàng)作者；如果您是本文檔原作者，請點此認領(lǐng)！既往收益都歸您。
文檔包含非法信息？點此舉報后獲取現(xiàn)金獎勵！
下載文檔到電腦，查找使用更方便
9.9 積分
| 下載 |
還剩頁未讀，繼續(xù)閱讀
- 配套講稿：
如PPT文件的首頁顯示word圖標，表示該PPT已包含配套word講稿。雙擊word圖標可打開word文檔。
- 特殊限制：
部分文檔作品中含有的國旗、國徽等圖片，僅作為作品整體效果示例展示，禁止商用。設計者僅對作品中獨創(chuàng)性部分享有著作權(quán)。
- 關(guān) 鍵 詞：
- Zving 前端 開發(fā) 規(guī)范 CSS 部分
裝配圖網(wǎng)所有資源均是用戶自行上傳分享，僅供網(wǎng)友學習交流，未經(jīng)上傳用戶書面授權(quán)，請勿作他用。
鏈接地址：http://m.appdesigncorp.com/p-9099156.html