影音先锋男人资源在线观看,精品国产日韩亚洲一区91,中文字幕日韩国产,2018av男人天堂,青青伊人精品,久久久久久久综合日本亚洲,国产日韩欧美一区二区三区在线

Web 前端開發(fā)規(guī)范手冊(cè)

上傳人:fgh****35 文檔編號(hào):81580188 上傳時(shí)間:2022-04-27 格式:DOCX 頁數(shù):10 大小:40.41KB
收藏 版權(quán)申訴 舉報(bào) 下載
Web 前端開發(fā)規(guī)范手冊(cè)_第1頁
第1頁 / 共10頁
Web 前端開發(fā)規(guī)范手冊(cè)_第2頁
第2頁 / 共10頁
Web 前端開發(fā)規(guī)范手冊(cè)_第3頁
第3頁 / 共10頁

下載文檔到電腦,查找使用更方便

15 積分

下載資源

還剩頁未讀,繼續(xù)閱讀

資源描述:

《Web 前端開發(fā)規(guī)范手冊(cè)》由會(huì)員分享,可在線閱讀,更多相關(guān)《Web 前端開發(fā)規(guī)范手冊(cè)(10頁珍藏版)》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、入門級(jí)的親們,好好背背這手冊(cè)成嗎 一、規(guī)范目的 Web?前端開發(fā)規(guī)范手冊(cè) 1.1?概述?.....................................................................................................................................?1 二、文件規(guī)范 2.1?文件命名規(guī)則..................................................................................................

2、.......................1 2.2?文件存放位置..........................................................................................................................2 2.3 css?書寫規(guī)范..........................................................................................................................3 2.

3、4 html?書寫規(guī)范.........................................................................................................................7 2.5 JavaScript?書寫規(guī)范.............................................................................................................11 2.6?圖片規(guī)范.........................

4、..........................................................................................................12 2.7?注釋規(guī)范...................................................................................................................................13 2.8 css?瀏覽器兼容..................................

5、.....................................................................................13 一、規(guī)范目的 1.1?概述 為提高團(tuán)隊(duì)協(xié)作效率,?便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù),?輸出高質(zhì)量的文檔,?特制訂此文檔.?本規(guī)范文檔一經(jīng)確認(rèn),?前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺(tái)頁面開發(fā).?本文檔如有不對(duì)或者不合適的地方請(qǐng)及時(shí)提出,?經(jīng)討論決定后可以更改此文檔. 二、文件規(guī)范 2.1?文件命名規(guī)則 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合,其中不得包含漢字、空格和特殊字符;命名原則的指導(dǎo)思想一

6、是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義,二是當(dāng)我們?cè)谖募A中使用“按名稱排例”的命令時(shí),同一種大類的文件能夠排列在一起,以便我們查找、修改、替換、計(jì)算負(fù)載量等等操作。 a. HTML?的命名原則 引文件統(tǒng)一使用?index.htm index.html index.asp?文件名(小寫) 各子頁命名的原則首先應(yīng)該以欄目名的英語翻譯取單一單詞為名稱。例如: 關(guān)于我們?\ aboutus 信息反饋?\ feedback 產(chǎn) 品?\ product如果欄目名稱多而復(fù)雜并不好以英文單詞命名,則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示;每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的?

7、html?文件,文件名統(tǒng)一用?index.htm index.html index.asp; b.?圖片的命名原則 圖片的名稱分為頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質(zhì)例如:廣告、標(biāo)志、菜單、按鈕等等。 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名:?banner 標(biāo)志性的圖片取名為:?logo 在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button在頁面上某一個(gè)位置連續(xù)出現(xiàn),性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶??menu 裝飾用的照片我們?nèi)∶??pic 不帶鏈接表示標(biāo)題的圖片我們?nèi)∶??title 范 例 :?banner_sohu.gif banne

8、r_sina.gif menu_aboutus.gif menu_job.gif title_news.giflogo_police.gif logo_national.gif pic_people.jpg鼠標(biāo)感應(yīng)效果圖片命名規(guī)范為"圖片名+_+on/off"。 例如:menu1_on.gif menu1_off.gif c. javascript?的命名原則 例如:廣告條的?javascript?文件名為?ad.js?彈出窗口的?javascript?文件名為?pop.js d.?動(dòng)態(tài)語言文件命名原則以性質(zhì)_描述,描述可以有多個(gè)單詞,用“_”隔開,性質(zhì)一般是該頁面得概要。范例:reg

9、ister_form.asp register_post.asp topic_lock.asp 2.2?文件存放位置規(guī)范 _Root cn?存放中文?HTML?文件en?存放英文?HTML?文件flash?存放?Flash?文件images?存放圖片文件imagestudio?存放?PSD?源文件flashstudio?存放?flash?源文件inc?存放include?文件library?存放?DW?庫文件media?存放多媒體文件project?存放工程項(xiàng)目資料temp?存放客戶原始資料js?存放?JavaScript?腳本 css?存放?CSS?文件 2.3 CSS?書寫

10、規(guī)范基本原則: CSS?樣式可細(xì)分為?3?類:自定義樣式、重新定義?HTML?樣式、鏈接狀態(tài)樣式。 1.?樣式為設(shè)計(jì)師自定義的新?CSS?樣式,影響被使用本樣式的區(qū)域,用于完成網(wǎng)頁中局部的樣式設(shè)定。樣式名 “.”+“相應(yīng)樣式效果描述的單詞或縮寫”例:“?.shadow”文字樣式樣式名“.no”+“字號(hào)”+“行距”+“顏色縮寫”例:“?.no12?” 、“?.no12-24?” 2.?義?HTML?樣式為設(shè)計(jì)師重新定義已有的?HTML?標(biāo)簽樣式,影響全部的被設(shè)定標(biāo)簽樣式,用于統(tǒng)一網(wǎng)頁中某一標(biāo)簽的樣式定義。樣式名“HTML?標(biāo)簽”例:hr { border: 1px dotted #3333

11、33 } 3.?態(tài)樣式為設(shè)計(jì)師對(duì)鏈接不同狀態(tài)設(shè)定特殊樣式,影響被使用本樣式區(qū)域中的鏈接。該樣式寫法有2種:a.nav:link?nav.a:link?第一種只能修飾標(biāo)簽中;第二種可以修飾所有包含有標(biāo)簽的其他標(biāo)簽。 頁面內(nèi)的樣式加載必須用鏈接方式 注意細(xì)則: 1.?協(xié)作開發(fā)及分工: i?會(huì)根據(jù)各個(gè)模塊,?同時(shí)根據(jù)頁面相似程序,?事先寫好大體框架文件,?分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為;?共用?css?文件?base.css?由?i?書寫,?協(xié)作開發(fā)

12、過程中,?每個(gè)頁面請(qǐng)務(wù)必都要引入,?此文件包含?reset?及頭部底部樣式,?此文件不可隨意修改; 2. class?與?id?的使用: id?是唯一的并是父級(jí)的, class?是可以重復(fù)的并是子級(jí)的,?所以?id?僅使用在大的模塊上, class?可用在重復(fù)使用率高及子級(jí)中; id?原則上都是由我分發(fā)框架文件時(shí)命名的,?為?JavaScript?預(yù)留鉤子的除外; 3. 為?JavaScript?預(yù)留鉤子的命名,?請(qǐng)以?js_?起始,?比如: js_hide, js_show; 4. class?與?id?命名:?大的框架命名比如?header/footer/wrapper/left/r

13、ight?之類的在?2?中由?i?統(tǒng)一命名.其他 樣式名稱由 小寫英文?&?數(shù)字?& _?來組合命名,?如?i_comment, fontred, width200;?避免使用中文拼音,盡量使用簡易的單詞組合;?總之,?命名要語義化,?簡明化. 5. a, b, c, d, id="mainnav">

中加入新的?div?元素, 按?a?命名法則: ,樣式寫法: #mainnav .firstnav{.......} 規(guī)避?class?與?id?命名(此條重

14、要,?若有不明白請(qǐng)及時(shí)與?i?溝通):通過從屬寫法規(guī)避,?示例見?d; 取父級(jí)元素?id/class?命名部分命名,?示例見?d;重復(fù)使用率高的命名,?請(qǐng)以自己代號(hào)加下劃線起始,?比如?i_clear; a,b?兩條,?適用于在?2?中已建好框架的頁面,?如,?要在?2?中已建好框架的頁面代碼

, 樣式寫法: .main_firstnav{.......} 6. css?屬性書寫順序,?建議遵循 布局定位屬性-->自身屬性-->文本屬性-

15、->其他屬性.?此條可根據(jù)自身習(xí)慣書寫,?但盡量保證同類屬性寫在一起.?屬性列舉:?布局定位屬性主要包括: margin、padding、float(包括clear)、position(相應(yīng)的?top,right,bottom,left)、display、visibility、overflow?等;自身屬性主要包括: width& height & background & border;?文本屬性主要包括:font、color、text-align、text-decoration、text-indent 等;其他屬性包括: list-style(列表樣式)、vertical-vlign、c

16、ursor、z-index(層疊順序)?、zoom?等.我所列出的這些屬性只是最常用到的,?并不代表全部; 7. 書寫代碼前,?考慮并提高樣式重復(fù)使用率; 8. 充分利用?html?自身屬性及樣式繼承原理減少代碼量,?比如:

  • 這兒是標(biāo)題列表2010-09-15
定義?ul.list li{position:relative} ul.list li span{position:absolute; right:0}即可實(shí)現(xiàn)日期居右顯示 9. 樣式表中中文字體名,?請(qǐng)務(wù)必轉(zhuǎn)碼成?unicode?碼,?以避免編碼錯(cuò)誤時(shí)

17、亂碼; 10. 背景圖片請(qǐng)盡可能使用sprite技術(shù),減小http請(qǐng)求,考慮到多人協(xié)作開發(fā),sprite按模塊制作; 11. 使用?table?標(biāo)簽時(shí)(盡量避免使用?table?標(biāo)簽),?請(qǐng)不要用?width/ height/cellspacing/cellpadding?等?table 屬性直接定義表現(xiàn),?應(yīng)盡可能的利用?table?自身私有屬性分離結(jié)構(gòu)與表現(xiàn),?如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing?及?cellpadding?的?css?控 制 方 法?:table{border:0;margin:0;bord

18、er-collapse:collapse;} table th, table td{padding:0;} , base.css?文件中我會(huì)初始化表格樣式) 12.?杜絕使用兼容ie8; 13.?用png圖片做圖片時(shí),要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果,請(qǐng)為?ie6?單獨(dú)定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod

19、=crop,src=’img/bg.png’); 14.?避免兼容性屬性的使用,比如text-shadow||css3的相關(guān)屬性; 15.?減少使用影響性能的屬性,比如position:absolute||float; 16.?必須為大區(qū)塊樣式添加注釋,?小區(qū)塊適量注釋; 17.?代碼縮進(jìn)與格式:建議單行書寫,可根據(jù)自身習(xí)慣,后期優(yōu)化i會(huì)統(tǒng)一處理; 命名規(guī)則: 頭:header 內(nèi)容:content/container 尾:footer 導(dǎo)航:nav 側(cè)欄:sidebar 欄目:column頁面外圍控制整體布局寬度:wrapper左右中:left right center

20、登錄條:loginbar 標(biāo)志:logo 廣告:banner 頁面主體:main 熱點(diǎn):hot 新聞:news 下載:download 子導(dǎo)航:subnav 菜單:menu 子菜單:submenu搜索:search友情鏈接:friendlink頁腳:footer版權(quán):copyright滾動(dòng):scroll內(nèi)容:content標(biāo)簽頁:tab文章列表:list提示信息:msg小技巧:tips欄目標(biāo)題:title加入:joinus指南:guild服務(wù):service注冊(cè):regsiter狀態(tài):status投票:vote合作伙伴:partner (二)注釋的寫法:/* Footer

21、*/內(nèi)容區(qū) /* End Footer */ (三)id?的命名: (1)頁面結(jié)構(gòu) 容器: container 頁頭:header內(nèi)容:content/container頁面主體:main 頁尾:footer 導(dǎo)航:nav 側(cè)欄:sidebar 欄目:column頁面外圍控制整體布局寬度:wrapper左右中:left right center (2)導(dǎo)航 導(dǎo)航:nav主導(dǎo)航:mainbav子導(dǎo)航:subnav頂導(dǎo)航:topnav邊導(dǎo)航:sidebar左導(dǎo)航:leftsidebar右導(dǎo)航:rightsidebar 菜單:menu子菜單:submenu標(biāo)題: title

22、 摘要: summary (3)功能標(biāo)志:logo廣告:banner登陸:login登錄條:loginbar注冊(cè):regsiter搜索:search功能區(qū):shop標(biāo)題:title加入:joinus狀態(tài):status按鈕:btn滾動(dòng):scroll標(biāo)簽頁:tab文章列表:list提示信息:msg當(dāng)前的: current小技巧:tips 圖標(biāo): icon注釋:note指南:guild服務(wù):service熱點(diǎn):hot新聞:news下載:download投票:vote合作伙伴:partner友情鏈接:link版權(quán):copyright\ 基本樣式: /* CSS Document */ bod

23、y {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0;margin:0;} table,td,tr,th{font-size:12px;} li{list-style-type:none;} img{vertical-align:top;border:0;} ol,ul {list-style:none;

24、} h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}address,cite,code,em,th {font-weight:normal; font-style:normal;}.fB{font-weight:bold;} .f12px{font-size:12px;} .f14px{font-size:14px;} .left{float:left;} .right{float:right;} a {color:#2b2b2b; text-decoration:none;} a:visited {text-deco

25、ration:none;} a:hover {color:#ba2636;text-decoration:underline;}a:active {color:#ba2636;} 重定義的最先,偽類其次,自定義最后,便于自己和他人閱讀! 不同瀏覽器上字號(hào)保持一致,字號(hào)建議用點(diǎn)數(shù)?pt?和像素?px?來定義,pt?一般使用中文宋體的?9pt?和?11pt,px?一般使用中文宋體?12px?和?14.7px?這是經(jīng)過優(yōu)化的字號(hào),黑體字或者宋體字加粗時(shí),一般選用?11pt?和14.7px?的字號(hào)比較合適。中英文混排時(shí),我們盡可能的將英文和數(shù)字定義為?verdana?和?arial?兩種字體。

26、 2.4 html?書寫規(guī)范 1.?網(wǎng)頁制作細(xì)節(jié)?---- head?區(qū)代碼規(guī)范 head?區(qū)是指?HTML?代碼的和之間的內(nèi)容。必須加入的標(biāo)簽 a)?公司版權(quán)注釋?b)?網(wǎng)頁顯示字符集 簡體中文: 繁體中文: 英 語: c)?網(wǎng)頁制作者信息 4. d) ?網(wǎng)站簡介 5. e) ?搜索關(guān)鍵字 6. f) ?網(wǎng)頁的?css?規(guī)范 7. g) ?網(wǎng)頁標(biāo)題 可以選擇加入的標(biāo)簽 a)?設(shè)定網(wǎng)頁的到期時(shí)間。一旦網(wǎng)頁過期,必須到服務(wù)器上重新調(diào)閱。

27、TA HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">b)?禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容。 c)?用來防止別人在框架里調(diào)用你的頁面。 d)?自動(dòng)跳轉(zhuǎn)。

28、QUIV="Content-Type" CONTENT="text/html; charset=utf-8">

29、ref="../css/style.css" rel="stylesheet" type="text/css"> xxxxxxxxxxxxxxxxxx ?5?指時(shí)間停留?5?秒e)?網(wǎng)頁搜索機(jī)器人向?qū)?。用來告訴搜索機(jī)器人哪些頁面需要索引,哪些頁面不需要索引。 CONTENT?的參數(shù)有?all,none,index,noindex,follow,nofollow。默認(rèn)是?all。 6. f) ?收藏

30、夾圖標(biāo)? 7. g) ?所有的?javascript?的調(diào)用盡量采取外部調(diào)用. h)?附標(biāo)簽: 標(biāo)簽不屬于?head?區(qū),這里強(qiáng)調(diào)一下,為了保證瀏覽器的兼容性,必須設(shè)置頁面背景 2.?網(wǎng)頁制作細(xì)節(jié)?----?字體 1.?在設(shè)定字體樣式時(shí)對(duì)于文字字號(hào)樣式和行間距應(yīng)必須使用?CSS?樣式表。禁止在頁面中出現(xiàn)

31、??標(biāo)記。 2.在網(wǎng)頁中中文應(yīng)首選使用宋體。英文和數(shù)字首選使用?verdana?和?arial?兩種字體。一般使用中文宋體的9pt和11pt?或12px和14.7px這是經(jīng)過優(yōu)化的字號(hào),黑體字或者宋體字加粗時(shí),一般選用11pt和14.7px的字號(hào)比較合適。 3.?為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能,在一段完整的文字中請(qǐng)盡量不要使用
?來人工干預(yù)分段。 4.不同語種的文字之間應(yīng)該有一個(gè)半角空格,但避頭的符號(hào)之前和避尾的符號(hào)之后除外,漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn),英文字母和數(shù)字周圍的括號(hào)應(yīng)該使用半角括號(hào)。 5.?請(qǐng)不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個(gè)的 也盡量少使用

32、全角空格(英文字符集下,全角空格會(huì)變成亂碼),空白應(yīng)該盡量使用?text-indent, padding, margin, hspace, vspace以及透明的?gif?圖片來實(shí)現(xiàn)。 6.?行距建議用百分比來定義,常用的兩個(gè)行距的值是?line-height:120%/150%. 7.?排版中我們經(jīng)常會(huì)遇到需要進(jìn)行首行縮進(jìn)的處理,不要使用 或者全角空格來達(dá)到效果,規(guī)范的做法是在樣式表中定義?p { text-indent: 2em; }?然后給每一段加上?

標(biāo)記,注意,一般情況下,請(qǐng)不要省略

?結(jié)束標(biāo)記 。 3.?網(wǎng)頁制作細(xì)節(jié)?----?鏈接 1.?網(wǎng)站中的鏈接路徑全部采用

33、相對(duì)路徑,一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名,如我們不必這樣:?而應(yīng)該這樣:,所有內(nèi)頁指向首頁的鏈接寫成 2.?在瀏覽器里,當(dāng)我們點(diǎn)擊空鏈接時(shí),它會(huì)自動(dòng)將當(dāng)前頁面重置到首端,從而影響用戶正常的閱讀內(nèi)容,我們用代碼“javascript:void(null)”代替原來的“#”標(biāo)記 4.?網(wǎng)頁制作細(xì)節(jié)?----?表格 1px?表格?style="border-collapse: collapse" 實(shí)例如下:

34、lspacing="0" width="32" height="32" style="border-collapse:collapse" bordercolor="#000000" cellpadding="0">

設(shè)置亮、暗邊框顏色表格有亮邊框(bordercolorlight)和暗邊框(bordercolordark)兩個(gè)屬性可以對(duì)表格樣式設(shè)置。 在

35、寫?

?互相嵌套時(shí),嚴(yán)格按照的規(guī)范,對(duì)于單獨(dú)的一個(gè)
來說,
對(duì)齊,
?縮進(jìn)兩個(gè)半角空格,?中如果還有嵌套的表格,也縮進(jìn)兩個(gè)半角空格,如果?結(jié)束標(biāo)記應(yīng)該與? 而應(yīng)該是這樣的: 這是因?yàn)闉g覽器認(rèn)為換行相當(dāng)于一個(gè)半角空格,以上不規(guī)范的寫法相當(dāng)于無意

36、中增加一個(gè)半角空格,如果確實(shí)有必要增加一個(gè)半角空格,也應(yīng)該這樣寫:

一個(gè)網(wǎng)頁要盡量避免用整個(gè)一張大表格,所有的內(nèi)容都嵌套在這個(gè)大表格之內(nèi),因?yàn)闉g覽器在解釋頁面的元素時(shí),是以表格為單位逐一顯示,如果一張網(wǎng)頁是嵌套在一個(gè)大表格之內(nèi),那么很可能造成的后果就是,當(dāng)瀏覽者敲入網(wǎng)址,他要先面對(duì)一片空白很長時(shí)間,然后所有的網(wǎng)頁內(nèi)容同時(shí)出現(xiàn)。如果必須這樣做,請(qǐng)使用?標(biāo)記,以便能夠使這個(gè)大表格分塊顯示 5.?網(wǎng)頁制作細(xì)節(jié)?----?下載速度 首頁?Flash?網(wǎng)頁大小應(yīng)限定在?200K?以下,盡可能的使用

37、矢量圖形和?Action?來減小動(dòng)畫大小。非首頁靜態(tài)頁面含圖片大小應(yīng)限定在?70K?左右,盡可能的使用背景顏色替換大塊同色圖片。 6.?網(wǎng)頁制作細(xì)節(jié)?---- include asp?標(biāo)準(zhǔn)寫法? jsp?標(biāo)準(zhǔn)寫法?<%@ include file="../inc/index_top..jsp" %> 7.?網(wǎng)頁制作細(xì)節(jié)?----Alt和Title 都是提示性語言標(biāo)簽,請(qǐng)注意它們之間的區(qū)別。在我們?yōu)g覽網(wǎng)頁時(shí),當(dāng)鼠標(biāo)停留在圖片對(duì)象或文字鏈接上時(shí),在鼠標(biāo)的右下角有時(shí)會(huì)出現(xiàn)一個(gè)提示信息框。對(duì)目標(biāo)進(jìn)行一定的注釋說

38、明。在一些場合,它的作用是很重要的。 alt?用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。用法如下:

文字

文字給圖片提示 8.?網(wǎng)頁制作細(xì)節(jié)?----?緩存 網(wǎng)頁不會(huì)被緩存 HTM網(wǎng)頁 ASP網(wǎng)頁 Response.Expires = -1Response.ExpiresAbsolute = Now() - 1Response.cachecontrol = "no-cache" 9.?網(wǎng)頁制作細(xì)節(jié)?----?瀏覽器兼容性 創(chuàng)建站點(diǎn)時(shí),應(yīng)該明白訪問者可能使用各種?Web?瀏覽器。在已知的其他設(shè)計(jì)限制下,盡可能將站點(diǎn)設(shè)計(jì)為具有最大的瀏覽器兼容性。 目前使用的?Web?瀏覽器有二十多種,大多數(shù)已發(fā)行了多個(gè)版本。即使您只針對(duì)使用?Netscape Navigator和?Mic

40、rosoft Internet Explorer?的大多數(shù)?Web?用戶,但您應(yīng)明確并不是每個(gè)人都在使用這兩種瀏覽器的最新版本。您的站點(diǎn)越復(fù)雜(在布局、動(dòng)畫、多媒體內(nèi)容和交互方面),跨瀏覽器兼容的可能性就越小。例如,并非所有的瀏覽器都可以運(yùn)行?JavaScript。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示,但比起有效地使用圖形、布局和交互的頁面,這樣的頁面在美感上可能要差得多。所以,應(yīng)盡量在最佳效果設(shè)計(jì)和最大瀏覽器兼容性設(shè)計(jì)之間取得平衡。 所有的?HTML?標(biāo)簽的屬性都要用單引號(hào)或者雙引號(hào)括起,即我們應(yīng)該寫??而不 是?.

41、10.?圖片處理細(xì)節(jié)?---- banner 全尺寸?banner?為?468X60px,半尺寸?banner?為?234X60px,小?banner?為?88X31px。另外?120X90,120X60?也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸。全尺寸?banner?不超過?14K。普遍的banner?尺寸?760X100,750X120,468X60,468X95,728X90,585X140次級(jí)頁的?pip?尺寸?360X300,336X280 游標(biāo):100X100?或?120X120 11.?圖片處理細(xì)節(jié)?---- LOGO?的國際標(biāo)準(zhǔn)規(guī)范 為了便于?INTERNET?上信息的傳播,一個(gè)統(tǒng)一的國際

42、標(biāo)準(zhǔn)是需要的。實(shí)際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)。其中關(guān)于網(wǎng)站的?LOGO,目前有三種規(guī)格: 88*31?這是互聯(lián)網(wǎng)上最普遍的?LOGO?規(guī)格。 120*60?這種規(guī)格用于一般大小的?LOGO。 120*90?這種規(guī)格用于大型?LOGO。 12.?圖片處理細(xì)節(jié)?----?頁面修飾圖片處理圖片經(jīng)過優(yōu)化以加快下載的速度,有較佳的視覺空間效果,用圖要與頁面風(fēng)格、頁面內(nèi)容相符;制作精美,細(xì)節(jié)處理得當(dāng)。 2.5 JavaScript書寫規(guī)范 1.?書寫過程中,?每行代碼結(jié)束必須有分號(hào);?原則上所有功能均根據(jù)XXX項(xiàng)目需求原生開發(fā),?以避免網(wǎng)上down?下來的代碼造成的代碼污染(沉冗代碼?||

43、?與現(xiàn)有代碼沖突?|| ...); 2. 庫引入:?原則上僅引入?jQuery?庫,?若需引入第三方庫,?須與團(tuán)隊(duì)其他人員討論決定; 3. 變量命名:?駝峰式命名.?原生?JavaScript?變量要求是純英文字母,?首字母須小寫,?如?iTaoLun; jQuery變量要求首字符為'_',?其他與原生JavaScript?規(guī)則相同,?如:_iTaoLun;?另,?要求變量集中聲明,避免全局變量. 4. 類命名:?首字母大寫,?駝峰式命名.?如?ITaoLun; 5. 函數(shù)命名:?首字母小寫駝峰式命名.?如?iTaoLun(); 6. 命名語義化,?盡可能利用英文單詞或其縮寫;

44、7. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩??比如?eval() & innerText; 8. 后期優(yōu)化中, JavaScript?非注釋類中文字符須轉(zhuǎn)換成?unicode?編碼使用,?以避免編碼錯(cuò)誤時(shí)亂碼顯 示; 9. 代碼結(jié)構(gòu)明了,?加適量注釋.?提高函數(shù)重用率; 10. 注重與html分離,減小reflow,注重性能. 2.6?圖片規(guī)范 1. 所有頁面元素類圖片均放入?img?文件夾,?測試用圖片放于?img/demoimg?文件夾; 2. 圖片格式僅限于?gif || png || jpg; 3. 命名全部用小寫英文字母?||?數(shù)字?|| _?的組合,其中不得

45、包含漢字?||?空格?||?特殊字符;盡量用易懂 的詞匯,?便于團(tuán)隊(duì)其他成員理解;?另,?命名分頭尾兩部分,?用下劃線隔開,?比如?ad_left01.gif || btn_submit.gif; 4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量,?以減少加載時(shí)間; 5. 盡量避免使用半透明的?png?圖片(若使用,?請(qǐng)參考?css?規(guī)范相關(guān)說明); 6. 運(yùn)用?css sprite?技術(shù)集中小的背景圖或圖標(biāo),?減小頁面?http?請(qǐng)求,?但注意,?請(qǐng)務(wù)必在對(duì)應(yīng)的?sprite psd?源 圖中劃參考線,?并保存至?img?目錄下. 2.7?注釋規(guī)范 1. html?注釋

46、:?注釋格式?, '--'只能在注釋的始末位置,不可置入注釋文字區(qū)域; 2. css?注釋:?注釋格式?/*這兒是注釋*/; 3. JavaScript?注釋,?單行注釋使用'//這兒是單行注釋' ,多行注釋使用?/*?這兒有多行注釋?*/; 2.8?瀏覽器兼容性?CSS hack 一、標(biāo)識(shí)區(qū)別: 區(qū)別?IE6,IE7,IE8,FF。 1. IE?都能識(shí)別* ;?標(biāo)準(zhǔn)瀏覽器(如?FF)不能識(shí)別*; 2. IE6能識(shí)別*,但不能識(shí)別?!important; IE6在樣式前面加_3. IE7能識(shí)別*,也能識(shí)別!important;4.IE8能識(shí)別\9例如:ba

47、ckground:red \9; 5. firefox?不能識(shí)別*,但能識(shí)別!important; 1.IE6和?firefox?的區(qū)別: background:orange;*background:blue;意思就是火狐瀏覽器的背景顏色是橙色,而?IE?瀏覽器的背景色是藍(lán)色. 2. IE6和?IE7的區(qū)別: background:green !important;background:blue;意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍(lán)色 3. IE7和?FF?的區(qū)別: background:orange; *background:green;意思指的是:火狐瀏覽

48、器的背景顏色是橙色,而?IE7的背景顏色是綠色 4. FF,IE7,IE6的區(qū)別: background:orange; *background:green !important; *background:blue; 意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而?IE6瀏覽器的顏色是藍(lán)色. 二、實(shí)踐建議 (1).?開發(fā)平臺(tái)的選擇 在?Firefox?上編寫?CSS,?同時(shí)兼容其他瀏覽器的.?這樣做肯定會(huì)比在?IE?做好再到別的瀏覽器兼容來得容易,?因?yàn)?IE?對(duì)老標(biāo)準(zhǔn)支持還是很不錯(cuò)的,?而?IE?的一些特有功能人家卻不支持.?所以推薦以Firefox?結(jié)合?F

49、irebug?擴(kuò)展作為平臺(tái)。 (2). CSS Hack?的順序 使用?Firefox?作為平臺(tái),?只要代碼寫得夠標(biāo)準(zhǔn),?其實(shí)要?Hack?的地方不會(huì)很多的, IE?以外的瀏覽器幾乎都不會(huì)有問題,?所以可以暫時(shí)忽略, 順序如下:Firefox -> IE6 -> IE7 ->?其他(3). Hack?的方法 說到方法有兩種,?一種是在不同文件中處理,?另一種則是在同一個(gè)文件中處理.?其實(shí)作用是相同的,只是出發(fā)點(diǎn)不一樣而已. 1.?同一文件中處理. 如: id="bgcolor"的控件要在?IE6中顯示藍(lán)色, IE7中顯示綠色, Firefox?等其他瀏覽器中顯示紅色。 IE6不認(rèn)

50、?!important,也不認(rèn)?*+html.所以?IE6只能是?blue. IE7認(rèn)?!important,也認(rèn)?*+html,優(yōu)先度: (*+html + !important) > !important > +html. IE7可以是?red,blue?和?green,但?green?的優(yōu)先度最高. Firefox?和其他瀏覽器都認(rèn)?!important. !important?優(yōu)先, Firefox?可以是?red?和?blue,但?red?優(yōu)先度高.上述的優(yōu)先符號(hào)均是?CSS3標(biāo)準(zhǔn)允許的,其他瀏覽器也還有其他的?Hack?方法,但我迄今還沒遇到過Firefox?正常, IE?以外的其他瀏覽器不正常的情況,所以無可分享.只要代碼規(guī)范,相信這種情況的發(fā)生應(yīng)該是很罕見?(JavaScript?除外). 2.?不同文件中處理. 為什么同一文件中可以處理還要寫在多個(gè)文件里面針對(duì)不同的瀏覽器?這是為了欺騙?W3C的驗(yàn)證工具,其實(shí)只需要兩個(gè)文件,一個(gè)是針對(duì)所有瀏覽器的,一個(gè)只為?IE?服務(wù).將所有符合?W3C?的代碼寫到一個(gè)里面去,而一些?IE?中必須的,又不能通過?W3C?驗(yàn)證的代碼?(如: cursor:hand;)放到另一個(gè)文件中,再用下面的方法導(dǎo)入.

溫馨提示:
1: 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2: 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3.本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 裝配圖網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

相關(guān)資源

更多
正為您匹配相似的精品文檔

copyright@ 2023-2025  zhuangpeitu.com 裝配圖網(wǎng)版權(quán)所有   聯(lián)系電話:18123376007

備案號(hào):ICP2024067431號(hào)-1 川公網(wǎng)安備51140202000466號(hào)


本站為文檔C2C交易模式,即用戶上傳的文檔直接被用戶下載,本站只是中間服務(wù)平臺(tái),本站所有文檔下載所得的收益歸上傳人(含作者)所有。裝配圖網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)上載內(nèi)容本身不做任何修改或編輯。若文檔所含內(nèi)容侵犯了您的版權(quán)或隱私,請(qǐng)立即通知裝配圖網(wǎng),我們立即給予刪除!

中沒有任何嵌套的表格,?處于同一行,不要換行,如我們注意在源代碼中不應(yīng)有這樣的代碼:
  1. <input id="lz7bn"></input>

    <kbd id="lz7bn"></kbd>

    <strong id="lz7bn"><blockquote id="lz7bn"><listing id="lz7bn"></listing></blockquote></strong>
    <input id="lz7bn"><ruby id="lz7bn"><listing id="lz7bn"></listing></ruby></input>