??绔???褰?
-
-
-
- 1 ??浠跺?藉??瑙???
-
- a. HTML???藉??????
- b. ?劇?????藉??????
- c. javascript???藉??????
- d. ?ㄦ??璇?瑷???浠跺?藉??????
- 2 ??浠跺???句?缃?
- 3 css 涔???瑙???
- 4 html涔???瑙???
-
- 1.缃?椤靛?朵?缁??? ---- head?轟唬??瑙???
- 2.缃?椤靛?朵?缁??? ---- 瀛?浣?
- 3.缃?椤靛?朵?缁??? ---- ?炬??/li>
- 4.缃?椤靛?朵?缁??? ---- 琛ㄦ??/li>
- 5.缃?椤靛?朵?缁??? ---- 涓?杞介??搴?/li>
- 6.缃?椤靛?朵?缁??? ---- include
- 7.缃?椤靛?朵?缁??? ---- Alt??Title
- 8.缃?椤靛?朵?缁??? ---- 缂?瀛?
- 9.缃?椤靛?朵?缁??? ---- 娴?瑙??ㄥ?煎?規??/li>
- 10.?劇??澶???缁??? ---- banner
- 11.?劇??澶???缁??? ---- LOGO???介??????瑙???
- 12.?劇??澶???缁??? ---- 椤甸??慨楗闆?劇??澶???
- 5 JavaScript涔???瑙???
- 6 ?劇??瑙???
- 7 娉ㄩ??瑙???
- 8 娴?瑙??ㄥ?煎?規??CSS hack
-
-
澹版??锛?璇ユ??妗ｄ?浠ｈ〃??搴?????瑙???锛?濡???涓?瀵規????涓????????版?矽?鋒????
1 ??浠跺?藉??瑙???
??浠跺??绉扮?涓??ㄥ??????辨??瀛?姣????闆????涓???绾跨??缁???锛??朵腑涓?寰?????姹?瀛???绌烘?煎???規??瀛?绗??
?藉??????????瀵兼???充???浣垮?浣???宸卞??宸ヤ?缁???姣?涓?涓??????藉??逛究????瑙ｆ??涓?涓???浠剁????涔?锛?浜???褰???浠??ㄦ??浠跺す涓?浣跨?ㄢ??????绉版??渚??????戒護?訛???涓?绉?澶х被????浠惰?藉??????ㄤ?璧鳳?浠ヤ究??浠??ユ?俱??淇??廣???挎????璁＄??璐?杞介??绛?绛???浣???
a. HTML???藉??????
寮???浠剁?涓?浣跨??ndex.htm index.html index.asp??浠跺??锛?灏???锛?
??瀛?椤靛?藉????????棣???搴?璇ヤ互?????????辮??缈昏??????涓???璇?涓哄??绉般??渚?濡?锛?
?充???浠? \ aboutus
淇℃????棣? \ feedback
浜??? \ product
濡?????????绉闆???澶???骞朵?濂戒互?辨????璇??藉??锛???缁?涓?浣跨?ㄨ?ユ??????绉版?奸?蟲???奸?崇??棣?瀛?姣?琛ㄧず锛?
姣?涓?涓???褰?涓?搴?璇ュ????涓?涓?缂虹????html ??浠訛???浠跺??缁?涓???ndex.htm index.html index.asp锛?
b. ?劇?????藉??????
?劇??????绉闆??涓哄ご灏句袱?ㄥ??锛??ㄤ???绾塊??寮?锛?澶撮?ㄥ??琛ㄧず姝ゅ?劇????澶х被?ц川
渚?濡?锛?骞垮??????蹇?????????????绛?绛???
?劇疆?ㄩ〉?㈤《?ㄧ??骞垮????瑁?楗闆?炬?绛??挎?瑰艦???劇??????锛? banner
??蹇??х???劇??????涓猴? logo
?ㄩ〉???浣?缃?涓??哄??骞朵?甯????炬?ョ??灏??劇????浠?????涓?button
?ㄩ〉?????涓?涓?浣?缃?杩?缁??虹?幫??ц川?稿?????炬?ユ???????劇????浠?????锛? menu
瑁?楗扮?ㄧ???х????浠?????锛? pic
涓?甯??炬?ヨ〃绀烘??棰????劇????浠?????锛? title
??渚?锛?banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg
榧?????搴??????劇???藉??瑙???涓??劇????+_+on/off"??
渚?濡?锛?menu1_on.gif menu1_off.gif
c. javascript???藉??????
渚?濡?锛?骞垮???＄??javascript??浠跺??涓?ad.js 寮瑰?虹???ｇ??javascript??浠跺??涓?pop.js
d. ?ㄦ??璇?瑷???浠跺?藉??????
浠ユ?ц川_??杩幫???杩闆??浠ユ??澶?涓???璇?锛??ㄢ??_????寮?锛??ц川涓?????璇ラ〉?㈠?姒?瑕???
??渚?锛?register_form.asp register_post.asp topic_lock.asp
2 ??浠跺???句?缃?
| ??浠跺す | 瀛??劇????浠?/th> |
|---|---|
| cn | 涓???HTML??浠?/td> |
| zn | ?辨??HTML??浠?/td> |
| flash | flash??浠?/td> |
| images | ?劇????浠?/td> |
| imagestudio | psd婧???浠?/td> |
| flashstudio | flash婧???浠?/td> |
| inc | include??浠?/td> |
| library | DW搴???浠?/td> |
| media | 澶?濯?浣???浠?/td> |
| project | 宸ョ?椤圭????浠?/td> |
| temp | 瀹㈡?峰??濮?璧??? |
| js | JavaScript???? |
| css | CSS??浠?/td> |
3 css 涔???瑙???
?烘??????锛?
CSS?峰???缁???涓?绫夥???瀹?涔??峰??????闆??涔?HTML?峰????炬?ョ?舵???峰???
-
??瀹?涔??? CSS ?峰?锛??ㄤ?瀹???缃?椤典腑灞??ㄧ???峰?璁懼?????峰??? ??.??+???稿??峰???????杩扮????璇???缂╁????渚?锛??? .shadow ??
??瀛??峰??峰??? ??.no??+??瀛??封??+??琛?璺???+??棰??茬緝????渚?锛??? .no12 ?? ???? .no12-24 ??
2.???闆??涔?宸叉????HTML??绛炬?峰?锛?褰卞???ㄩ?ㄧ??琚?璁懼????绛炬?峰?锛??ㄤ?缁?涓?缃?椤典腑??涓???绛劇???峰?瀹?涔????峰?????HTML??绛鋸??渚?锛?hr { border: 1px dotted #333333 }
-
?炬?ヤ????舵??璁懼???規???峰?锛?褰卞??琚?浣跨?ㄦ???峰??哄??涓????炬?ャ??
璇ユ?峰???娉???2绉?锛? a.nav:link nav.a:link 绗?涓?绉????戒慨楗???绛句腑锛?绗?浜?绉???浠ヤ慨楗版??????????a??绛劇???朵???绛俱??
椤甸?㈠?????峰???杞藉?椤葷?ㄩ?炬?ユ?瑰?
娉ㄦ??缁???锛?
- ??浣?寮???????宸? ?規????涓?妯″??, ???舵?規??椤甸?㈢?鎬技绋?搴? 浜?????濂藉ぇ浣?妗??舵??浠? ?辯??ss??浠?ase.css, ??浣?寮???杩?绋?涓?, 姣?涓?椤甸?㈣?峰?″??借?寮??? 姝ゆ??浠跺????reset??澶撮?ㄥ??ㄦ?峰?, 姝ゆ??浠朵???????淇???
- class涓?id??浣跨?? id????涓???骞舵???剁駭??, class????浠ラ??澶???骞舵??瀛?绾х??, ??浠?d浠?浣跨?ㄥ?ㄥぇ??妯″??涓?, class???ㄥ?ㄩ??澶?浣跨?ㄧ??楂???瀛?绾т腑; id????涓??芥???辨??????妗??舵??浠舵?跺?藉????, 涓?avaScript棰????╁?????ゅ?;
- 涓?avaScript棰????╁?????藉??, 璇蜂互 js_ 璧峰?, 姣?濡?: js_hide, js_show;
- class涓?id?藉??: 澶х??妗??跺?藉??姣?濡?header/footer/wrapper/left/right.?朵??峰???绉扮?卞????辨?? & ?闆?? & _ ?ョ????藉??, 濡?i_comment, fontred, width200; ?垮??浣跨?ㄤ腑???奸?? 灏介??浣跨?ㄧ????????璇?缁???; ?諱?, ?藉??瑕?璇?涔???, 绠?????.
-
瑙???lass涓?id?藉??
a, ??杩?浠?灞???娉?瑙??? b, ???剁駭??绱?id/class?藉???ㄥ???藉??
c, ??澶?浣跨?ㄧ??楂????藉??, 璇蜂互??宸變唬?峰??涓???绾胯搗濮?, 姣?濡?i_clear;
- css灞??т功??椤哄?, 寤鴻???靛驚 甯?灞?瀹?浣?灞??р??>??韬?灞??р??>????灞??р??>?朵?灞??? 姝ゆ?″???規????韬?涔???涔???, 浣?灏介??淇?璇???绫誨??у???ㄤ?璧? 灞??у??涓? 甯?灞?瀹?浣?灞??т富瑕?????: margin??padding??float锛?????clear锛???position锛??稿??? top,right,bottom,left锛???display??visibility??overflow绛?锛???韬?灞??т富瑕?????: width & height & background & border; ????灞??т富瑕?????锛?font??color??text-align??text-decoration??text-indent绛?锛??朵?灞??у????: list-style(??琛ㄦ?峰?)??vertical-vlign??cursor??z-index(灞???椤哄?) ??zoom绛?.???????虹??杩?浜?灞??у??????甯哥?ㄥ?扮??, 骞朵?浠ｈ〃?ㄩ??
- 涔???浠ｇ????, ????骞舵??楂??峰???澶?浣跨?ㄧ??;
- ?????╃??tml??韬?灞??у???峰?缁ф?垮??????灏?浠ｇ????, 姣?濡?:
瀹?涔?ul.list li{position:relative} ul.list li span{position:absolute; right:0}
?沖??瀹??版?ユ??灞??蟲?劇ず
9. ?峰?琛ㄤ腑涓???瀛?浣???, 璇峰?″?杞?????unicode??, 浠ラ?垮??缂?????璇??朵貢??;
10. ?????劇??璇峰敖???戒嬌??prite????, ??灏?http璇鋒?, ?????闆?浜哄??浣?寮???, sprite??妯″???朵?;
11. 浣跨??able??绛炬??灏介???垮??浣跨??able??绛?, 璇蜂?瑕???idth/ height/cellspacing/cellpadding绛?table灞??х?存?ュ??涔?琛ㄧ?? 搴?灏藉???界???╃??able??韬?绉???灞??у??绂葷???涓?琛ㄧ?? 濡?thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing??cellpadding??css?у?舵?規?: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css??浠朵腑??浼???濮???琛ㄦ?兼?峰?)
12. ??ng?劇?????劇???? 瑕?姹??劇???煎?涓?ng-8?煎?,??ng-8瀹??ㄥ獎???劇??璐ㄩ?????朵腑????????????, 璇蜂負ie6????瀹?涔?????:
background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=??img/bg.png??);
13. ?垮???煎?規?у??х??浣跨?? 姣?濡?text-shadow || css3???稿?沖???
14. ??灏?浣跨?ㄥ獎???ц?界??灞??? 姣?濡?position:absolute || float ;
15. 蹇?椤諱負澶у?哄???峰?娣誨??娉ㄩ??, 灏??哄??????娉ㄩ??;
?藉??瑙???锛?
澶達?header
??瀹癸?content/container
灏撅?footer
瀵艱??锛?nav
渚ф??锛?sidebar
????锛?column
椤甸?㈠??存?у?舵?翠?甯?灞?瀹藉害锛?wrapper
宸??充腑锛?left right center
?誨??★?loginbar
??蹇?锛?logo
骞垮??锛?banner
椤甸??富浣?锛?main
???癸?hot
?伴?夥?news
涓?杞斤?download
瀛?瀵艱??锛?subnav
????锛?menu
瀛?????锛?submenu
??绱??search
?????炬?ワ?friendlink
椤佃??锛?footer
????锛?copyright
婊????scroll
??瀹癸?content
??绛鵑〉锛?tab
??绔???琛??list
??绀轟俊??锛?msg
灏???宸э?tips
??????棰?锛?title
???ワ?joinus
????锛?guild
???★?service
娉ㄥ??锛?regsiter
?舵??锛?status
??绁??vote
??浣?浼?浼達?partner
(浜?)娉ㄩ??????娉?:
(涓?)id???藉??:
(1)椤甸?㈢???
瀹瑰?? container
椤靛ご锛?header
??瀹癸?content/container
椤甸??富浣?锛?main
椤靛熬锛?footer
瀵艱??锛?nav
渚ф??锛?sidebar
????锛?column
椤甸?㈠??存?у?舵?翠?甯?灞?瀹藉害锛?wrapper
宸??充腑锛?left right center
(2)瀵艱??
瀵艱??锛?nav
涓誨?艱??锛?mainbav
瀛?瀵艱??锛?subnav
椤跺?艱??锛?topnav
杈瑰?艱??锛?sidebar
宸??艱??锛?leftsidebar
?沖?艱??锛?rightsidebar
????锛?menu
瀛?????锛?submenu
??棰?: title
??瑕?: summary
(3)???? ??蹇?锛?logo
骞垮??锛?banner
?婚??锛?login
?誨??★?loginbar
娉ㄥ??锛?regsiter
??绱??search
???藉?猴?shop
??棰?锛?title
???ワ?joinus
?舵??锛?status
????锛?btn
婊????scroll
??绛鵑〉锛?tab
??绔???琛??list
??绀轟俊??锛?msg
褰?????: current
灏???宸э?tips
?炬??: icon
娉ㄩ??锛?note
????锛?guild
???★?service
???癸?hot
?伴?夥?news
涓?杞斤?download
??绁??vote
??浣?浼?浼達?partner
?????炬?ワ?link
????锛?copyright\
4 html涔???瑙???
1.缃?椤靛?朵?缁??? ---- head?轟唬??瑙???
a)????娉ㄩ??
b)缃?椤墊?劇ず瀛?绗???
绠?浣?涓???锛?<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
绻?浣?涓???锛?<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
??璇?锛?<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
c)缃?椤靛?朵???淇℃??
d)缃?绔?绠?浠?
e)??绱㈠?抽??瀛?
f)缃?椤電??css瑙???
g)缃?椤墊??棰?
??浠ラ???╁???ョ????绛? a)璁懼??缃?椤電???版???堕?淬??涓????椤佃???锛?蹇?椤誨?版???″?ㄤ????拌?????
b)绂?姝㈡?瑙??ㄤ????版?虹??缂?瀛?涓?璋???椤甸?㈠??瀹廣??
c)?ㄦ?ラ?叉?㈠??浜哄?ㄦ??堕??璋??ㄤ???椤甸????
d)???ㄨ煩杞???
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http锛?//www.yahoo.com"> 5???堕?村????5绉?
e)缃?椤墊??绱㈡?哄?ㄤ漢??瀵箋???ㄦ?ュ??璇???绱㈡?哄?ㄤ漢??浜?椤甸?㈤??瑕?绱㈠?锛???浜?椤甸?????瑕?绱㈠???
<META NAME="robots" CONTENT="none">
CONTENT?????版??all,none,index,noindex,follow,nofollow??榛?璁ゆ??all??
f)?惰??澶瑰?炬??
g)??????javascript??璋??ㄥ敖??????澶??ㄨ???
h)????绛撅?
??绛句?灞?浜?head?猴?杩???寮鴻?涓?涓?锛?涓轟?淇?璇?娴?瑙??ㄧ???煎?規?э?蹇?椤昏?劇疆椤甸?㈣??????body bgcolor="#FFFFFF"??
2.缃?椤靛?朵?缁??? ---- 瀛?浣?
1?? ?ㄨ?懼??瀛?浣??峰??跺?逛???瀛?瀛??鋒?峰???琛??磋?搴?蹇?椤諱嬌??SS?峰?琛ㄣ??绂?姝㈠?ㄩ〉??腑?虹??font size=???璁般??
2???ㄧ?椤典腑涓???搴?棣???浣跨?ㄥ??浣????辨?????闆??棣???浣跨??erdana ??arial 涓ょ?瀛?浣???涓???浣跨?ㄤ腑??瀹?浣???9pt ??11pt ??12px ??14.7px 杩???缁?杩?浼?????瀛??鳳?榛?浣?瀛?????瀹?浣?瀛???绮??訛?涓???????1pt ??14.7px ??瀛??鋒??杈???????
3?? 涓轟???澶х?搴??????ユ?瑙??ㄨ???ㄦ?????????斤??ㄤ?娈靛???寸????瀛?涓?璇峰敖??涓?瑕?浣跨??r?㈣?绗??ヤ漢宸ュ共棰???娈點??
4??涓???璇?绉?????瀛?涔??村?璇ユ??涓?涓???瑙?绌烘?鹼?浣??垮ご??绗??蜂??????垮熬??绗??蜂????ゅ?锛?姹?瀛?涔??寸?????矽??ㄥ?ㄨ????癸??辨??瀛?姣????闆???ㄥ?寸?????峰?璇ヤ嬌?ㄥ??瑙????楓??
5?? 璇蜂?瑕??ㄧ?椤典腑杩?缁??虹?闆?浜?涓?涓??? 涔?灏介??灏?浣跨?ㄥ?ㄨ?绌烘?鹼??辨??瀛?绗???涓?锛??ㄨ?绌烘?間?????涔辯??锛?锛?绌虹?藉?璇ュ敖??浣跨??text-indent, padding, margin, hspace, vspace 浠ュ????????gif ?劇???ュ???般??
6??琛?璺?寤鴻???ㄧ?懼??姣??ュ??涔?锛?甯哥?ㄧ??涓や釜琛?璺????兼??line-height:120%/150%.
7?? ????涓???浠?缁?甯鎬????伴??瑕?杩?琛?棣?琛?缂╄???澶???锛?涓?瑕?浣跨???????ㄨ?绌烘?兼?ヨ揪?版????锛?瑙???????娉????ㄦ?峰?琛ㄤ腑瀹?涔? p { text-indent: 2em; } ?跺??缁?姣?涓?娈靛??涓?
??璁幫?娉ㄦ??锛?涓??????典?锛?璇蜂?瑕?????/p 缁?????璁???
3.缃?椤靛?朵?缁??? ---- ?炬??/h5>
1??缃?绔?涓????炬?ヨ礬寰??ㄩ?ㄩ???ㄧ?稿?矽礬寰?锛?涓????炬?ュ?版??涓???褰?涓???缂虹????浠剁???炬?ヨ礬寰?涓?蹇????ㄥ??锛?濡???浠?涓?蹇?杩??鳳?a href=??aboutus/index.htm?? ??搴?璇ヨ??鳳?a href=??aboutus/??锛???????椤墊????棣?椤電???炬?ュ????
2?? ?ㄦ?瑙??ㄩ??锛?褰???浠??瑰?葷┖?炬?ユ?訛?瀹?浼????ㄥ?褰???椤甸?㈤??缃??伴?绔?锛?浠???褰卞???ㄦ?鋒?ｅ父????璇誨??瀹癸???浠??ㄤ唬????javascript:void(null)??浠ｆ?垮???ョ????#????璁?
4.缃?椤靛?朵?缁??? ---- 琛ㄦ??/h5>
瀵逛???????涓?涓?table?ヨ?達?table tr瀵歸?锛?td缂╄?涓や釜??瑙?绌烘?鹼?td 涓?濡???杩???宓?濂???琛ㄦ?鹼?table涔?缂╄?涓や釜??瑙?绌烘?鹼?濡???td涓?娌℃??浠諱?宓?濂???琛ㄦ?鹼?/td缁?????璁闆?璇ヤ? td澶?浜???涓?琛?锛?涓?瑕??㈣?锛?
搴?璇ュ?涓?锛?
5.缃?椤靛?朵?缁??? ---- 涓?杞介??搴?/h5>
棣?椤?lash 缃?椤靛ぇ灏?搴???瀹???200K 浠ヤ?锛?灏藉???界??浣跨?ㄧ?㈤???懼艦??Action?ュ??灏??ㄧ?誨ぇ灏?????棣?椤甸????椤甸?㈠???劇??澶у?搴???瀹???70K 宸??籌?灏藉???界??浣跨?ㄨ????棰??叉?挎?㈠ぇ?????插?劇????
6.缃?椤靛?朵?缁??? ---- include
jsp ??????娉? <%@ include file="??inc/index_top??sp" %>7.缃?椤靛?朵?缁??? ---- Alt??Title
?芥????绀烘?ц??瑷???绛撅?璇鋒敞??瀹?浠?涔??寸???哄????
?ㄦ??浠?娴?瑙?缃?椤墊?訛?褰?榧????????ㄥ?劇??瀵矽薄????瀛??炬?ヤ??訛??ㄩ??????充?瑙????朵??虹?頒?涓???绀轟俊??妗???瀵圭????杩?琛?涓?瀹???娉ㄩ??璇存?????ㄤ?浜??哄??锛?瀹???浣??ㄦ??寰???瑕?????
alt ?ㄦ?ョ??劇???ユ??绀虹????Title?ㄦ?ョ??炬?ユ??瀛?????????瀛???绀虹????
?ㄦ?濡?涓?锛?
<p Title="缁??炬?ユ??瀛???绀?>??瀛?</p>
<a href="#" Title="缁??炬?ユ??瀛???绀?>??瀛?</a>
<img src="?劇??.gif" alt="缁??劇????绀?>
8.缃?椤靛?朵?缁??? ---- 缂?瀛?
缃?椤典?浼?琚?缂?瀛?
HTM缃?椤?
9.缃?椤靛?朵?缁??? ---- 娴?瑙??ㄥ?煎?規??/h5>
??寤虹???規?訛?搴?璇ユ???借?塊???????戒嬌?ㄥ??绉? Web 娴?瑙??ㄣ???ㄥ凡?ョ???朵?璁捐?￠???朵?锛?灏藉???藉?绔??矽?捐?′負?鋒????澶х??娴?瑙??ㄥ?煎?規?с??
????浣跨?ㄧ?? Web 娴?瑙??ㄦ??浜???澶?绉?锛?澶у??闆凡??琛?浜?澶?涓????????充嬌?ㄥ????瀵逛嬌??Netscape Navigator ?? Microsoft Internet Explorer ??澶у???Web ?ㄦ?鳳?浣??ㄥ???纭?骞朵???姣?涓?浜洪?藉?ㄤ嬌?ㄨ?涓ょ?娴?瑙??ㄧ?????扮??????
?ㄧ??绔??矽?澶???锛??ㄥ?灞????ㄧ?彙??澶?濯?浣???瀹瑰??浜や??歸???锛?璺ㄦ?瑙??ㄥ?煎?圭?????芥?у氨瓒?灏???渚?濡?锛?骞堕????????娴?瑙??ㄩ?藉??浠ヨ?琛?JavaScript??涓?浣跨?ㄧ?規??瀛?绗???绾?????椤甸?㈡??璁歌?藉??ㄤ換浣?娴?瑙??ㄤ腑姝ｇ‘?劇ず锛?浣?姣?璧鋒?????頒嬌?ㄥ?懼艦??甯?灞???浜や???椤甸???杩??風??椤甸?㈠?ㄧ???涓????借?宸?寰?澶?????浠ワ?搴?灏介???ㄦ??浣蟲????璁捐?″????澶ф?瑙??ㄥ?煎?規?ц?捐?′??村??寰?骞寵 ??
??????HTML ??绛劇??灞??ч?借??ㄥ??寮??鋒??????寮??鋒??璧鳳??蟲??浠?搴?璇ュ?? a href=??url?? ??涓? ?? a href=url
10.?劇??澶???缁??? ---- banner
?ㄥ昂瀵?anner涓?68X60px锛???灏哄??anner涓?34X60px锛?灏?banner涓?8X31px??
???120X90锛?120X60涔???灏??炬????????灏哄?搞???ㄥ昂瀵?anner涓?瓒?杩?14K??
??????banner灏哄??60X100锛?750X120锛?468X60锛?468X95锛?728X90锛?585X140
娆＄駭椤電??pip灏哄??60X300锛?336X280
娓告??:100X100??120X120
11.?劇??澶???缁??? ---- LOGO???介??????瑙???
涓轟?渚誇?INTERNET涓?淇℃????浼???锛?涓?涓?缁?涓????介??????????瑕?????瀹???涓?宸茬???浜?杩??風??涓??村????????朵腑?充?缃?绔???LOGO锛???????涓?绉?瑙??鹼?
8831 杩???浜???缃?涓?????????LOGO瑙??箋??
12060 杩?绉?瑙??肩?ㄤ?涓???澶у???LOGO??
120*90 杩?绉?瑙??肩?ㄤ?澶у??LOGO??
12.?劇??澶???缁??? ---- 椤甸??慨楗闆?劇??澶???
?劇??缁?杩?浼???浠ュ??蹇?涓?杞界????搴???杈?浣崇??瑙?瑙?绌洪?存????锛??ㄥ?捐?涓?椤甸?㈤??箋??椤甸?㈠??瀹圭?哥????朵?绮劇?锛?缁???澶???寰?褰???5 JavaScript涔???瑙???
- 涔???杩?绋?涓?, 姣?琛?浠ｇ??缁???蹇?椤繪?????? ????涓????????藉???規??XXX椤圭????姹?????寮???, 浠ラ?垮??缃?涓?down涓??ョ??浠ｇ????????浠ｇ??姹℃??(娌???浠ｇ?? || 涓??版??浠ｇ???茬?? || ??;
- 搴?寮???寮???Query搴?, ?朵?绗?涓??瑰?绛?
- ?????藉??: 椹煎嘲寮??藉??. ????JavaScript????瑕?姹???绾??辨??瀛?姣?, 棣?瀛?姣?椤誨???, 濡?iTaoLun; jQuery????瑕?姹?棣?瀛?绗?負??_??, ?朵?涓?????JavaScript 瑙????稿??, 濡?: _iTaoLun; ?? 瑕?姹???????涓?澹版??, ?垮???ㄥ?????.
- 绫誨?藉??: 棣?瀛?姣?澶у??, 椹煎嘲寮??藉??. 濡? ITaoLun;
- ?芥?闆?藉??: 棣?瀛?姣?灏???椹煎嘲寮??藉??. 濡?iTaoLun();
- ?藉??璇?涔???, 灏藉???藉?╃?ㄨ?辨????璇????剁緝??;
- 灏介???垮??浣跨?ㄥ???ㄥ?煎?規?у??娑???璧?婧????規???灞??? 姣?濡?eval() & innerText;
- ????浼???涓?, JavaScript??娉ㄩ??绫諱腑??瀛?绗?』杞??㈡??unicode缂???浣跨?? 浠ラ?垮??缂?????璇??朵貢???劇ず;
- 浠ｇ??缁?????浜?, ??????娉ㄩ??. ??楂??芥?伴???ㄧ??;
- 娉ㄩ??涓?html??绂? ??灏?reflow, 娉ㄩ???ц??
6 ?劇??瑙???
- ????椤甸?㈠??绱?绫誨?劇?????懼??mg??浠跺す, 娴?璇??ㄥ?劇???句?img/demoimg??浠跺す;
- ?劇???煎?浠???浜?gif || png || jpg;
- ?藉???ㄩ?ㄧ?ㄥ????辨??瀛?姣? || ?闆?? || _ ??缁???锛??朵腑涓?寰?????姹?瀛? || 绌烘??|| ?規??瀛?绗??灏介???ㄦ??????璇?姹?, 渚誇??㈤???朵???????瑙? ?? ?藉????澶村熬涓ら?ㄥ??, ?ㄤ???绾塊??寮?, 姣?濡?ad_left01.gif || btn_submit.gif;
- ?ㄤ?璇?瑙?瑙??????????典????╂??灏????劇???煎?涓??劇??璐ㄩ??, 浠ュ??灏???杞芥?堕??
- 灏介???垮??浣跨?ㄥ????????png?劇??(?ヤ嬌?? 璇峰????css瑙????稿?寵?存??);
- 杩???ss sprite??????涓?灏????????炬???炬??, ??灏?椤甸??ttp璇鋒?, 浣?娉ㄦ??, 璇峰?″??ㄥ?瑰???sprite psd婧??句腑??????绾? 骞朵?瀛???mg??褰?涓?.
7 娉ㄩ??瑙???
- html娉ㄩ??: 娉ㄩ???煎?
<!--杩??挎??娉ㄩ??-->
- css娉ㄩ??: 娉ㄩ???煎? /杩??挎??娉ㄩ??/;
- JavaScript娉ㄩ??, ??琛?娉ㄩ??浣跨?ㄢ??//杩??挎????琛?娉ㄩ???? ,澶?琛?娉ㄩ??浣跨??;
8 娴?瑙??ㄥ?煎?規??CSS hack
涓?????璇??哄??锛?
?哄??IE6,IE7,IE8,FF??
- IE?借?借????* ; ????娴?瑙???濡?FF)涓??借????*锛?
- IE6?借????*锛?浣?涓??借???? !important; IE6?ㄦ?峰????㈠??_
- IE7?借????*锛?涔??借????!important;
- IE8?借????\ 9 渚?濡?锛?background:red \9;
- firefox涓??借????*锛?浣??借????!important;
1锛?IE6??firefox???哄??锛?
background:orange;*background:blue;
????灏辨??????娴?瑙??ㄧ??????棰??叉??姗?????IE娴?瑙??ㄧ???????叉??????
2. IE6??IE7???哄??锛?
background:green !important;background:blue;
??????????:IE7??????棰??叉??缁胯??IE6??????棰??叉?????? 3. IE7??FF???哄??锛?
background:orange; *background:green;
??????????:????娴?瑙??ㄧ??????棰??叉??姗?????IE7??????棰??叉??缁胯?? 4. FF锛?IE7锛?IE6???哄??锛?
background:orange;
*background:green !important;
*background:blue;
??????????娴?瑙??ㄧ????????姗???IE7娴?瑙??ㄧ??????棰??叉??缁胯????IE6娴?瑙??ㄧ??棰??叉??????
浜???瀹?璺靛緩璁?
(1). 寮???骞沖?扮?????? ??Firefox 涓?缂???CSS, ???跺?煎?瑰?朵?娴?瑙??ㄧ??. 杩??峰????瀹?浼?姣???IE ??濂藉???闆????娴?瑙??ㄥ?煎?規?ュ?瀹規??, ??涓?IE 瀵矽??????????杩???寰?涓?????, ?? IE ??涓?浜??規?????戒漢瀹跺?翠?????. ??浠ユ?ㄨ??浠?Firefox 缁??? Firebug ?╁?浣?涓哄鈎?般??
(2). CSS Hack ??椤哄?
浣跨??Firefox 浣?涓哄鈎?? ??瑕?浠ｇ????寰?澶?????, ?跺??瑕? Hack ???版?逛?浼?寰?澶???, IE 浠ュ???娴?瑙??ㄥ??涔??戒?浼?????棰?, ??浠ュ??浠ユ???跺拷??
椤哄?濡?涓?锛?Firefox -> IE6 -> IE7 -> ?朵?
(3). Hack ???規?
璇村?版?規???涓ょ?, 涓?绉????ㄤ?????浠朵腑澶???, ???绉??????ㄥ??涓?涓???浠朵腑澶???. ?跺??浣??ㄦ???稿????, ?????哄???逛?涓??瘋??宸?
-
??涓???浠朵腑澶???.
濡?: id="bgcolor"???т歡瑕???IE6涓??劇ず???? IE7涓??劇ず缁胯?? Firefox绛??朵?娴?瑙??ㄤ腑?劇ず绾㈣?層??
Web前端開發規範手冊 IE6涓?璁?!important,涔?涓?璁?*+html.??浠?IE6???芥?? blue.
IE7璁?!important,涔?璁?+html,浼???搴? (+html + !important) > !important > +html. IE7??浠ユ?? red, blue?? green,浣? green??浼???搴???楂?.
Firefox???朵?娴?瑙??ㄩ?借??!important. !important浼???, Firefox??浠ユ?? red?? blue,浣? red浼???搴???.涓?杩扮??浼???绗??峰???? CSS3??????璁哥??,?朵?娴?瑙??ㄤ?杩????朵??? Hack?規?,浣???杩?浠?杩?娌￠???拌? Firefox姝ｅ父, IE浠ュ????朵?娴?瑙??ㄤ?姝ｅ父????????浠ユ??????浜?.??瑕?浠ｇ??瑙???,?鎬俊杩?绉????電??????搴?璇ユ??寰?缃?瑙? (JavaScript?ゅ?).
-
涓?????浠朵腑澶???.
涓轟?涔???涓???浠朵腑??浠ュ???杩?瑕????ㄥ?涓???浠堕???㈤??瀵逛?????娴?瑙???杩???涓轟?娆洪?? W3C??楠?璇?宸ュ???跺??????瑕?涓や釜??浠?涓?涓?????瀵規????娴?瑙??ㄧ??,涓?涓???涓?IE????灏?????绗??? W3C??浠ｇ?????頒?涓????㈠????涓?浜? IE涓?蹇?椤葷??,??涓??介??杩? W3C楠?璇???浠ｇ?? (濡?: cursor:hand;)?懼?闆???涓???浠朵腑,???ㄤ??㈢???規?瀵煎??
Web前端開發規範手冊