如何用CSS进行网页布局 如何用css进行网页布局
HTML+CSS\u5b9e\u73b0\u7f51\u9875\u5e03\u5c40Layoutbody {margin: 0; padding: 0;}.Header, .Footer {height: 100px; background-color: #369;}.Left, .Right {position: absolute;top: 100px;width: 100px;height: 300px;background-color: pink;}.Left {left: 0;}.Right {right: 0;}.Cont {margin: 0 100px;}.con1, .con2 {height: 150px;}.con1 {background-color: silver;}.con2 {background-color: slateGrey;}HeaderLeftcon1con2RightFooter
\u5b9e\u73b0\u7f51\u9875\u5e03\u5c40\u7684\u65b9\u5f0f\u65b9\u6cd5\u6bd4\u8f83\u591a\uff0c\u5e03\u5c40\u65b9\u5f0f\u53ef\u4ee5\u5927\u6982\u5206\u4e3a\u8fd9\u51e0\u7c7b\u3002
\u5e03\u5c40\u79cd\u7c7b\uff1a1\u3001table\u5e03\u5c40\uff08\u7f51\u9875\u7684\u5174\u8d77\uff0c1995\uff09
2\u3001Flash\u5e03\u5c40\uff08\u81ea\u7531\u7684\u9ec4\u91d1\u65f6\u4ee3\uff0c1996\uff09
3\u3001div+css\uff08CSS\u7684\u8bde\u751f\uff0c1998\uff09
4\u3001\u6805\u683c\u4e0e\u54cd\u5e94\u5f0f\uff08\u79fb\u52a8\u7aef\u7684\u5174\u8d77\uff0c2007\u4e0e2010\uff09
\u5f53\u524dWEB\u524d\u7aef\u5f00\u53d1\u4f7f\u7528DIV+CSS\u7684\u5e03\u5c40\u65b9\u5f0f\u4f1a\u6bd4\u8f83\u591a\u4e5f\u6bd4\u8f83\u5e38\u7528\u5427\uff0c\u7f51\u9875\u5e03\u5c40\u770b\u8d77\u6765\u8c8c\u4f3c\u7b80\u5355\uff0c\u4f46\u662f\u5b83\u9700\u8981\u7efc\u5408\u4f7f\u7528\u5f88\u591aHTML+CSS\u7684\u77e5\u8bc6\uff0c\u603b\u7684\u6765\u8bf4\u77e5\u8bc6\u91cf\u662f\u4e0d\u5c0f\u3002\u5982\u679c\u60f3\u7cfb\u7edf\u5316\u7684\u4e86\u89e3HTML+CSS\u65b9\u9762\u7684\u77e5\u8bc6\uff0c\u5efa\u8bae\u4f60\u9009\u62e9\u4e00\u672c\u6bd4\u8f83\u4e0d\u9519\u7684HTML5\u76f8\u5173\u4e66\u7c4d\uff08\u4e3b\u8981\u770b\u77e5\u8bc6\u903b\u8f91\u3001\u77e5\u8bc6\u7684\u8868\u8fbe\u65b9\u5f0f\uff0c\u6bd4\u5982\u300aHTML5\u5e03\u5c40\u4e4b\u8def\u300b\uff09\u8fdb\u884c\u5b66\u4e60\uff0c\u8ba9\u81ea\u5df1\u7684\u77e5\u8bc6\u66f4\u624e\u5b9e\u4e00\u4e9b\uff0c\u4e0d\u7136\u5b66\u7684\u96f6\u96f6\u6563\u6563\u7684\u3002
Tips\uff1a\u5b66\u4e60\u597dHTML+CSS\u6709\u5229\u4e8e\u540e\u9762\u5b66\u4e60JavaScript\uff0c\u6bd5\u7adf\u9700\u8981\u5b83\u4eec\u4e24\u8005\u7ed3\u5408\u5728\u4e00\u8d77\u624d\u53ef\u4ee5\u5b9e\u73b0\u51fa\u53ef\u4ea4\u4e92\u7684\u524d\u7aef\u9875\u9762\u3002
是为了丰富网页布局的样式，在CSS没有出来之前，大家会用表格来进行分割布局，很不方便，CSS出来后就好多了。
我们平时所访问的都是服务器反馈到浏览器的HTML页面，但是正如上面说的，HTML无法满足新时代网站拥有者的表达需求，我们就会在HTML代码中加入适当的CSS代码来合理展现新的样式。
例如：
<html>
<head>
<title>测试页<title>
<style type="text/css">
.cs{width:100%;height:160px;text-align:center;line-height:160px;background:#f0f0f0;}
.csl{width:20%;height:160px;float:left;background:#fff;}
.csr{width:20%;height:160px;float:right;background:#fff;}
</style>
</head>
<body>
<div class="cs">
<div class="csl">
<p>左框内容</p>
</div>
<div class="csr">
<p>右框内容</p>
</div>
</div>
</body>
</html>
建议你引用bootstrap，它有网格布局，省的你自己写css样式，很方便。
绛旓細1銆佷竴鍒楀竷灞锛氫竴鑸兘鏄浐瀹氱殑瀹介珮锛岃缃甿argin : 0 auto鏉ユ按骞冲眳涓紝鐢ㄤ簬鐣岄潰鏄捐憲鏍囬鐨勫睍绀虹瓑銆2銆佷袱鍒楀竷灞锛氳璧蜂袱鍒楀竷灞锛屾渶甯歌鐨勫氨鏄娇鐢╢loat鏉ュ疄鐜般俧loat娴姩甯冨眬鐨勭己鐐规槸娴姩鍚庝細閫犳垚鏂囨湰鐜粫绛夋晥鏋滐紝浠ュ強闇瑕佸強鏃舵竻闄ゆ诞鍔ㄣ3銆佷笁鍒楀竷灞锛氫袱渚у畾瀹戒腑闂磋嚜閫傚簲,棣栧厛璁剧疆鐖剁骇鍏冪礌鐨勫搴︼紝鍙互宸...
绛旓細涓涓綉椤佃璁℃椂锛屾垜浠彲浠ュ皢涓涓〉闈㈣缃负澶撮儴锛屼腑闂达紝鍜屽簳閮ㄤ笁閮ㄥ垎锛 澶撮儴鏈夊垎涓哄簵鎷涳紙logo锛夊拰瀵艰埅绛 涓棿鏃㈠唴瀹归儴鍒嗭紝鍐呭涔熷彲涓涓暣浣擄紝涔熷彲宸﹀彸鍒嗙锛 搴曢儴鏉ラ〉闈㈢粨灏撅紝涓鑸啓鐗堟潈淇℃伅锛屽弸鎯呴摼鎺ョ瓑 澶撮儴缂栬緫搴楁嫑锛 !doctype html html head meta charset="utf-8" title娣樺疂鍔╂墜缃/tit...
绛旓細4銆佹爡鏍间笌鍝嶅簲寮忥紙绉诲姩绔殑鍏磋捣锛2007涓2010锛夊綋鍓峎EB鍓嶇寮鍙浣跨敤DIV+CSS鐨勫竷灞鏂瑰紡浼氭瘮杈冨涔熸瘮杈冨父鐢ㄥ惂锛缃戦〉甯冨眬鐪嬭捣鏉ヨ矊浼肩畝鍗曪紝浣嗘槸瀹冮渶瑕佺患鍚堜娇鐢ㄥ緢澶欻TML+CSS鐨勭煡璇嗭紝鎬荤殑鏉ヨ鐭ヨ瘑閲忔槸涓嶅皬銆傚鏋滄兂绯荤粺鍖栫殑浜嗚ВHTML+CSS鏂归潰鐨勭煡璇嗭紝寤鸿浣犻夋嫨涓鏈瘮杈冧笉閿欑殑HTML5鐩稿叧涔︾睄锛堜富瑕佺湅鐭ヨ瘑閫昏緫銆佺煡璇...
绛旓細棣栧厛鎵撳紑SublimeText杞欢锛屾柊寤轰竴涓猦tml椤甸潰锛屽湪html椤甸潰涓噯澶囧ソhtml缁撴瀯锛屽涓嬪浘鎵绀恒傛帴涓嬫潵锛屾垜浠湪html鐨刡ody缁撴瀯涓坊鍔犲鑸爮鐨勫唴瀹癸紝濡備笅鍥炬墍绀恒傜劧鍚庨渶瑕佸湪style鏍囩涓鐢–SS瀹氫箟瀵艰埅鏉＄殑鏍峰紡锛屽涓嬪浘鎵绀恒傚啓鏍峰紡鐨勬椂鍊欎竴瀹氳娉ㄦ剰鍐欏湪鏍峰紡鏍囩閲屻傛渶鍚庯紝杩愯html椤甸潰锛屾偍灏嗙湅鍒板涓嬪浘鎵绀虹殑瀵艰埅鏍忋
绛旓細鍦ㄤ娇鐢ㄥ閮ㄦ牱寮忚〃鐨勬儏鍐典笅,浣犲彲浠ラ氳繃鏀瑰彉涓涓枃浠舵潵鏀瑰彉鏁翠釜绔欑偣鐨勫瑙銆侰SS鏍峰紡瀹氫箟鍦.css鏂囦欢涓,鍙互閫氳繃涓瀹氱殑瑙勫垯鍦℉TML椤甸潰涓繘琛屽紩鐢,杩欑鍙堝垎涓轰袱绉嶆柟寮:瀵煎叆寮忓鍏ュ紡浣跨敤CSS瑙勫垯寮曞叆澶栭儴.css鏂囦欢,璇硶濡備笅: 4.閾炬帴寮忛摼鎺ュ紡浣跨敤HTML瑙勫垯寮曞叆澶栭儴CSS鏂囦欢,瀹冨湪缃戦〉鐨刪ead>/head>鏍囩瀵逛腑浣跨敤link>鏍囪鏉ュ紩鍏....
绛旓細绗竴绉嶅疄鐜版柟寮閫氳繃璐熻竟璺濅笌娴姩 瀹炵幇宸﹁竟鍥哄畾,鍙宠竟鑷傚簲鐨甯冨眬銆 涓昏浠ｇ爜濡備笅: .left{ float: left; width: 100%; height: 200px; background-color: red; } .left-content{ margin-left: 30%; } .right{ float: left; width: 30%; margin-left: -100%; height: 200px; background-color: green...
绛旓細1銆佹柊寤轰竴涓猦tml鏂囦欢锛屽懡鍚嶄负test.html锛岀敤浜庤瑙iv+css甯冨眬鐨勫熀鏈祦绋嬨2銆鍦test.html鏂囦欢鍐咃紝瀵筨ody杩涜鏍峰紡鍒濆鍖栵紝璁剧疆澶栬竟璺漨argin涓0锛屽唴杈硅窛padding涓0锛屽悓鏃浣跨敤text-align璁剧疆鏂囧瓧灞呬腑銆3銆佸湪test.html鏂囦欢鍐咃紝涓轰簡璁茶В鏂逛究锛岃缃墍鏈夌殑div楂樺害涓200px锛屽唴瀹圭殑棰滆壊涓虹孩鑹层4銆佸湪test.html鏂囦欢...
绛旓細浣跨敤 鏍囩杩涜缃戦〉甯冨眬鏃讹紝涓鑸渶瑕佷笌CSS鏍峰紡涓璧蜂娇鐢ㄣ侰SS鏍峰紡鍙互鐢ㄦ潵璁剧疆 鍏冪礌鐨勫ぇ灏忋佷綅缃佽儗鏅鑹层佽竟妗嗙瓑灞炴э紝浠庤屽疄鐜版洿鐏垫椿鍜岀簿纭殑甯冨眬鏁堟灉銆備互涓嬫槸涓浜涘父鐢ㄧ殑涓 鏍囩涓璧蜂娇鐢ㄧ殑CSS灞炴у拰鎶宸э細display 灞炴э細閫氳繃璁剧疆 display 灞炴т负 block銆乮nline 鎴 inline-block锛屽彲浠ユ帶鍒 鍏冪礌鐨勬樉绀...
绛旓細鏂规硶/姝ラ >01 div 鎵璋撴爣绛炬垜浠彲浠ョ悊瑙ｄ负涓涓洅瀛愩備緥濡傦細杩欓噷鏄疶op02 border:1px solid #000;锛堣繖鏄妸杈规鏄剧ず鍑烘潵锛屾柟渚挎垜浠甯冨眬锛夈俠ackground-color:#EEE;锛堣繖鏄儗鏅壊璁剧疆锛#EEE涓洪鑹插硷級銆俤iv鐨勮缃睘鎬ф湁寰堝锛屾垜灏卞ぇ鑷磋涓涓嬨傝繖閲屽彲浠ヨ缃竴涓嬪瓧浣撳眳涓紝瀛椾綋璺濈涓婁笅杈规鐨勮窛绂汇倀ext-ali...
绛旓細1銆侀鍏堟墦寮hbuilder杞欢锛屾柊寤轰竴涓猦tml鏂囦欢锛屽啓鍏ヤ竴涓猵鏍囩锛岄噷闈㈠啓鍏ヤ竴鍙ヨ瘽锛2銆佺劧鍚鍦涓婃柟瀹氫箟style鏍囩锛屼慨鏀筨ody鏍囩鐨勬牱寮忥紝杩欓噷鐢╳idth灞炴ц缃産ody鐨勫搴︿负600鍍忕礌锛岄珮搴﹁涓1000锛屽眳涓浣跨敤margin灞炴э紝鏈鍚庝负浜嗚瀵熸晥鏋滄渶鍚庡湪璁剧疆涓涓搴︿负10鍍忕礌鐨勮竟妗嗗苟缁欒竟妗嗕竴涓鑹诧細3銆佹渶鍚庢寜涓婥rtl锛婼淇濆瓨锛...
