鍒氬紑濮嬪叆闂ㄥ墠绔殑鏃跺€欙紝鎬讳細瀵圭綉椤电殑甯冨眬鏈変竴绉嶇涓€鑸殑鍚戝線銆備綘鐗瑰埆甯屾湜鑷繁鑳藉儚娣樺疂銆佷含涓滀竴鏍峰揩閫熷垱寤洪〉闈€傝繖涓按骞崇鐪熸鐨勫墠绔凡缁忎笉杩滀簡锛佷簨瀹炰笂锛岀‘瀹炲姝わ紒馃し鈥嶏笍鎴戜滑鎶婂叆闂ㄧ骇鐨勫墠绔兘鍔涘畾涔変负瀹屾垚涓绘祦缃戠珯甯冨眬鐨勮兘鍔涖€傝繖娌￠棶棰樸€傚鏋滀綘瀛︿竴鐐笿S鑳藉姏锛岄偅浣犲氨鏄偅涓椂浠ｉ噷涓€涓緢鎴愮啛鐨勫墠绔紑鍙戝伐绋嬪笀浜嗭紒浣嗘槸鎴戜滑浠婂ぉ瑕佽鐨勮瘽棰樺拰甯冨眬鏈変粈涔堝叧绯诲憿锛熷ぇ瀹堕兘鐭ラ亾锛屽厜闈燞TML鏄繙杩滀笉澶熷疄鐜板竷灞€鐨勶紙褰撶劧锛屽彜鏃跺€欐湁浜虹敤琛ㄦ牸甯冨眬锛屾垜浠氨涓嶈璁轰簡锛夈€備粖澶╂垜浠彧闇€瑕佷簡瑙ｄ袱涓棶棰樸€傞棶棰樹竴锛氶鍏堬紝浠€涔堟槸layout锛燂紵闂2锛氭垜浠浣曚娇鐢℉TML+CSS鏉ュ疄鐜扮綉椤电殑甯冨眬锛熶粈涔堟槸甯冨眬锛熸偍搴旇鐭ラ亾锛岀綉椤垫槸缃戠珯寮€鍙戜汉鍛樺悜鐢ㄦ埛浼犻€掓煇浜涗俊鎭殑涓€绉嶅舰寮忋€傛瘮濡侭绔欑殑棣栭〉搴旇鏈夋帹鑽愯棰戙€佸叧娉ㄧ殑浜恒€佸箍鍛娿€佺綉绔欏鑸瓑锛岃繖浜涗俊鎭兂瑕佸睍绀哄湪涓€涓〉闈笂锛岄偅涔堝浣曠粍缁囨槸涓€涓緢鏈夊闂殑浜嬫儏銆傞€氬父杩欎欢浜嬩竴寮€濮嬪苟涓嶆槸鎴戜滑鍓嶇寮€鍙戜汉鍛樿璁＄殑锛屽洜涓哄叕鍙搁噷鏈変竴涓骇鍝佺粡鐞嗭紙娌￠敊锛屽氨鏄鎵撶殑閭ｄ釜锛夛紝璐熻矗璁捐缃戦〉鐨勫熀鏈俊鎭紝骞舵槑纭綉绔欎富椤电殑鍩烘湰缁撴瀯銆傜劧鍚庝氦缁橴I/UE璁捐甯堣繘琛屽悇涓ā鍧楃殑鏁翠綋璁捐鍜岀粏鑺傝璁★紝杈惧埌鐢ㄦ埛瀹為檯鐪嬪埌鐨勭姸鎬併€傝繖涓繃绋嬩細褰㈡垚璁捐绋匡紝鐢氳嚦寰堝鍏徃浼氬仛鍑洪珮淇濈湡鍘熷瀷銆傦紙鐢ㄨ蒋浠惰嚜鍔ㄧ敓鎴怘TML缃戦〉锛岃揪鍒板彲浠ュ疄闄呮搷浣滅殑绋嬪害銆傦級鏈夌殑鍚屽鍚埌杩欎釜浼氬鎬曘€傜綉椤垫槸鐩存帴鑷姩鐢熸垚鐨勩€傛垜杩橀渶瑕佷粈涔堬紵鍒媴蹇冿紝杩欎簺杞欢杩滄病鏈変綘鑱槑锛屽畠浠敓鎴愮殑浠ｇ爜寰堜贡锛屾墽琛屾晥鐜囦細鐗瑰埆浣庛€傚熀鏈笂鍙槸鐢ㄦ潵婕旂ず锛岀湡姝ｇ殑缃戦〉杩樺緱鑷繁鍋氾紒涓婅堪閾炬帴閮芥病鏈夐棶棰橈紝缃戦〉鐨勬渶缁堝竷灞€灏辩‘瀹氫簡銆傚緢娓呮姣忎釜妯″潡搴旇鍦ㄥ摢閲屻€備互涓婂氨鏄綉椤靛竷灞€鐨勮璁￠樁娈碉紒閭ｄ箞锛屽氨鐪嬩綘鐜╀簡锛侊紙浠€涔堬紵鎴戞病鐪嬮敊锛岃浜嗚繖涔堝锛岃疆鍒版垜浜嗭紒锛夋垜鐭ラ亾鐩掑瓙妯″瀷瀵瑰竷灞€鐨勬剰涔夛紝杩欐椂鍊欎綘鑲畾鎱屼簡锛佸崸妲斤紒锛侊紒浣犱滑鏄笉鏄兂鎵炬垜楹荤儲鍛鍝堝搱锛屽埆鐫€鎬ワ紝浠婂ぉBogo灏辨潵鏁欏ぇ瀹跺浣曞畬鎴愮綉椤电殑甯冨眬锛屼笉杩囧湪鏁欏ぇ瀹朵箣鍓嶏紝杩樻湁涓や欢浜嬭璇达紒浣跨敤HTML+CSS鐨勭綉椤靛竷灞€鏈変袱绉嶅舰寮忋€備竴绉嶆槸浣跨敤琛ㄦ牸杩涜甯冨眬鐨勯潪甯稿彜鑰佷笖鎰氳牏鐨勬柟娉曘€備綘鑲畾浼氳锛岃繖鍒板簳鏄粈涔堜笢瑗匡紝杩欎笉鏄〃鐨勮〃鍚楋紵鏄殑锛屾病鏈夐敊锛屼絾鏄鏋滀綘鎯宠薄涓€涓嬶紝濡傛灉鎶婃暣涓綉椤电湅鎴愪竴涓〃鏍硷紝閭ｄ箞琛ㄦ牸璁剧疆琛ㄦ牸鑳藉疄鐜板竷灞€鍚楋紵鍍忎笅闈紵浜嬪疄涓婏紝澶у浠ュ墠涔熺‘瀹炶繖鏍峰仛杩囥€傛病鍔炴硶锛屽綋鏃舵潯浠惰壈鑻︼紒涓轰簡棰嗗埌鏈堣柂锛屽啀闅句篃瑕佷笂鍘伙紒涓嶈繃鐜板湪浣犱笉鐢ㄦ媴蹇冭繖涓簡锛屽洜涓哄悗闈㈠嚭鐜颁簡绗簩绉嶆柟娉曪紝浣跨敤div甯冨眬銆傞椈瑷€锛屼竴浜涘悓瀛﹀紑濮嬫厡浜嗭紒鑰佸笀锛屼綘涓嶈鐩掑瓙妯″瀷锛屾垜涓嶅锛佸摷锛侊紒锛佸ソ鍚уソ鍚div甯冨眬鍏跺疄灏辨槸鐢ㄧ洅瀛愭ā鍨嬫潵甯冨眬锛屼綘娌℃剰瑙侊紒浣嗘槸涓戣瘽鍦ㄥ墠锛屽彧瀛︿範鐩掓ā鍨嬪甯冨眬闈炲父鏈夌敤鍜屽叧閿紝浣嗘槸瑕佸疄鐜板叏甯冨眬锛岃繕寰楀涔犳诞鍔ㄥ拰瀹氫綅涓ょ鎶€宸э紒杩欎袱涓妧宸у氨鐪嬫垜浠笅涓€涓棰戜簡锛岃寰楀叧娉ㄣ€佹敹钘忓拰杞彂璇勮鍝︼紒璺熼殢鎴戜滑涓€璧锋帴鏀躲€?021鍓嶇寮€鍙戝叏濂楄棰戙€嬬洅妯″瀷鐨勫熀鏈蹇甸鍏堜綘瑕佺煡閬揇IV鎵€浠ｈ〃鐨勫潡绾у厓绱犻粯璁ゅ簲璇ユ槸涓€涓煩褰€傛垜浠湪甯冨眬缃戦〉鏃讹紝鏃犻潪灏辨槸鎺у埗缃戦〉涓煩褰㈢殑澶у皬銆傛斁缃綅缃€傞偅涔堜綘绌剁珶濡備綍鎺у埗瀹冧滑鍛紵鐪嬭繖寮犲浘浣犲簲璇ヨ繖鏍风悊瑙ｏ細缁胯壊鍖哄煙->澶栬竟璺?>margin灞炴€?>褰撳墠div鐩稿浜庡叾浠栧厓绱犵殑浣嶇疆钃濊壊鍖哄煙->border->border灞炴€?>鎴戜滑normal鐨刣iv浜虹悊瑙ectangle鎸囩殑鏄粍鑹插尯鍩?>innermargin->padding灞炴€?>褰撳墠div浠庣矇鑹插尯鍩熷唴閮ㄥ厓绱犵殑浣嶇疆->content->content->div鐭╁舰鍐呴儴鐨勫厓绱狅紝鍙兘鍙槸涓€娈垫枃瀛楋紝涔熷彲鑳芥槸鍙﹀涓€涓负浠€涔堜竴涓猟iv浼氳繖鏍峰垝鍒嗭紵涓嬮潰鎴戜滑鏉ュ姣斾竴涓嬪揩閫掔浣撳拰鍫嗙爜鎺掑垪锛屼綘灏辨槑鐧戒簡锛佷粩缁嗙湅鐪嬶紝瀹冧滑鏄竴鏍风殑鍚楋紵Margin->浠庡閮ㄥ厓绱犵湅鐩掑瓙鐨勪綅缃瓸order->绾哥鐨勫帤搴nnermargin->浠庨噷闈㈢殑鐗╁搧鍐呭鐪嬬洅瀛愮殑浣嶇疆->蹇€掔墿鍝佹湰韬垜浠潵鐪嬬湅瀹冧滑鐨勬牱瀛愬氨鍍忎粬浠鏀剧疆鐨勬椂鍊欎竴鏍凤紵杩欎笉灏辨槸layout鍚椻€︹€︼紙褰撶劧瑕佺敤float锛夎浣忕洅妯″瀷鐨勫睘鎬у拰鐢ㄦ硶鍩烘湰涓婂ぇ瀹跺湪瀛︿範鐩掓ā鍨嬬殑鏃跺€欏凡缁忔帉鎻′簡border杈规鐨勭敤娉曪紝杩欓噷鍙杈硅窛鍜屽～鍏咃紒鍗曠嫭鍐檓arginmargin-top:10px锛?*涓庨《閮ㄧ殑璺濈*/margin-bottom:30px;/*璺濆簳閮ㄧ殑璺濈*/margin-left:50px;/*鍒板乏杈圭殑璺濈*/margin-right:100px;/*distancefromright*/margin缂╁啓娉?*缂╁啓娉曪細琛ㄧず涓婁笅宸﹀彸鍥涗釜鏂瑰悜閮借缃负50px鐨勮窛绂?/margin:50px;/*鍥涗釜鏂瑰悜浠ｈ〃鍚戜笂,right,down,left鍒嗗埆锛岄『鏃堕拡鍙敤*/margin:50px20px10px100px;/*鎺у埗鍥涗釜鏂瑰悜锛屼袱缁勶紝涓婁笅宸﹀彸*/margin:50px100px;padding鐨勫崟鐙啓padding-top:10px;/*涓庨《閮ㄧ殑璺濈*/padding-bottom:30px;/*璺濆簳閮ㄧ殑璺濈*/padding-left:50px;/*涓庡乏杈圭殑璺濈*/padding-right:100px;/*璺濈鍙宠竟鐨勮窛绂?/paddingabbreviation/*abbreviation:琛ㄧず涓婁笅宸﹀彸鍥涗釜鏂瑰悜閮借缃负50px闂磋窛*/padding:50px;/*鍥涗釜鏂瑰悜鍒嗗埆浠ｈ〃涓娿€佸彸銆佸垎鍒悜涓嬶紝鍚戝乏锛屽彧璁板緱椤烘椂閽堟柟鍚?/padding:50px20px10px100px;/*鎺у埗鍥涗釜鏂瑰悜锛屼袱缁勶紝涓婁笅宸﹀彸*/padding:50px100px;缁间笂鎵€杩帮紝鐩掑瓙妯″瀷鍙槸瑙ｅ喅浜哾iv鐨勯棿璺濆拰鍐呰竟璺濈殑闂锛屽氨鏄洜涓轰竴涓珮澶т笂鐨勫悕瀛楄寰堝鍒濆鑰呰糠鎯戯紒浠ヤ笂鍙槸鐩掓ā鍨嬬殑鍩烘湰姒傚康銆傚鏋滄枃绔犲唴瀹圭湅涓嶆噦锛屼篃鍙互鐪嬪崥鍝ュ叧浜庣洅瀛愭ā鍨嬬殑鐩存挱瑙嗛https://www.bilibili.com/video...
