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