绗竴閮ㄥ垎HTML&CSS鏁寸悊绛旀1.浠�涔堟槸HTML5锛�
绛旓細HTML5鏄渶鏂扮殑HTML鏍囧噯銆�
娉ㄦ剰锛氳杩癏TML5鎺ㄥ嚭鐨勮璁＄洰鐨勶紝浠ュ強鐜板湪甯傚満鐨勪娇鐢ㄦ儏鍐碉紝娴忚鍣ㄦ敮鎸佹儏鍐电瓑銆傘�傘�傘��
璁捐鐩殑
HTML5鐨勮璁＄洰鐨勬槸涓轰簡鍦ㄧЩ鍔ㄨ澶囦笂鏀寔澶氬獟浣撱�傛柊鐨勮娉曠壒寰佽寮曡繘浠ユ敮鎸佽繖涓�鐐癸紝濡倂ideo銆乤udio鍜宑anvas 鏍囪銆侶TML5杩樺紩杩涗簡鏂扮殑鍔熻兘锛屽彲浠ョ湡姝ｆ敼鍙樼敤鎴蜂笌鏂囨。鐨勪氦浜掓柟寮忥紝鍖呮嫭锛�
路 鏂扮殑瑙ｆ瀽瑙勫垯澧炲己浜嗙伒娲绘��
路 鏂板睘鎬�
路 娣樻卑杩囨椂鐨勬垨鍐椾綑鐨勫睘鎬�
路 涓�涓狧TML5鏂囨。鍒板彟涓�涓枃妗ｉ棿鐨勬嫋鏀惧姛鑳�
1.HTML5涓粈涔堟槸涓嶅悓鐨勬柊鐨勮〃鍗曞厓绱犵被鍨嬶紵绛旓細鎻愮ず鏈湴楠岃瘉琛ㄥ崟闇�瑕佸啀澶栭潰娣诲姞form鏍囩鍖呰捣鏉ワ紝鎵嶈兘鏌ョ湅鏁堟灉
color
date
datetime-local
time
url
range
telephone
number
search
1.HTML5鐨勯〉闈㈢粨鏋勫悓HTML4鎴栬�呮洿鍓嶇殑HTML鏈変粈涔堝尯鍒紵绛旓細涓�涓吀鍨嬬殑WEB椤甸潰鍖呭惈澶撮儴锛岃剼閮紝瀵艰埅锛屼腑蹇冨尯鍩燂紝渚ц竟鏍忋�傜幇鍦ㄥ鏋滄垜浠兂鍦ㄥ湪HTML4鐨凥TML鍖哄煙涓憟鐜拌繖浜涘唴瀹癸紝鎴戜滑鍙兘瑕佷娇鐢―IV鏍囩銆�
浣嗘槸鍦℉TML5涓�氳繃涓鸿繖浜涘尯鍩熷垱寤哄厓绱犲悕绉颁娇浠栦滑鏇村姞娓呮櫚锛屼篃浣垮緱浣犵殑HTML鏇村姞鍙
浠ヤ笅鏄舰鎴愰〉闈㈢粨鏋勭殑HTML5鍏冪礌鐨勬洿澶氱粏鑺傦細锛堟敞鎰忎富瑕佽�冪殑鏄爣绛捐鎰忓寲锛�
锛氫唬琛℉TML鐨勫ご閮ㄦ暟鎹�
锛氶〉闈㈢殑鑴氶儴鍖哄煙
锛氶〉闈㈠鑸厓绱�
锛氳嚜鍖呭惈鐨勫唴瀹�
锛氫娇鐢ㄥ唴閮╝rticle鍘诲畾涔夊尯鍩熸垨鑰呮妸鍒嗙粍鍐呭鏀惧埌鍖哄煙閲�
锛氫唬琛ㄩ〉闈㈢殑渚ц竟鏍忓唴瀹�
1.鍝簺娴忚鍣ㄦ敮鎸丠TML5锛�绛旓細鍑犱箮鎵�鏈夌殑楂樼増鏈祻瑙堝櫒Safari锛孋hrome锛孎irefox锛孫pera锛孖E8浠ヤ笂閮芥敮鎸丠TML5
1.涓轰粈涔圚TML5閲岄潰鎴戜滑涓嶉渶瑕丏TD锛圖ocument Type Definition鏂囨。绫诲瀷瀹氫箟锛夛紵绛旓細HTML5娌℃湁浣跨敤SGML鎴栬�匵HTML锛屼粬鏄竴涓叏鏂扮殑涓滆タ锛屽洜姝や綘涓嶉渶瑕佸弬鑰僁TD锛屽浜嶩TML5锛屼綘浠呴渶鏀剧疆涓嬮潰鐨勬枃妗ｇ被鍨嬩唬鐮佸憡璇夋祻瑙堝櫒璇嗗埆杩欐槸HTML5鏂囨。鍗冲彲
1.HTML5鐨勭绾垮偍瀛橈紵绛旓細localStorage聽聽聽 闀挎湡瀛樺偍鏁版嵁锛屾祻瑙堝櫒鍏抽棴鍚庢暟鎹笉涓㈠け锛�
sessionStorage聽 鏁版嵁鍦ㄦ祻瑙堝櫒鍏抽棴鍚庤嚜鍔ㄥ垹闄ゃ��
1.娴忚鍣ㄦ槸鎬庝箞瀵笻TML5鐨勭绾垮偍瀛樿祫婧愯繘琛岀鐞嗗拰鍔犺浇鐨勫憿锛�绛旓細鍦ㄧ嚎鐨勬儏鍐典笅锛屾祻瑙堝櫒鍙戠幇html澶撮儴鏈塵anifest灞炴�э紝瀹冧細璇锋眰manifest鏂囦欢锛屽鏋滄槸绗竴娆¤闂產pp锛岄偅涔堟祻瑙堝櫒灏变細鏍规嵁 manifest鏂囦欢鐨勫唴瀹逛笅杞界浉搴旂殑璧勬簮骞朵笖杩涜绂荤嚎瀛樺偍銆傚鏋滃凡缁忚闂繃app骞朵笖璧勬簮宸茬粡绂荤嚎瀛樺偍浜嗭紝閭ｄ箞娴忚鍣ㄥ氨浼氫娇鐢ㄧ绾跨殑璧勬簮鍔犺浇椤甸潰锛岀劧鍚� 娴忚鍣ㄤ細瀵规瘮鏂扮殑manifest鏂囦欢涓庢棫鐨刴anifest鏂囦欢锛屽鏋滄枃浠舵病鏈夊彂鐢熸敼鍙橈紝灏变笉鍋氫换浣曟搷浣滐紝濡傛灉鏂囦欢鏀瑰彉浜嗭紝閭ｄ箞灏变細閲嶆柊涓嬭浇鏂囦欢涓殑璧� 婧愬苟杩涜绂荤嚎瀛樺偍銆�
绂荤嚎鐨勬儏鍐典笅锛屾祻瑙堝櫒灏辩洿鎺ヤ娇鐢ㄧ绾垮瓨鍌ㄧ殑璧勬簮銆�
1.璇锋弿杩颁竴涓媍ookies锛宻essionStorage 鍜� localStorage 鐨勫尯鍒紵锛�1锛塩ookie鍦ㄦ祻瑙堝櫒鍜屾湇鍔″櫒闂存潵鍥炰紶閫掞紝 sessionStorage鍜宭ocalStorage涓嶄細銆�
锛�2锛塻essionStorage鍜宭ocalStorage鐨勫瓨鍌ㄧ┖闂存洿澶с��
锛�3锛塻essionStorage鍜宭ocalStorage鏈夋洿澶氫赴瀵屾槗鐢ㄧ殑鎺ュ彛銆�
锛�4锛塻essionStorage鍜宭ocalStorage鍚勮嚜鐙珛鐨勫瓨鍌ㄧ┖闂淬��
1.椤甸潰鍙鎬э紙Page Visibility锛堿PI 鍙互鏈夊摢浜涚敤閫旓紵绛旓細鍦ㄩ〉闈㈣鍒囨崲鍒板叾浠栧悗鍙拌繘绋嬬殑鏃跺�欙紝鑷姩鏆傚仠闊充箰鎴栬棰戠殑鎾斁銆�
1.HTML5鐨刦orm濡備綍鍏抽棴鑷姩瀹屾垚鍔熻兘锛�绛旓細缁欎笉鎯宠鎻愮ず鐨刬nput鏄缃產utocomplete=off鍗冲彲銆�
1.涓�涓猟iv锛岃姹傚疄鐜板綋鍐呭杩囧皯鏃讹紝div鐨勬渶浣庨珮搴︿负200px锛屽綋鍐呭杈冨鏃讹紝div鐨勯珮搴﹁鍐呭鎾戝紑銆�绛旓細min-height:200px
1.瀹炵幇涓�涓竷灞�锛屽垎宸︿腑鍙充笁鏍忋�傚乏鏍忓浐瀹氬涓�200px锛屽彸鏍忓浐瀹�150px锛屼腑鏍忛殢灞忓箷瀹借嚜鍔ㄩ�傚簲銆傚啓鍑篽tml鍜宑ss銆�
#content{background:#ff6;}
#left,#right{width:200px;background:#fc0;float:left;}
#middle{float:left; width:100%;margin:0 -200px;}
#middle .inner{margin:0 200px;background:#ccc;}
#right{float:right;}
娉曚簩锛�
浣嶇疆涓嶈兘鎹�
css
*{
margin:0;
padding:0;
}
#left{
float:left;
width:200px;
height:100px;
background:paleturquoise;
}
#middle{
margin:0200px;
height:100px;
background:black;
}
#right{
float:right;
width:200px;
height:100px;
background:palevioletred;
}
娉曚笁锛�
涓嬮潰鏄痗ss鏍峰紡浠ｇ爜锛�
#main {float:left;width:100%;}
.content {margin:0 200px;height:100%;background:red;}
#left{float:left;width:200px;margin-left:-100%;background:blue;}
#right{float:left;width:200px;margin-left:-200px;background:green;}
ut锟斤拷锟絟锟斤拷锟�
1.a鏍囩鐨勫洓涓吉绫绘槸浠�涔堬紵濡備綍鎺掑簭锛熶负浠�涔堬紵鐖辨仺鍒嗘槑鍘熷垯: l v h a
link visited hover active
娉ㄩ噴锛氫负浜嗕骇鐢熼鏈熺殑鏁堟灉锛屽湪CSS 瀹氫箟涓紝a:hover 蹇呴』浣嶄簬 a:link 鍜� a:visited 涔嬪悗 !
娉ㄩ噴锛氫负浜嗕骇鐢熼鏈熺殑鏁堟灉锛屽湪CSS 瀹氫箟涓紝a:active 蹇呴』浣嶄簬 a:hover 涔嬪悗锛侊紒
娉ㄩ噴锛歅seudo-class锛堜吉绫伙級鐨勫悕绉板澶у皬鍐欎笉鏁忔劅銆�
娉ㄩ噴锛氫吉绫诲彲涓嶤SS 绫婚厤鍚堜娇鐢細
a.red:visited {color: #FF0000;}
CSS Syntax
濡傛灉涓婇潰杩欎釜渚嬪瓙涓殑閾炬帴宸茶闂繃锛岄偅涔堝畠浼氭樉绀轰负绾㈣壊銆�
1.濡備綍瀹炵幇娴姩鍏冪礌灞呬腑
鎴戞槸娴姩鐨�
鎴戜篃鏄眳涓殑
.box{
float:left;
position:relative;
left:50%;
}
p{
float:left;
position:relative;
right:50%;
1.宸茬煡涓�涓猟iv鍐呮湁涓�涓猧mg锛屼袱鑰呯殑楂樺害鍧囦笉鐭ラ亾锛屼絾鍥剧墖鐨勯珮搴︿竴瀹氬皬浜巇iv鐨勯珮搴︺�傜敤css瀹炵幇鍥剧墖鍦╠iv鍐呯殑鍨傜洿灞呬腑銆�鍙傝�冿細http://www.jb51.net/css/76120.html
http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"/>
.box{
/*闈濱E鐨勪富娴佹祻瑙堝櫒璇嗗埆鐨勫瀭鐩村眳涓殑鏂规硶*/
display:table-cell;
vertical-align:middle;
/*璁剧疆姘村钩灞呬腑*/
text-align:center;
/*閽堝IE鐨凥ack */
*display:block;
*font-size:175px;/*绾︿负楂樺害鐨�0.873锛�200*0.873绾︿负175*/
*font-family:Arial;/*闃叉闈瀠tf-8寮曡捣鐨刪ack澶辨晥闂锛屽gbk缂栫爜*/
width:200px;
height:200px;
border:1pxsolid#eee;
}
.boximg{
/*璁剧疆鍥剧墖鍨傜洿灞呬腑*/
vertical-align:middle;
}
1.HTML闈欐�侀〉闈㈠嚭鐜颁腑鏂囦贡鐮佸浣曡В鍐筹紵绛旓細
1.涓嬪垪鏍囩鏃㈡槸琛屽唴灞炴�ф爣绛惧張鍙互璁惧楂樼殑鏍囩鏄紵锛圖锛�A.div 聽聽聽 B. span 聽聽聽 C. inputD. imgE. h1
1.鐢ㄤ竴涓ゅ彞璇濊涓�涓嬩綘瀵光�滅洅妯″瀷鈥濊繖涓蹇电殑鐞嗚В锛屽拰瀹冮兘娑夊強鍒板摢浜沜ss灞炴�с��绛旓細缃戦〉璁捐涓父鍚殑灞炴�у悕锛氬唴瀹�(content)銆佸～鍏�(padding)銆佽竟妗�(border)銆佽竟鐣�(margin)锛� CSS鐩掑瓙妯″紡閮藉叿澶囪繖浜涘睘鎬с��
杩欎簺灞炴�ф垜浠彲浠ョ敤鏃ュ父鐢熸椿涓殑甯歌浜嬬墿鈥斺�旂洅瀛愪綔涓�涓瘮鍠绘潵鐞嗚В锛屾墍浠ュ彨瀹冪洅瀛愭ā寮忋��
CSS鐩掑瓙妯″瀷灏辨槸鍦ㄧ綉椤佃璁′腑缁忓父鐢ㄥ埌鐨凜SS鎶�鏈墍浣跨敤鐨勪竴绉嶆�濈淮妯″瀷銆�
1.澶栬竟璺濄�佸唴杈硅窛銆佽竟妗嗘湁鍑犵涔﹀啓褰㈠紡,鍒椾妇璇存槑銆�鍙傝�冿細http://wangye.huseoblog.com/cssdivhezi.html
1.鏈変笂涓嬩袱涓猟iv锛屼笂涓�涓猟iv 璁剧疆margin-bottom锛�10px锛涗笅涓�涓猟iv璁剧疆margin-top锛� 5px锛涢偅涔堜袱涓猟iv鏈�鍚庣殑闂磋窛鏄灏戯紵绛旓細10px
1.鍐欏嚭涓嬪垪CSS鍛戒护鐨勬渶绠�鍐欐硶{margin-left:20px; margin-bottom:50px; margin-right:20px; margin-top:20px;}绛旓細margin: 20px 20px 50px;
1.鎴戜滑鐢╤ack璋冨吋瀹规椂锛岀敤鍒板涓嬪懡浠� div{height锛�300px锛�*height锛�400px锛沖height锛�500px;}锛屽湪ie6閲宒iv鏄剧ず楂樺害鏄灏戯紝鐏嫄閲屾樉绀洪珮搴︽槸澶氬皯锛�绛旓細ie6:400px,聽聽聽聽聽 鐏嫄锛�300px;
1.涓夊眰宓屽鐢ㄥ湪浠�涔堝湴鏂规渶鍚堥�傦紝鏈変粈涔堜紭鐐广��绛旓細鏈夊渾瑙掕竟妗嗕笉鍥哄畾瀹藉害鍚屾椂鍏煎ie鐨勬椂鍊�
1.鑳屾櫙鍥惧悎骞剁敤鍦ㄤ粈涔堝湴鏂规渶閫傚悎锛屾湁浠�涔堜紭鐐广��绛�: 閫氬父褰撻亣鍒颁竴涓綉绔欒鍔犺浇澶ч噺icon(灏忓浘鏍�)鐨勬椂鍊欙紝鎴戜滑浼氭妸瀹冨悎骞舵垚sprite(鍥剧墖鎷兼帴)銆傜洰鐨勬槸涓轰簡鍑忓皯HTTP璇锋眰娆℃暟銆傝繖鏍峰仛鏃㈣兘鍑忓皯椤甸潰鍔犺浇鏃堕棿锛屽張鍙互鍑忚交鏈嶅姟鍣ㄧ殑璐熻浇
1.椤甸潰濡備綍鍦ㄦ祻瑙堝櫒閲岃揪鍒板眳涓紝骞朵笖宸﹀彸鑷�傚簲锛�绛旓細margin: 0 auto;
1.HTML5鐗堟湰绫诲瀷澹版槑鎬庝箞鍐欍�傛湁浠�涔堢敤锛�绛旓細
1.XHTML1.0鐗堟湰浣犵煡閬撲箞锛岃窡html5鐗堟湰鏈変粈涔堝尯鍒�绛�: XHTML 1.0 鏄� XML 椋庢牸鐨� HTML 4.01銆�
XHTML 1.1 涓昏鏄垵姝ヨ繘琛屼簡妯″潡鍖栥��
HTML5 鏄笅涓�浠� HTML锛屽彇浠� HTML 4.01銆�
W3C 鍘熸湰纭疄璁″垝鐢� XHTML 绯诲垪鏇夸唬 HTML 4.01锛屼絾 XHTML 绯诲垪瀹為檯涓婂彧娲诲埌浜� 1.1锛�1.1 鍜屽き鎶樼殑 1.2 宸茬粡浣撶幇鍑鸿繃鍒� XML 鐨勮抗璞★紝鑰� W3C 鐨勭悊鎯冲叾瀹炲湪鐤媯鐨� XHTML 2 韬笂锛屽綋鐒讹紝瀹冩病鑳借癁鐢燂級锛岃繕娌¤劚绂� HTML 4.01 鐨勯槾褰卞氨姝讳簡銆�
杩樻病绛塜HTML 鍏磋捣锛屽畠鐨勫湴浣嶅氨琚� HTML5 鍙栦唬浜嗐��
1.涔﹀啓ol锛寀l锛宼able鐨勫祵濂楄鑼�绛旓細http://www.5icool.org/a/201308/a2081.html
1.鍓嶇椤甸潰鏈夊摢涓夊眰鏋勬垚锛屽垎鍒槸浠�涔堬紵浣滅敤鏄粈涔堬紵绛�: 鍒嗘垚锛氱粨鏋勫眰銆佽〃绀哄眰銆佽涓哄眰銆�
缁撴瀯灞傜敱HTML 鎴� XHTML涔嬬被鐨勬爣璁拌瑷�璐熻矗鍒涘缓銆傛爣绛撅紝涔熷氨鏄偅浜涘嚭鐜板湪灏栨嫭鍙烽噷鐨勫崟璇嶏紝瀵圭綉椤靛唴瀹圭殑璇箟鍚箟鍋氬嚭浜嗘弿杩帮紝浣嗚繖浜涙爣绛句笉鍖呭惈浠讳綍鍏充簬濡備綍鏄剧ず鏈夊叧鍐呭鐨勪俊鎭�備緥濡傦紝P鏍囩琛ㄨ揪浜嗚繖鏍蜂竴绉嶈涔夛細鈥滆繖鏄竴涓枃鏈銆傗��
琛ㄧず灞傜敱CSS 璐熻矗鍒涘缓銆� CSS瀵光�滃浣曟樉绀烘湁鍏冲唴瀹光�濈殑闂鍋氬嚭浜嗗洖绛斻��
琛屼负灞傝礋璐ｅ洖绛斺�滃唴瀹瑰簲璇ュ浣曞浜嬩欢鍋氬嚭鍙嶅簲鈥濊繖涓�闂銆傝繖鏄� Javascript 璇█鍜� DOM涓诲鐨勯鍩熴��
1.img鐨刟lt鍜宼itle鏈変粈涔堝尯鍒紵绛�: alt 鏄浘鐗囧姞杞藉け璐ユ椂锛屾樉绀哄湪缃戦〉涓婄殑鏇夸唬鏂囧瓧锛� title 鏄紶鏍囨斁涓婇潰鏃舵樉绀虹殑鏂囧瓧
1.HTML浠ｇ爜鐨勪功鍐欒鑼冩湁鍝簺锛�绛�:https://segmentfault.com/a/1190000003229217
1.娴忚鍣ㄧ殑璋冭瘯宸ュ叿鏈夊摢浜涳紵閮芥湁浠�涔堝姛鑳斤紵绛�:http://www.cnblogs.com/Excellent/p/5368812.html
1.table鐨勫悎骞惰竟妗嗗睘鎬ф槸浠�涔堬紵璺ㄨ鏄粈涔堬紵璺ㄥ垪鏄粈涔堬紵绛�:鍚堝苟杈规:cellspacing, 璺ㄨ:rowspan, 璺ㄥ垪: colspan
1.CSS鏄粈涔堬紵鏈変粈涔堢敤澶勩��绛�: 灞傚彔鏍峰紡琛ㄦ槸涓�绉嶇敤鏉ヨ〃鐜癏TML锛堟爣鍑嗛�氱敤鏍囪璇█鐨勪竴涓簲鐢級鎴朮ML锛堟爣鍑嗛�氱敤鏍囪璇█鐨勪竴涓瓙闆嗭級绛夋枃浠舵牱寮忕殑璁＄畻鏈鸿瑷�銆�
CSS鐩墠鏈�鏂扮増鏈负CSS3锛屾槸鑳藉鐪熸鍋氬埌缃戦〉琛ㄧ幇涓庡唴瀹瑰垎绂荤殑涓�绉嶆牱寮忚璁¤瑷�銆傜浉瀵逛簬浼犵粺HTML鐨勮〃鐜拌�岃█锛孋SS鑳藉瀵圭綉椤典腑鐨勫璞＄殑浣嶇疆鎺掔増杩涜鍍忕礌绾х殑绮剧‘鎺у埗锛屾敮鎸佸嚑涔庢墍鏈夌殑瀛椾綋瀛楀彿鏍峰紡锛屾嫢鏈夊缃戦〉瀵硅薄鍜屾ā鍨嬫牱寮忕紪杈戠殑鑳藉姏锛屽苟鑳藉杩涜鍒濇浜や簰璁捐锛屾槸鐩墠鍩轰簬鏂囨湰灞曠ず鏈�浼樼鐨勮〃鐜拌璁¤瑷�銆侰SS鑳藉鏍规嵁涓嶅悓浣跨敤鑰呯殑鐞嗚В鑳藉姏锛岀畝鍖栨垨鑰呬紭鍖栧啓娉曪紝閽堝鍚勭被浜虹兢锛屾湁杈冨己鐨勬槗璇绘�с��
1.浣犵煡閬搇ess,sass杩欎簺涓滆タ涔堬紙灏忕背锛夛紱绛�: CSS 棰勫鐞嗗櫒鎶�鏈凡缁忛潪甯哥殑鎴愮啛锛岃�屼笖涔熸秾鐜板嚭浜嗚秺鏉ヨ秺澶氱殑 CSS 鐨勯澶勭悊鍣ㄦ鏋躲�傛渶涓烘櫘閬嶇殑涓夋 CSS 棰勫鐞嗗櫒妗嗘灦锛屽垎鍒槸 Sass銆丩ess CSS銆丼tylus銆侰SS 棰勫鐞嗗櫒鏄竴绉嶈瑷�鐢ㄦ潵涓� CSS 澧炲姞涓�浜涚紪绋嬬殑鐨勭壒鎬э紝鏃犻渶鑰冭檻娴忚鍣ㄧ殑鍏煎鎬ч棶棰橈紝渚嬪浣犲彲浠ュ湪 CSS 涓娇鐢ㄥ彉閲忋�佺畝鍗曠殑绋嬪簭閫昏緫銆佸嚱鏁扮瓑绛夊湪缂栫▼璇█涓殑涓�浜涘熀鏈妧宸э紝鍙互璁╀綘鐨� CSS 鏇磋绠�娲侊紝閫傚簲鎬ф洿寮猴紝浠ｇ爜鏇寸洿瑙傜瓑璇稿濂藉銆�
1.瑙ｉ噴W3C绛�: 涓囩淮缃戣仈鐩熷垱寤轰簬1994骞达紝鏄疻eb鎶�鏈鍩熸渶鍏锋潈濞佸拰褰卞搷鍔涚殑鍥介檯涓珛鎬ф妧鏈爣鍑嗘満鏋勩�傚埌鐩墠涓烘锛學3C宸插彂甯冧簡200澶氶」褰卞搷娣辫繙鐨刉eb鎶�鏈爣鍑嗗強瀹炴柦鎸囧崡锛�
濡傚箍涓轰笟鐣岄噰鐢ㄧ殑瓒呮枃鏈爣璁拌瑷�锛堟爣鍑嗛�氱敤鏍囪璇█涓嬬殑涓�涓簲鐢級銆佸彲鎵╁睍鏍囪璇█锛堟爣鍑嗛�氱敤鏍囪璇█涓嬬殑涓�涓瓙闆嗭級浠ュ強甯姪娈嬮殰浜哄＋鏈夋晥鑾峰緱Web鍐呭鐨勪俊鎭棤闅滅鎸囧崡锛圵CAG锛夌瓑锛�
鏈夋晥淇冭繘浜哤eb鎶�鏈殑浜掔浉鍏煎锛屽浜掕仈缃戞妧鏈殑鍙戝睍鍜屽簲鐢ㄨ捣鍒颁簡鍩虹鎬у拰鏍规湰鎬х殑鏀拺浣滅敤銆�
1.椤甸潰閲嶆瀯绛�: 缃戠珯閲嶆瀯涓嶆槸涓�绉嶆妧鏈紝涓嶆槸css+div锛屾洿涓嶆槸鏍囧噯锛岀綉绔欓噸鏋勬槸涓�绉嶆�濇兂锛屾槸涓�绉嶇悊蹇点��
寮曠敤WebReBuild.ORG聽鐨勮瘽锛氬綋鍓嶅浗鍐呯殑鍚岃鏅亶鐨勮涓猴細鎵�璋撶殑缃戠珯閲嶆瀯灏辨槸鈥淒IV+CSS鈥濓紝鎯虫硶鍥虹劧鏋佸害灞�闄愩�備絾涔熶笉鏄彟涓�閮ㄥ垎鐨勪汉璁や负鏄�淴HTML+CSS鈥濓紝鍥犱负鈥淴HTML+CSS鈥濆彧鏄〉闈㈤噸鏋勩�傜湡姝ｇ殑缃戠珯閲嶆瀯鐞嗗簲鍖呭惈缁撴瀯銆佽涓恒�佽〃鐜颁笁灞傛鐨勫垎绂讳互鍙婁紭鍖栵紝琛屽唴鍒嗗伐浼樺寲锛屼互鍙婁互鎶�鏈笌鏁版嵁銆佷汉鏂囦负涓诲鐨勪氦浜掍紭鍖栫瓑銆�
閲嶆瀯缃戠珯鍏堥噸鏋勪汉锛岄噸鏋勪綘鐨勭悊蹇碉紝涓嶈鍏夊厜杩芥眰鎶�鏈紝杩芥眰杩樺師璁捐绋匡紝杩芥眰娴忚鍣ㄧ殑鍏煎鎬э紝閲嶈鐨勬槸鍩虹鍜岀悊蹇点�傚綋浣犵湡姝ｄ簡瑙ｄ粈涔堟槸缃戠珯閲嶆瀯鐨勬椂鍊欑綉绔欓噸鏋勪篃灏辩湡姝ｅ紑濮嬩簡銆�
1.div+css涓巘able甯冨眬鐨勬湁浣曞尯鍒紵绛�: div+css:甯冨眬绠�娲佹槑浜嗭紝浣跨敤鏂逛究锛岀浉瀵逛簬琛ㄦ牸鏉ヨ鏇村鏄撴悳绱㈢殑鍒帮紒浼樺寲绋嬪害楂樼偣銆備笉鏄撳嚭鐜伴敊璇垨鑰呬笉鍙帶锛佹牱寮忕箒澶氾紝鏄撴帶鏄撲慨鏀广��
Table: 琛ㄦ牸甯冨眬涓嶅缓璁娇鐢紝杩欎釜绠楁槸蹇琚窐姹扮殑涓�绉嶅竷灞�鏂瑰紡銆傚竷灞�涓嶅鏄撹皟鏁村拰瑙勫垝銆傚鏄撳け鎺с�傚ぇ閮ㄥ垎閮戒笉鑳戒娇鐢ㄥお澶氭牱寮忋��
1.鍚庡彴缂栫爜鏍煎紡涓嶆槸UTF-8鎬庝箞鍔烇紵绛�: 缁熶竴缂栫爜鏍煎紡
1.涓�涓狢SS鏂囦欢濡傛灉杩囧ぇ鐨勮瘽锛屽姞杞戒細寰堟參锛屽崰鐢ㄨ繃澶у甫瀹斤紝濡傛灉瑙ｅ喅锛�绛�: 1.鍘婚櫎绌烘牸鍜屾崲琛�,鍘嬬缉css浠ｇ爜;
2.灏介噺浣跨敤绠�鍐�, 缂╁噺浠ｇ爜;
3.灏哻ss鏂囦欢鍒嗘垚澶氫釜鏂囦欢
1.input鏍囩瀛樺湪鐨勫吋瀹归棶棰橈紵绛�:褰搃nput鏍囩鍦╰ype涓簍ext鏃讹紝鍦‵irefox鍜孲afari涓殑榛樿楂樺害涓�22鍍忕礌锛堝寘鎷笂涓嬭竟妗嗭級瀹藉害涓�146鍍忕礌锛堝寘鎷乏鍙宠竟妗嗭級锛岃�屽湪IE涓殑榛樿楂樺害涓�24鍍忕礌锛岃�屽搴﹀嵈鍜孎irefox鍜孲afari鏄竴鑷寸殑锛屼篃鏄�146鍍忕礌銆�
褰搃nput鏍囩鍦╰ype涓簊ubmit鏃讹紝鍦‵irefox涓殑楂樺害涓�23鍍忕礌锛堝寘鎷槾褰憋級锛屽搴︿负75鍍忕礌銆傚湪Safari涓珮搴︿负21鍍忕礌锛屽搴︿负73鍍忕礌锛屽湪IE涓珮搴︿负涓�25鍍忕礌銆佸搴︿负73鍍忕礌銆�
1.input涓璬isabled涓巖eadonly鏈変綍鍖哄埆锛�绛�: Readonly鍙拡瀵筰nput(text / password)鍜宼extarea鏈夋晥锛岃�宒isabled瀵逛簬鎵�鏈夌殑琛ㄥ崟鍏冪礌閮芥湁鏁堬紝鍖呮嫭select, radio, checkbox, button绛夈��
琛ㄥ崟鍏冪礌鍦ㄤ娇鐢ㄤ簡disabled鍚庯紝褰撴垜浠皢琛ㄥ崟浠OST鎴朑ET鐨勬柟寮忔彁浜ょ殑璇濓紝杩欎釜鍏冪礌鐨勫�间笉浼氳浼犻�掑嚭鍘伙紝鑰� readonly浼氬皢璇ュ�间紶閫掑嚭鍘�(杩欑鎯呭喌鍑虹幇鍦ㄦ垜浠皢鏌愪釜琛ㄥ崟涓殑textarea鍏冪礌璁剧疆涓篸isabled鎴杛eadonly锛屼絾鏄痵ubmit button鍗存槸鍙互浣跨敤鐨�)銆�
1.input灞炴�ф湁鍝簺锛�1.position灞炴�у�硷紝濡傚彧鍐欎簡absolute锛屾槸鐩稿璋佸畾鐨勪綅锛�绛�:绂诲畠鏈�杩戠殑宸茬粡瀹氫綅鐨勭埗鍏冪礌
1.CSS閫夋嫨鍣ㄤ腑div.ps鏄粈涔堟剰鎬�绛�: 绫诲悕鏄痯s鐨刣iv
1.浣跨敤display:inline-block鍦↖E6涓笉鑳芥甯告樉绀猴紝濡備綍瑙ｅ喅锛�绛�:鏂规硶1锛氱洿鎺ヨ鍧楀厓绱犺缃负鍐呰仈瀵硅薄鍛堥�掞紙璁剧疆灞炴�isplay:inline锛夛紝鐒跺悗瑙﹀彂鍧楀厓绱犵殑 layout锛堝锛歾oom:1 绛夛級銆傚吋瀹瑰悇娴忚鍣ㄧ殑浠ｇ爜濡備笅锛歞iv {display:inline-block;*display:inline; *zoom:1;...}
鏂规硶2锛氬厛浣跨敤display:inline-block 灞炴�цЕ鍙戝潡鍏冪礌锛岀劧鍚庡啀瀹氫箟 display:inline锛岃鍧楀厓绱犲憟閫掍负鍐呰仈瀵硅薄锛堜袱涓猟isplay 瑕佸厛鍚庢斁鍦ㄤ袱涓� CSS 鏍峰紡澹版槑涓墠鏈夋晥鏋滐紝杩欐槸 IE 鐨勪竴涓粡鍏� bug锛屽鏋滃厛瀹氫箟浜哾isplay:inline-block锛岀劧鍚庡啀灏� display 璁惧洖 inline 鎴� block锛宭ayout 涓嶄細娑堝け锛夈�備唬鐮佸涓嬶紙鈥︿负鐪佺暐鐨勫叾浠栧睘鎬у唴瀹癸級锛� div {display:inline-block;...}div {*display:inline;}
1.png鍥剧墖鏈夊嚑绉嶆牸寮�绛�:png鏈�3绉嶄笉鍚屾繁搴︾殑鏍煎紡锛歱ng8銆乸ng24銆乸ng321.display鐨勫睘鎬у�兼湁鍝簺锛�2.鏍囩鐨勯殣钘忥紙display:none鍜寁isibility:hidden锛夌殑鍖哄埆绛旓細visibility:hidden闅愯棌锛屼絾鍦ㄦ祻瑙堟椂淇濈暀浣嶇疆锛汣SS display:none瑙嗕负涓嶅瓨鍦紝涓斾笉鍔犺浇锛�
1.鍦ㄩ〉闈㈠唴灞呬腑锛堟按骞冲拰鍨傜洿鏂瑰悜锛�*3绛旓細鍨傜洿灞呬腑:姘村钩鏂瑰悜缁欑埗绾ц缃畉ext-align;浣跨敤宸﹀彸margin鍊间负auto
绔栫洿鏂瑰悜:璁剧疆line-height鍊间负鍏冪礌楂樺害;璁剧疆鍏冪礌缁濆瀹氫綅,top:0;bottom:0 margin:auto, 0;
1.濡備綍璁╅摼鎺ヨ闂繃鍚庣殑hover娑堝け姝ｅ父鎯呭喌涓�: 鐖辨仺鍘熷垯: l 鈥�> v 鈥�> h 鈥� > a
涓轰簡杈惧埌涓婅堪鏁堟灉,鏀瑰彉椤哄簭鍗冲彲: l 鈥�> h 鈥�> v 鈥�> a
1.Ie6涓负浠�涔堜笉鑳借缃�1px楂樼殑div绛旓細鍦ㄧ敤DIV鏋勫缓缃戦〉鐨勬椂鍊欙紝鏈夋椂鍊欓渶瑕佺殑楂樺害寰堝皬锛岃繖鏃跺�欏氨鍙兘浼氬嚭鐜伴棶棰橈紝鍥犱负锛孖E6涓婦IV鏈変釜榛樿鐨勯珮搴︼紝澶х害10-12px銆傚綋浣犺瘯鍥惧畾涔変竴涓珮搴﹀皬浜庤繖涓粯璁ゅ�肩殑 div 鐨勬椂鍊欙紝IE 浼氬浐鎵х殑璁や负杩欎釜灞傜殑楂樺害涓嶅簲璇ュ皬浜庡瓧浣撶殑琛岄珮銆�
瑙ｅ喅鍔炴硶锛�
绗竴锛氬畾涔夎DIV瀛椾綋澶у皬銆�
渚嬪:
绗簩锛�
鐩存帴闄愬埗鑷姩璋冩暣
1.div涓唴瀹规病鏈夋拺寮�楂樺害鐨勫師鍥狅紝鎬庝箞瑙ｅ喅鐖朵翰div娌℃湁璁剧疆楂樺害
瀛╁瓙div璁剧疆楂樺害浜�,
姝ゆ椂,鐖朵翰鐨勯珮搴︽槸闈犲瀛愭拺璧锋潵鐨�
浣嗘槸褰撳瀛愭诞鍔ㄤ簡,
鐖朵翰鐨勯珮搴︿篃灏辨病浜�
姝ゆ椂闇�瑕佺粰瀛╁瓙澧炲姞涓�涓厔寮焏iv,骞朵笖clear:both,闂瀹岀編瑙ｅ喅
1.鍙屽�嶈竟璺漛ug杩炴帴鍦板潃:http://www.360doc.com/content/14/1224/20/21166337_435502508.shtml
鍦ㄤ骇鐢熷弻杈硅窛bug鐨勫厓绱犲唴,澧炲姞涓�琛屽睘鎬�:display:inline;
绗簩绉嶅姙娉�:閲囩敤cssHack:margin-left:20px;_margin-left:20px;
1.濡備綍璁ヾiv姘村钩鎺掑垪1:娴姩
2.瀹氫綅
1.瀹氫箟id鍚嶅拰class鍚嶆湁浠�涔堝尯鍒�浠庢蹇典笂鏉ヨ:
id鏄厛鎵惧埌缁撴瀯/鍐呭锛屽啀缁欏畠瀹氫箟鏍峰紡锛沜lass鏄厛瀹氫箟濂戒竴绉嶆牱寮忥紝鍐嶅缁欏涓粨鏋�/鍐呭銆�
浠庢牱寮忔晥鏋滀笂鏉ヨ:
id鐨勪紭鍏堢骇瑕佹瘮class楂樺嚭涓�涓眰娆�
html涓笉绠℃湁鍑犱釜id,
鍦╟ss鑾峰彇鍒扮殑灏辨槸鎵�鏈夌殑
浣嗘槸鍦╦s涓�氳繃document鑾峰彇鍒扮殑鏄涓�涓�
1.CSS鏈夊嚑绉嶅紩鍏ユ柟寮忥紵link鍜孈import鏈変粈涔堝尯鍒�link鏄疿HTML鏍囩锛岄櫎浜嗗姞杞紺SS澶栵紝杩樺彲浠ュ畾涔塕SS绛夊叾浠栦簨鍔★紱@import灞炰簬CSS鑼冪暣锛屽彧鑳藉姞杞紺SS銆�
link寮曠敤CSS鏃讹紝鍦ㄩ〉闈㈣浇鍏ユ椂鍚屾椂鍔犺浇锛汙import闇�瑕侀〉闈㈢綉椤靛畬鍏ㄨ浇鍏ヤ互鍚庡姞杞姐��
link鏄疿HTML鏍囩锛屾棤鍏煎闂锛汙import鏄湪CSS2.1鎻愬嚭鐨勶紝浣庣増鏈殑娴忚鍣ㄤ笉鏀寔銆�
1.鍦↖E涓粰div璁綿isplay:inline-block;瀹冭繕浼氬崰涓�琛屼笉浼�?绛旓細ie涓嶆敮鎸乨isplay灞炴��
1.濡備綍鍒朵綔娓愬彉鏁堟灉锛堜笉浣跨敤CSS3锛�杩欓噷鐨勫叧閿偣鏄痟1 { position: relative } 鍜宧1 span { position: absolute }
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
鏄殑锛屽氨杩欎簺锛屼綘宸茬粡鎼炲畾浜�
1.涓婁笅涓や釜div鍒嗗埆璁剧疆浜唌argin-bottom鍜宮argin-top锛屼袱涓猟iv涔嬮棿鐨勮窛绂绘槸澶氬皯锛�浼氬彂鐢熻瀺鍚堟晥鏋�,璺濈灏辨槸鏁板�兼瘮杈冨ぇ鐨勯偅涓�
1.闄や簡ul銆乷l杩樼敤浠�涔堝啓鍒楄〃dl dt dd
1.濡傛灉涓嶅啓澶撮儴澹版槑浼氭湁浠�涔堥棶棰�閫氬父html DOCTYPE澹版槑鏄繀椤荤殑锛岃�屼笖浣跨敤div+css鏇存槸蹇呬笉鍙皯锛屽鏋滅己灏戞垨閿欒document灏嗕細閫犳垚浣犵殑CSS澶辨晥鎴栧崐澶辨晥锛屽嵆鍥犱负css澶辨晥锛岀綉椤靛竷灞�鍙樹贡锛屾湁鐨刢ss灞炴�т笉鑳戒綋鐜般��
鍙﹀:鐢变簬涓囨伓鐨処E锛堝挨鍏舵寚IE6鍜孖E7锛夛紝鎴戜滑鍦ㄩ〉闈㈤噸鏋勬椂涓嶅厤瑕佸鍏惰繘琛屽悇绉峛ug淇鍙婂樊寮傚寲澶勭悊銆傚湪鏍囧噯娴忚鍣╗1]涓彲瀹炵幇鐨勬晥鏋滃湪IE閲屽嵈鏈夊悇绉嶇濂囬棶棰橈紝渚嬪IE6銆両E7涓嶈兘鑹ソ搴斿鐨刬nline-block鍜�.clearfix闂.
鎵�浠ュ氨鍔犲叆浜咺E鐗堟湰鍖哄垎浠ｇ爜锛屼富瑕佽繕鏄В鍐矷E鐗堟湰鍏煎鎬ч棶棰樸��
1.濡備綍浼樺寲浣犵殑椤甸潰涓�銆佹彁鍊″墠绔紑鍙戝伐绋嬪笀鍦ㄤ功鍐檟html鐨勬椂鍊欏仛鍒扮粨鏋勮涔夊寲銆�
缁撴瀯涓富瑕佸寘鎷簡head鍜宐ody涓や釜閮ㄥ垎锛屼絾鏄垜浠粡甯歌鐨勬槸缁撴瀯璇箟鍖栦富瑕佹槸body涓殑鏍囩锛屼絾鏄垜鍦ㄨ繖閲岃繕鏄畝鍗曠殑璇翠竴涓媓ead锛宧ead涓叾瀹炲寘鎷簡涓�浜涘浜庢垜浠瑂eo寰堟湁鐢ㄧ殑涓�浜涗笢瑗匡紝姣斿title,Description,Keywords,杩欎簺涓滆タ鍦ㄨ湗铔涙姄鍙栫殑鏃跺�欓兘鏄湁甯姪鐨勶紝褰撶劧锛岃繕鏈夊叾浠栫殑涓�浜涳紝鎴戝湪姝ゅ氨涓嶄竴涓�璇存槑浜嗭紝姣斿璁剧疆缂撳瓨绛変竴浜涘叾浠栫殑淇℃伅銆�
閭ｄ箞body涓殑璇濓紝鍖呮嫭鐨勬爣绛惧氨寰堝浜嗭紝鎴戣寰椾綔涓轰竴涓悎鏍肩殑鍓嶇寮�鍙戜汉鍛樹綘搴旇鍘荤啛鎮変粬浠紝姣斿div,span,h,ul,ol,dl,p绛夌瓑杩欑被鐨勬爣绛剧殑浣跨敤銆傚簲璇ラ潪甯稿悎鐞嗭紝杩樻湁灏辨槸娉ㄦ剰h鏍囩鐨勬柇灞傦紝鍙奾1鏍囩鐨勪娇鐢紝杩欎簺閮芥槸闈炲父閲嶈鐨勩��
鍚屾椂鍦ㄦ垜浠殑缁撴瀯涓笉瑕佸嚭鐜皊tyle鍜宱nclick杩欐牱鐨勫唴鑱旂殑鏍峰紡鍜屼簨浠躲�傚笇鏈涘ぇ瀹惰兘澶熸敞鎰忕粨鏋勪笌琛ㄧ幇銆佽涓虹殑鍒嗙銆�
浜屻�乧ss锛宩s鏂囦欢鏁伴噺鍙婂ぇ灏忕殑浼樺寲
閭ｄ箞鍏充簬css銆乯s鐨勪紭鍖栫殑璇濓紝涓�鑸儏鍐典笅寤鸿css鍜宩s閲囩敤澶栬仈寮忋�備絾鏄鏋滀綘鐨勯〉闈㈠唴瀹规瘮杈冨锛岃璁″笀鎶婃暣涓晥鏋滃仛寰楁瘮杈冭姳鐨勮瘽锛屾亹鎬昪ss灏遍潪甯稿浜嗭紝閭ｄ箞杩欑鎯呭喌涓嬶紝浣犱竴瀹氳鎶婁綘鐨刢ss瑙勫垝濂斤紝灏介噺鐨勯噰鐢ㄧ缉鍐欙紝杩欐牱鍙互鍑忓皯css鏂囦欢鐨勫ぇ灏忥紝閭ｄ箞瀵筩ss鍋氱浉搴旂殑瑙勫垝涔熷彲浠ュ噺灏慶ss鐨勪釜鏁帮紝鍑忓皯http璇锋眰鏁帮紝js鍚岀悊銆�
涓夈�佽儗鏅浘鐗囨暟閲忓強澶у皬鐨勪紭鍖�
鐢变簬鎴戜滑鐨勮儗鏅浘鐗囨暟閲忔瘮杈冨锛岃繖鏍风殑璇濓紝浼氱粰鏈嶅姟鍣ㄥ甫鏉ュ奖鍝嶏紝澧炲姞浜唄ttp璇锋眰鏁帮紝鎴戜滑鏄惁鏈変竴绉嶅ソ鐨勮В鍐冲姙娉曞憿锛熻繖涓瓟妗堟槸鑲畾鐨勶紝濡傛灉浣犳槸涓�涓悎鏍肩殑鍓嶇寮�鍙戯紝浣犲簲璇ユ竻妤氾紝鍦ㄦ垜浠殑css瀹氫箟鑳屾櫙鐨勬椂鍊欙紝鍙互閫氳繃鍧愭爣鏉ュ疄鐜板鑳屾櫙杩涜瀹氫綅鐨勶紝鏃㈢劧濡傛锛岄偅涔堟垜浠彲浠ュ皢杩欎簺鑳屾櫙鍚堝苟璧锋潵锛岃繖鏍峰嵆鍙噺灏慼ttp璇锋眰鏁帮紝鍚屾椂锛屾垜浠湪鑳屾櫙鏁村悎鐨勬椂鍊欙紝涔熼渶瑕佽�冭檻鍥剧墖璐ㄩ噺锛屽悓鏃朵篃闇�瑕佽�冭檻鍥剧墖鐨勫ぇ灏�.
浣犵殑鑳屾櫙鍥剧墖淇濊瘉涓嶈秴杩�3涓互涓婏紝浣犵殑css鏂囦欢涓嶈秴杩�2涓紝js鏂囦欢涓嶈秴杩�3涓�傝�屼笖鑹ソ鐨勯伒瀹坵eb鏍囧噯鐨勪竴浜涜瀹氾紝css鏀惧埌head涓紝js鏂囦欢鏀惧埌涔嬪墠鎴栬�呬箣鍚�.
寤鸿body涓鍔爐ext-align:center
鐢� 浠ｆ浛 @import
浣滀负澶у瀷缃戠珯鏉ヨ锛岄椤典娇鐢ㄥ唴鑱斿紡鏍峰紡琛紝杩欐牱鍙互鍑忓皯http璇锋眰鏁扮殑鍚屾椂锛屼篃鍙互闃叉瑁稿銆傚綋鐒跺叾浠栭〉闈㈤渶瑕佷娇鐢ㄥ鑱旀牱寮忚〃锛岃繖鏍锋墠鍙互鏂逛究缁存姢銆傚洜涓轰綔涓哄ぇ鍨嬬綉绔欐潵璇达紝浠栫殑棣栭〉璁块棶閲忔槸闈炲父鐨勫ぇ鐨勶紝鎵�浠ャ�傘��
鎶婃牱寮忚〃缃簬椤堕儴
鎶婅剼鏈疆浜庨〉闈㈠簳閮�
閬垮厤浣跨敤CSS 琛ㄨ揪寮忥紙Expression锛�
浣跨敤澶栭儴JavaScript 鍜� CSS
鍓婂噺JavaScript 鍜� CSS
鐢� 浠ｆ浛 @import
閬垮厤浣跨敤婊ら暅
鍓旈櫎閲嶅鑴氭湰
鍑忓皯DOM璁块棶
寮�鍙戞櫤鑳戒簨浠跺鐞嗙▼搴�
锟斤拷4-锟斤拷y=锟斤拷+锟斤拷
鏈�濂界殑鏂规灏辨槸鎸夌収HTML 瑙勮寖鍦ㄦ枃妗Ｂ� 鍐呭姞杞戒綘鐨勬牱寮忚〃銆�
浣跨敤姝ゆ柟娉曠殑鏃跺�欙紝鎴戜滑姣忔閮借鍔犺浇涓や釜js鏂囦欢鎴栬�呭啓涓や釜鏍囩鎵嶈锛岃繖鏍蜂笉澶ソ锛宧ttp璇锋眰浼氬澶氾紝閭ｄ箞鎴戜滑鍙互鎵撳紑DD_belatedPNG.js鏂囦欢锛屽湪灏鹃儴鍔犲叆濡備笅浠ｇ爜鍗冲彲锛�
window.onload = function()
{
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
杩欐牱鎴戜滑鍙渶瑕佸紩鍏ユJS锛屽湪闇�瑕侀�忔槑鐨勬爣绛句笂鍔犲叆class="pngFix"鍗冲彲锛岀畝鍗� 路 鏂逛究 路 蹇嵎锛�
浼樼偣锛�
1銆丆SS浠ｇ爜鏃犻渶浠讳綍淇敼锛屾寜鐓у钩鏃剁殑鎬濊矾鏉ュ啓鍗冲彲锛�
2銆佹棤闇�閰嶇疆锛�
3銆佹病鏈夊浣欑殑gif鍥剧墖锛�
4銆佹敮鎸乮mg锛�
5銆佹敮鎸佸钩閾猴紱
6銆佹敮鎸丆SS Sprite锛�
8銆佹敮鎸丠over绛変吉绫伙紱
缂虹偣锛�
1銆侀澶栧姞鍏ヤ簡js鏂囦欢锛�6.39k锛夊拰http璇锋眰锛屽彲浠ュ拷鐣ヤ笉璁★紱
2銆佸綋鏂囦欢杞藉叆涔嬪墠锛屼細鍏堟殏鏃跺憟鐜扮伆搴曪紱
3銆乯s鏂囦欢杩囧鐨勬椂鍊欙紝鍙兘浼氭姤閿欙紝瀵艰嚧js鏃犳硶姝ｅ父杩愯锛堣繖绉嶆儏鍐垫瀬灏戝嚭鐜帮紝鍙互蹇界暐涓嶈锛夛紱
浣跨敤鎯呭喌锛�
1銆佸綋鍓�6绉嶆柟娉曞潎涓嶈兘瑙ｅ喅闂鐨勬椂鍊欏彲鑰冭檻锛�
2銆佸綋png鍥剧墖杩囧鐨勬椂鍊欏彲鑰冭檻锛屽洜涓簆ng鍥剧墖澶锛屼娇鐢ㄥ墠闈㈢殑鍑犱釜鏂规硶锛屾湁鐨勪細瀵艰嚧CSS浠ｇ爜鍐椾綑杩囧锛岃繕涓嶅寮曞叆姝ゆ枃浠跺垝绠楋紱
鏂规8 - PNG8鏍煎紡鐨勫浘鐗囪В鍐虫柟妗堬細
浠嬬粛锛歱ng8鍜実if閮芥槸8浣嶇殑閫忔槑搴︼紝IE6涓庣敓淇辨潵灏辨敮鎸乸ng8鐨勭储寮曡壊閫忔槑搴︼紝浣嗕笉鏀寔png鎴�8浣嶄互涓婄殑 alpha 閫忔槑搴︺�傝�屽浜庨潪鍔ㄧ敾鐨凣IF寤鸿浣犱娇鐢≒NG8锛屽洜涓轰綋绉細鏇村皬~
鎬濊矾锛氫竴涓渶绠�鍗曚篃鏈�淇濋櫓鐨勬柟娉曡IE6鏀寔PNG鍥剧墖閫忔槑锛堝皬灏忕殑鍒嗕韩涓�涓嬶級
text-t锟斤拷锟斤拷蕺锟�
1.Hack鏄粈涔堟�庝箞鐢紵http://www.kwstu.com/Admin/ViewArticle/201409011604277330
1.Border 铏氳竟border: 1px dashed red;
1.li鍦╥e6涓巌e8涓嬬殑楂樺害闂鍦╨i鏍峰紡涓婂姞涓妚ertical-align:bottom;
1.Css甯歌鍏煎鎬ч棶棰橈紝濡備綍瑙ｅ喅锛�http://www.zhufengpeixun.cn/CSS/2011-08-25/142.html
1.Css甯歌閫夋嫨鍣ㄦ湁鍝簺锛熶紭鍏堢骇锛�閫夋嫨鍣�:http://www.runoob.com/cssref/css-selectors.html
浼樺厛绾�:id > class > 灞傜骇閫夋嫨鍣ㄥ拰鏍囩閫夋嫨鍣�
1.浣犲浣曠悊瑙ｇ粷瀵瑰畾浣嶅拰鐩稿瀹氫綅鐨勶紵閮界敤鍦ㄤ粈涔堝湴鏂癸紵鏈変粈涔堜紭鐐瑰拰缂虹偣锛�缁濆瀹氫綅灏辨槸浣犵殑浣嶇疆宸茬粡涓嶅睘浜庝綘浜嗭紝浣犲彧鑳芥紓娴湪鍗婄┖涓��
鐩稿瀹氫綅灏辨槸浣犵殑浣嶇疆浣犺繕鍗犵敤鐨勶紝浜鸿繕鍦ㄩ鐫�
鏈夋剰鎬濈殑鏄繖浜涢兘鏄浉瀵圭埗杈堝厓绱犳湁position涓虹浉瀵规垨鑰呯粷瀵瑰睘鎬ф潵瀹氫綅鐨勶紝閮芥壘涓嶅埌鐨勮瘽灏变互body绐楀彛鏉ュ畾浣�
鍥犱负缁濆瀹氫綅锛堝拰鏂囨。娴佹病鍏崇郴锛夊鏃犵敵鏄庯紝鍒欏叾鏄涓巄ody鑰岃█鐨勶紝澶勭悊涓嶅ソ鐨勮瘽銆傚鏄剧ず鍣ㄥ昂瀵稿彉浜嗭紝鍙兘灏变細鍙樺瀷銆�
鐩稿瀹氫綅鐨勫厓绱犲睘鏂囨。娴侊紝鎵�浠ョǔ瀹氱殑锛岀浉瀵瑰畾浣嶆槸鐩稿浠栬鍑虹幇鐨勪綅缃紝濡傛棤璁総op left涔嬬被锛屽拰鏅�歞iv鍩烘湰涓�鏍枫��
涓�鑸殑缁濆瀹氫綅鏄繖鏍风敤鐨勶紝鐖跺厓绱犺鏄浉瀵瑰畾浣嶇殑涓旈』鏈夊竷灞�锛屽鏈変釜楂樺害锛岃繖鏍峰瓙鍏冪礌鐢ㄧ粷瀵瑰畾浣嶏紝灏卞彲浠ョ浉瀵瑰畠鐨勭埗鍏冪礌杩涜缁濆瀹氫綅锛岀埗鍏冪礌鑻ヤ笉杩欐牱鍋氾紝閭ｄ箞瀛愬厓绱犵敤缁濆瀹氫綅鍏跺疄鏄浉瀵筨ody瀹氫綅
1.宸︿晶鏍峰紡鍥哄畾锛屽彸渚ф枃鏈搴﹁嚜閫傚簲濡備綍甯冨眬鐪嬬浜斿崄鍏闈㈣瘯棰�.1.涓嬮潰鐨勫竷灞�濡備綍瀹炵幇,濡備綍涓嶇敤娴姩杩樿兘浣跨敤浠�涔堝竷灞�鏂瑰紡瀹氫綅. 鎴栧垯flex-box
1.HTML闈欐�侀〉闈㈠嚭鐜颁腑鏂囦贡鐮佸浣曡В鍐筹紵绛�:
1.涓嬪垪鍝釜閫夋嫨鍣ㄤ紭鍏堢骇鏄渶楂樼殑锛�a. #a b. .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o c. #a .b d. div.b#a
绛�:d
1.鍐機SS鍛戒护锛岃缃瓧浣撲负瀹嬩綋锛�12px澶у皬锛岄鑹蹭负#eeeeee,鍔犵矖銆�涓�銆佸瓧浣撳睘鎬т富瑕佸寘鎷笅闈㈠嚑涓�
font-family锛宖ont-style锛宖ont-variant锛宖ont-weight锛宖ont-size锛宖ont
font-family锛堝瓧浣撴棌锛�: 鈥淎rial鈥濄�佲�淭imes New Roman鈥濄�佲�滃畫浣撯�濄�佲�滈粦浣撯�濈瓑;
font-style锛堝瓧浣撴牱寮忥級: normal锛堟甯革級銆乮talic锛堟枩浣擄級鎴杘blique锛堝�炬枩锛�;
font-variant (瀛椾綋鍙樺寲): normal锛堟甯革級鎴杝mall-caps锛堝皬浣撳ぇ鍐欏瓧姣嶏級;
font-weight (瀛椾綋娴撴贰): 鏄痭ormal锛堟甯革級鎴朾old锛堝姞绮楋級銆傛湁浜涙祻瑙堝櫒鐢氳嚦鏀寔閲囩敤100鍒�900涔嬮棿鐨勬暟瀛楋紙浠ョ櫨涓哄崟浣嶏級;
font-size锛堝瓧浣撳ぇ灏忥級: 鍙�氳繃澶氱涓嶅悓鍗曚綅锛堟瘮濡傚儚绱犳垨鐧惧垎姣旂瓑锛夋潵璁剧疆, 濡傦細12xp锛�12pt锛�120%锛�1em
濡傛灉鐢╢ont 灞炴�х殑璇濓紝灏卞彲浠ユ妸鍑犱釜鏍峰紡杩涜绠�鍖栵紝鍑忓皯涔︾殑鎯呭喌锛沠ont 灞炴�х殑鍊煎簲鎸変互涓嬫搴忎功鍐�(鍚勪釜灞炴�т箣闂寸敤绌烘牸闅斿紑)锛�
椤哄簭锛歠ont-style | font-variant | font-weight | font-size | line-height | font-family
浜屻�乫ont鐨勭畝鍐欏疄渚�
.font{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
}
涓婇潰鐨勬牱寮忕畝鍐欎负锛�
.font{font:italic small-caps bold 12px/1.5em arial,verdana;}
涓夈�乫ont鐨勭畝鍐欐敞鎰忎簨椤�
1銆佺畝鍐欐椂锛宖ont-size鍜宭ine-height鍙兘閫氳繃鏂滄潬/缁勬垚涓�涓�硷紝涓嶈兘鍒嗗紑鍐欍��
2銆侀『搴忎笉鑳芥敼鍙�.杩欑绠�鍐欐柟娉曞彧鏈夊湪鍚屾椂鎸囧畾font-size鍜宖ont-family灞炴�ф椂鎵嶈捣浣滅敤銆傝�屼笖锛屽鏋滀綘娌℃湁璁惧畾font-weight, font-style, 浠ュ強 font-varient 锛屼粬浠細浣跨敤缂虹渷鍊�
1.甯哥敤甯冨眬灞炴�ф湁鍝簺锛熸湁浠�涔堢壒鐐癸紵margin , padding , position , float
http://www.codesec.net/view/404576.html
1.濉┖棰�涓�涓猟iv锛宑ss璁剧疆濡備笅锛歿width:200px;margin:200px 20px;padding:50px 60px 70px;border:100px solid red;overflow:hidden;}鍦↖E6鎬櫀瑙ｆ瀽涓嬶紝杩欎釜div鐨勫疄闄呭鏄痏360px___锛熷湪姝ｅ父瑙ｆ瀽涓嬶紝杩欎釜div鐨勫疄闄呭搴︽槸_560px___?
1.web缃戦〉涓父瑙佺殑鍥剧墖鏍煎紡鏈夊摢浜涳紵鍒嗗埆鏈変粈涔堢壒鐐癸紵甯哥敤鐨勫浘鐗囨牸寮忔湁JPG銆丟IF銆丳NG銆�
1銆乯pg锛歫pg鍏ㄥ悕鏄疛PEG銆侸PEG鍥剧墖浠� 24 浣嶉鑹插瓨鍌ㄥ崟涓綅鍥俱�侸PEG 鏄笌骞冲彴鏃犲叧鐨勬牸寮忥紝鏀寔鏈�楂樼骇鍒殑鍘嬬缉锛屼笉杩囷紝杩欑鍘嬬缉鏄湁鎹熻�楃殑銆傛笎杩戝紡 JPEG 鏂囦欢鏀寔浜ら敊銆�
2銆乬if:GIF鍒嗕负闈欐�丟IF鍜屽姩鐢籊IF涓ょ锛屾墿灞曞悕涓�.gif锛屾槸涓�绉嶅帇缂╀綅鍥炬牸寮忥紝鏀寔閫忔槑鑳屾櫙鍥惧儚锛岄�傜敤浜庡绉嶆搷浣滅郴缁燂紝鈥滀綋鍨嬧�濆緢灏忥紝缃戜笂寰堝灏忓姩鐢婚兘鏄疓IF鏍煎紡銆傚叾瀹濭IF鏄皢澶氬箙鍥惧儚淇濆瓨涓轰竴涓浘鍍忔枃浠讹紝浠庤�屽舰鎴愬姩鐢伙紝鏈�甯歌鐨勫氨鏄�氳繃涓�甯у抚鐨勫姩鐢讳覆鑱旇捣鏉ョ殑鎼炵瑧gif鍥撅紝鎵�浠ュ綊鏍瑰埌搴旼IF浠嶇劧鏄浘鐗囨枃浠舵牸寮忋�備絾GIF鍙兘鏄剧ず256鑹层�傚拰jpg鏍煎紡涓�鏍凤紝杩欐槸涓�绉嶅湪缃戠粶涓婇潪甯告祦琛岀殑鍥惧舰鏂囦欢鏍煎紡銆�
3銆乸ng锛歅NG锛屽浘鍍忔枃浠跺瓨鍌ㄦ牸寮忥紝鍏惰璁＄洰鐨勬槸璇曞浘鏇夸唬GIF鍜孴IFF鏂囦欢鏍煎紡锛屽悓鏃跺鍔犱竴浜汫IF鏂囦欢鏍煎紡鎵�涓嶅叿澶囩殑鐗规�с�侾NG鐨勫悕绉版潵婧愪簬鈥滃彲绉绘缃戠粶鍥惧舰鏍煎紡(Portable Network Graphic Format锛孭NG)鈥濓紝涔熸湁涓�涓潪瀹樻柟瑙ｉ噴鈥淧NG's Not GIF鈥濓紝鏄竴绉嶄綅鍥炬枃浠�(bitmap file)瀛樺偍鏍煎紡锛岃浣溾�減ing鈥濄�侾NG鐢ㄦ潵瀛樺偍鐏板害鍥惧儚鏃讹紝鐏板害鍥惧儚鐨勬繁搴﹀彲澶氬埌16浣嶏紝瀛樺偍褰╄壊鍥惧儚鏃讹紝褰╄壊鍥惧儚鐨勬繁搴﹀彲澶氬埌48浣嶏紝骞朵笖杩樺彲瀛樺偍澶氬埌16浣嶇殑伪閫氶亾鏁版嵁銆侾NG浣跨敤浠嶭Z77娲剧敓鐨勬棤鎹熸暟鎹帇缂╃畻娉曪紝涓�鑸簲鐢ㄤ簬JAVA绋嬪簭銆佺綉椤垫垨S60绋嬪簭涓紝鍘熷洜鏄畠鍘嬬缉姣旈珮锛岀敓鎴愭枃浠朵綋绉皬銆�
1.鍦℉TML涓紝SEO甯歌鐨勭櫧甯戒紭鍖栨妧宸ф湁鍝簺锛�http://seo.pingce.cc/seoweb/hmseo/20130626204.html
1.鍧楀睘鎬ф爣绛句笌琛屽睘鎬ф爣绛剧殑鍖哄埆锛熷摢浜涙爣绛炬槸鍧楀睘鎬х殑锛屽摢浜涙槸琛岀殑?鍦ㄦ爣鍑嗘枃妗ｆ祦閲岄潰锛屽潡绾у厓绱犲叿鏈変互涓嬬壒鐐癸細
鈶犳�绘槸鍦ㄦ柊琛屼笂寮�濮嬶紝鍗犳嵁涓�鏁磋锛�
鈶￠珮搴︼紝琛岄珮浠ュ強澶栬竟璺濆拰鍐呰竟璺濋兘鍙帶鍒讹紱
鈶㈠濡傛灉涓嶈缃�,榛樿鏄埗绾х殑瀹藉害锛屼笌鍐呭鏃犲叧锛�
鈶ｅ畠鍙互瀹圭撼鍐呰仈鍏冪礌鍜屽叾浠栧潡鍏冪礌銆�
琛屽唴鍏冪礌鐨勭壒鐐癸細
鈶犲拰鍏朵粬鍏冪礌閮藉湪涓�琛屼笂锛�
鈶￠珮锛岃楂樺強澶栬竟璺濆拰鍐呰竟璺濋儴鍒嗗彲鏀瑰彉锛�
鈶㈠搴﹀彧涓庡唴瀹规湁鍏筹紱
鈶ｈ鍐呭厓绱犲彧鑳藉绾虫枃鏈垨鑰呭叾浠栬鍐呭厓绱犮��
涓嶅彲浠ヨ缃楂橈紝鍏跺搴﹂殢鐫�鍐呭澧炲姞锛岄珮搴﹂殢瀛椾綋澶у皬鑰屾敼鍙橈紝鍐呰仈鍏冪礌鍙互璁剧疆澶栬竟鐣岋紝浣嗘槸澶栬竟鐣屼笉瀵逛笂涓嬭捣浣滅敤锛屽彧鑳藉宸﹀彸璧蜂綔鐢紝涔熷彲浠ヨ缃唴杈圭晫锛屼絾鏄唴杈圭晫鍦╥e6涓笉瀵逛笂涓嬭捣浣滅敤锛屽彧鑳藉宸﹀彸璧蜂綔鐢�
http://www.cnblogs.com/imihiroblog/archive/2012/08/28/2660370.html
1.IE6鍜孖E7鏈変粈涔堜笉鍚岋紵绛旓細
I.鎵撳紑IE7锛岀涓�鎰熻灏辨槸绠�娲佸共鍑�浜嗚澶氥�備富瑕佹槸鍘婚櫎浜嗗伐鍏疯彍鍗曪紝鎸夐挳鍥炬爣鍙樺緱鏇村姞鍦嗘粦銆�
-transf&锟斤拷bb锟斤拷