DIV模仿完全自适应的网页框架实例_层和布局特效

缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鐐劤缂嶅﹪寮婚悢鍏尖拻閻庨潧澹婂Σ顔剧磼閹冣挃闁硅櫕鎹囬垾鏃堝礃椤忎礁浜鹃柨婵嗙凹缁ㄥジ鏌熼惂鍝ョМ闁哄矉缍侀、姗€鎮欓幖顓燁棧闂傚倸娲らˇ鐢稿蓟閵娿儮鏀介柛鈩冪懃閳峰牓姊洪幖鐐测偓鏇⑺囬幍顔藉床婵炴垶锕╅崯鍛亜閺冨洤鍚归柛鎴濈秺濮婃椽宕崟顒€娅ょ紓浣筋嚙閻楁挸顕ｇ拠娴嬫婵﹩鍋呴崟鍐⒑缂佹ê濮﹂柛鎾寸☉閳绘捇濡舵径瀣ф嫼闂佸憡绋戦敃銉╁煕閹烘鐓涘ù锝呮啞閹插憡淇婇崣澶婂妤犵偞岣块埀顒佺⊕閿氭い搴㈡崌濮婃椽宕烽鐘茬闁汇埄鍨伴敃銉х博閻旂厧鍗抽柕蹇婃閹风粯绻涙潏鍓у閻犫偓閿曞倸缁╅柡澶嬶紩閻熸壋鍫幖绮光偓鏂ユ嫬婵＄偑鍊戦崹娲€冩繝鍛唴闂備胶绮粙鎾宦ㄩ埀鐞掗梻鍌氬€搁崐鎼佸磹閹间礁纾归柟闂寸绾惧湱鈧懓瀚崳纾嬨亹閹烘垹鍊為悷婊冪箻瀵娊鏁冮崒娑氬幗闂侀潧绻嗛幊姘跺捶椤撶姷骞撳┑掳鍊曢幊蹇涙偂濞嗘挻鐓欐繛鍫濈仢閺嬫稒銇勯敐鍛仮闁哄本绋撻埀顒婄到婢у海寮ч埀顒勬⒑閸濆嫭婀版繛鍙壝銉╁礋椤栨岸鍞跺┑鐘绘涧濡藟濞嗘劗绡€闁汇垽娼ф禒锕傛煕閵婏箑鍔剁憸鐗堢矒濮婅櫣鎮伴垾鍏呭濠电偛顕慨鎾敄閸℃稑纾归柣銏犳啞閻撱儲绻濋棃娑欘棞闁哄棙鐟ラ埞鎴︽晬閸曨偄骞嬮梺鍝勬湰缁嬫捇鍩€椤掑﹦绉甸柛瀣噹閻ｅ嘲鐣濋埀顒勫焵椤掑喚娼愭繛鍙夅缚閺侇噣鏁撻悩鑼暫濠电偛妫欓幐鎼佹嫅閻斿吋鐓忓璺虹墕閸旀粓鏌￠崱鈺€閭慨濠傤煼瀹曟帒鈻庨幋顓熜滈梻浣告贡閳峰牓宕戦崟顓炲疾闂備線娼ц墝闁哄懏绋撴竟鏇熺節濮橆厾鍘介梺褰掑亰閸犳牠宕濈€ｎ喗鐓曞┑鐘插€绘禒娑㈡煏閸パ冾伃妤犵偞甯″畷鍗烆渻閹屾闂傚倸鍊风粈渚€鎮块崶顒婄稏濠㈣埖鍔曢崹鍌炴煕瑜庨〃鍛不閺嶃劎绠鹃柛鈩兩戠亸顓㈡煟椤撶噥娈旀い顓炴健閹虫粓鎯夐鍛伌闁轰礁绉电粭鐔煎焵椤掆偓椤繒绱掑Ο璇差€撻柣鐔哥懃鐎氼剚绂掗埡鍛拺闁告稑锕ラ悡銉╂⒑鐢喚鍒伴柣锝夋敱鐎靛ジ寮堕幋婵嗘暏闁荤喐绮嶇划鎾崇暦閻㈢ǹ鍗抽柣鎰ㄦ櫆閺傗偓闂備胶绮敋缁剧虎鍙冮妴鍌炲蓟閵夛妇鍘搁梺鍛婁緱閸犳宕愰幇鐗堢厸閻忕偠顕ф慨鍌炴煙椤斿搫鈧繂鐣烽幒鎴旀婵妫旂槐锟�婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繘鏌ｉ幋锝嗩棄闁哄绶氶弻鐔兼⒒鐎靛壊妲紒鐐劤椤兘寮婚敐澶婄疀妞ゆ帊鐒﹂崕鎾绘⒑閹肩偛濡奸柛濠傛健楠炲啰鎲撮崟顒€顫￠梺鐟板槻閻牓宕濋崨顓涙斀闁绘劖褰冮幃鎴︽煟濡ゅ啫鈻堟鐐插暙閻ｏ繝骞嶉搹顐も偓濠氭椤愩垺澶勯柟灏栨櫆鐎靛ジ鍩€椤掑嫭鈷掑ù锝堟鐢稓绱掔拠鎻掆偓鍧楀箖閵夛妇闄勭紒瀣劵閹芥洖鈹戦悙鏉戠仧闁搞劌缍婇幃鐐裁洪鍛幈闂佽婢橀崥鈧紒銊ョ摠娣囧﹪骞撻幒鏂库叺濠殿喖锕ㄥ▍锝囨閹烘嚦鐔烘嫚閺屻儳鈧椽姊绘担鐟邦嚋婵炴彃绻樺畷褰掓寠婢舵ê娈ㄦ繝鐢靛У閼归箖鎮橀幎鑺ョ厵濡鑳堕ˇ锕傛煙椤旇棄鐏撮柡宀€鍠栭幊鏍煛閸曞﹤顦甸弻宥堫檨闁告挻鐟ф竟鏇㈩敇閵忊晜鏅╅梺纭呮彧闂勫嫰鍩涢幒鎳ㄥ綊鏁愰崶銊ユ畬闂佸磭绮ú鐔煎蓟閿熺姴鐒垫い鎺嶇劍缂嶅洭鏌嶉崫鍕偓鐟扳枔娴煎瓨鈷戦悹鎭掑妼閺嬫柨鈹戦鑺ュ唉闁归攱鍨块幃銏ゅ礂閼测晛甯惧┑鐘垫暩閸嬬喖宕戦幘鏂ユ瀺闁糕剝绋掗悡鏇㈡倵閿濆簼绨兼い銉ｅ灲閺岋紕浠﹂崜褋鈧帒霉閻欏懐鐣电€规洘绮忛ˇ顔戒繆閹绘帞澧曟い顏勫暣婵″爼宕ㄧ€电ǹ妞介梻浣烘嚀閸ゆ牠骞忛敓锟� 缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鎯у⒔閹虫捇鈥旈崘顏佸亾閿濆簼绨奸柟鐧哥秮閺岋綁顢橀悙鎼闂侀潧妫欑敮鎺楋綖濠靛鏅查柛娑卞墮椤ユ岸姊绘担钘壭撻拑杈╃磼鐠囪尙澧曟い顐㈢箰鐓ゆい蹇撶У閺呫垽姊洪柅鐐茶嫰婢ф壆绱掗鑺モ拻闁逞屽墴濞佳囧箺濠婂牊鍋濈紓浣姑肩换鍡涙煏閸繃鍣洪柛锝嗘そ閺岋綁骞樼€靛憡鍣板┑顔硷攻濡炰粙銆佸鈧俊姝岊槾闁哄棛濮电换婵嬪煕閳ь剟宕堕埡鍐╂瘒闂備礁鎼悮顐﹀磹濠靛棭鍤曢柛顐ｆ礀缁犱即骞栫划鍏夊亾閸欏鈻曢梻鍌氬€风粈渚€骞栭锕€瀚夋い鎺戝閸庡孩銇勯弽銊р棩缂佽妫濋弻锝夊箣閻樺灚鎲橀梺杞扮閿曨亪寮婚敐澶婄闁告劘灏欏Σ鏉库攽閻愯泛顥嶇€规洜鏁稿Σ鎰板箻鐠囪尙锛滃┑鐐叉鐢晠宕ぐ鎺撯拺缂佸顑欓崕鎰版煙閸涘﹥鍊愰柍銉畵瀹曠ǹ螖娴ｅ憡鐤傞梻鍌氬€搁悧濠勭矙閹达讣缍栫€广儱顦伴埛鎴犵磽娴ｈ偂鎴犱焊椤撱垺鐓曢柣鏂挎啞鐏忥妇鈧鍠栭…宄邦嚕閹绢喗鍋勫瀣捣閻涱噣姊绘担绋款棌闁稿鎳愰幑銏ゅ磼閻愨斁鍋撻弽銊ョ窞闁归偊鍘搁幏铏圭磽閸屾瑧鍔嶅畝锝堟硶缁濡烽妷鍐嚀楗増鎯斿┑瀣粣闁诲孩顔栭崰鏍€﹂悜钘夋瀬闁圭増婢樺婵囥亜韫囨挻鍣洪柡澶嬫倐濮婄粯鎷呴崨濠呯闂佺ǹ顑嗛幐绋跨幓閸喒鏋庨柟鍨暞閺呮粓姊虹捄銊ユ珢闁瑰嚖鎷� 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鎯у⒔閹虫捇鈥旈崘顏佸亾閿濆簼绨绘い鎺嬪灪閵囧嫰骞囬鍡欑厯闂佸搫琚崝鎴﹀箖閵忋倕浼犻柛鏇熷灟閸ㄥ鎯€椤忓牆绠氱憸婊堟偂婵傚憡鐓涢悘鐐插⒔濞插鈧鍠楅幐铏繆閹间礁唯鐟滃宕戦幘娲绘晢闁告洦鍓涢崢閬嶆⒑闂堟侗妾х紒鑼跺Г娣囧﹪鎮惧畝鈧壕鐣屸偓骞垮劚閹冲繘宕板鈧弻锛勪沪閻ｅ睗褏鈧娲﹂崑濠傜暦閻旂⒈鏁冮柨婵嗘－閸熲偓婵犵绱曢崑鎴﹀磹瑜忛埀顒勬涧閻倸鐣风憴鍕秶闁冲搫鍊告惔濠傗攽閻樼粯娑фい鎴濇嚇閿濈偤宕ㄧ€涙ḿ鍙嗗┑鐘绘涧濡瑩藟閻樼粯鐓忛柛鈩兠慨宥嗘叏婵犲啯銇濈€规洦鍋婂畷鐔碱敇閻愨晜瀚涢梻鍌欑閹诧繝骞愭ィ鍐ㄧ獥閹兼番鍔嶉崑鈺冣偓鐟板鐎氬牓寮崼婵堝姦濡炪倖甯掔€氥劑宕戦幋婢濆綊宕楅崗鑲╃▏闂備礁宕ú顓㈠蓟閿濆妫橀柟绋垮閸庢挸螖閻橀潧浠﹂柛鏃€鐟ラ～蹇曠磼濡顎撻柣鐔哥懃鐎氼剚绂掗埡鍛拺缂佸鐏濋惁銊╂煕閵娿劍纭鹃柣锝呭槻閳规垿宕遍埡浣瑰€┑鐘灱濞夋盯顢栭崨鏉戠妞ゆ挶鍨洪埛鎴犵棯椤撶偞鍣虹憸鎶婂洦鈷掗柛鏇ㄥ亜椤忣參鏌涢埡鍌滄创妤犵偞甯￠獮瀣敇閻樺弶鏆╅梻浣藉吹婵儳鈻嶉敐鍥︾剨闁靛ň鏅涚粈澶愭煟閺冨倸甯堕柡瀣╃窔閺屾盯顢曢悩鎻掑闂佹娊鏀遍崹鍧楀蓟濞戞ǚ鏀介柛鈩冾殢娴煎倸顪冮妶搴′壕缂佺姵鎹囧璇测槈濞嗘垹鐦堥梺鍛婂姦娴滄粓鍩呴崷顓涘亾閸忓浜鹃梺鎸庣箓閻楀棝宕濋悽鐢电＜闁绘ê纾埥澶愭煃閽樺妲搁摶锝嗙節瑜忛崑鎾斥枍婵犲洦鐓涢悘鐐额嚙婵倻鈧鍣崳锝呯暦閹烘垟鍫柛鎰典憾閸嬔冣攽閿涘嫬浜奸柛濠冨灴瀹曟洟鎳犻鍌滅厯闂佽宕橀崺鏍綖閺囥垺鐓欓柟瑙勫姦閸ゆ瑧鐥幆褍鎮戠紒缁樼洴瀹曞崬螣閾忛€涙樊濠电姷顣介埀顒冨皺閻瑦鎱ㄦ繝鍐┿仢鐎规洦鍋婃俊鐑藉Ψ閵堝洦宕熷┑锛勫亼閸娿倝宕㈡ィ鍐ㄧ婵せ鍋撻柟顔诲嵆椤㈡瑧鎹勯妸褎婢戞繝鐢靛仦閸ㄥ爼鎮烽敃鈧埢宥夊閵堝棌鎷洪柣鐘充航閸斿苯鈻嶉幇鐗堢厵闁告垯鍊栫€氾拷闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簼閹癸綁鏌ｉ鐐搭棞闁靛棙甯掗～婵嬫晲閸涱剙顥氬┑掳鍊楁慨鐑藉磻閻愮儤鍋嬮柣妯荤湽閳ь兛绶氬鎾閳╁啯鐝栭梻渚€鈧偛鑻晶鎾煙椤斿吋鍋ユい銏″哺閸┾偓妞ゆ帒瀚拑鐔兼煥濠靛棙鍟掗柡鍐ㄧ墕閻掑灚銇勯幒鎴濐仾闁稿顑呴埞鎴︽偐閸欏鎮欓梺娲诲幗椤ㄥ﹪鎮￠锕€鐐婇柕濞р偓婵洭姊虹紒妯诲鞍闁荤啙鍛潟闁规儳鐡ㄦ刊鎾⒒閸喓銆掑ù鐘层偢濮婃椽宕崟闈涘壉缂備礁顑嗙敮妤冪矚鏉堛劎绡€闁搞儯鍔岄埀顒傚厴閺岀喎鈻撻崹顔界亾闂佺粯鎸婚幑鍥ь潖濞差亜浼犻柛鏇ㄥ亽濡茬敻姊洪柅鐐茶嫰婢ь垶鏌涢幘鏉戝摵鐎规洏鍎抽埀顒婄秵閸犳牜绮婚崷顓犵＜妞ゆ梻鍘х敮銊╂煕鐎ｎ偅宕岄柟宕囧█椤㈡鎷呯憴鍕典化闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘ｅ亾妤犵偛顦甸弫鎾绘偐椤旂懓浜鹃柛鎰靛枛楠炪垺绻涢崱妤冪闁诲孩濞婇幃妤呯嵁閸喖濮庡┑鐐额嚋缁犳垿鎮鹃悜钘夌煑濠㈣泛鐬奸鏇㈡⒑閻熸壆鎽犻柣鐔村劦閹﹢鍩￠崒銈嗩啍闂佺粯鍔︽禍婊堟倶椤忓媱搴ㄥ炊瑜濋煬顒併亜閵忥紕鈽夐柍瑙勫灴楠炲洭顢楁笟鍥ф暢闂傚倸鍊搁崐鎼佸磹閹间絸鍥敍濠婂懐鐓嬮梺鍦檸閸犳牠鎮″鈧弻鐔告綇閹呮В闂佽桨绀侀澶愬蓟濞戙垹鐒洪柛鎰典簼閸ｎ噣鏌﹂崘顔绘喚婵﹦绮幏鍛村川婵犲倹娈樻繝娈垮枛閿曘倗绱炴繝鍥ラ柛鎰ㄦ櫇缁♀偓闂佹悶鍎滈崟顑岸姊绘笟鈧埀顒傚仜閼活垱鏅堕鐐寸厪闁搞儜鍐句純濡ょ姷鍋炵敮锟犵嵁鐎ｎ亖鏀介柛銉㈡櫃婢规洖鈹戦悩鍨毄闁稿鐩畷銉р偓锝庡枛缁€澶嬬箾閸℃ɑ灏柦鍐枛閺岋綁寮崒妤佸珱闂佽桨绀侀敃顏堝蓟閵堝悿鍦偓锝庡亝閻濇棃姊虹紒妯诲暗闁哥姵鐗犻獮鍐ㄎ旈崘鈺佹瀭闂佸憡娲﹂崜娑⑺囬妸銉㈡斀闁绘劘娉涢惃娲煕閻樺磭澧い鏇稻缁绘繂顫濋鈧懓鍨攽鎺抽崐鏇㈡晝閵堝绠栭柟杈鹃檮閳锋垿鏌涘☉姗堟缂佸爼浜堕弻娑㈠Ω閿曗偓閳绘洜鈧娲忛崹浠嬨€佸Δ鍛妞ゆ垼濮ょ€氳棄鈹戦悙鑸靛涧缂傚秮鍋撴繝娈垮枔閸婃鈽夐悽绋块唶闁哄洨鍠撻崢閬嶆⒑閹稿海绠撶紒缁樺浮閹箖宕归顐ｎ啍闂佺粯鍔樼亸娆戠不婵犳碍鐓涘ù锝堫潐瀹曞矂鏌℃担瑙勫磳闁轰焦鎹囬弫鎾绘晸閿燂拷,闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳婀遍埀顒傛嚀鐎氼參宕崇壕瀣ㄤ汗闁圭儤鍨归崐鐐差渻閵堝棗绗傜紒鈧笟鈧畷婊堫敇閻戝棙瀵岄梺闈涚墕濡鎱ㄨ缁辨帡鎮╅崘鑼患缂備緡鍠栭悧蹇涘焵椤掑﹦绉甸柛瀣╃劍缁傚秴饪伴崼鐔哄幍闂侀€涚祷濞呮洖鈻嶉崨瀛樼厽闊洤锕ュ▍鍥煙椤曞懎鏋涙い顐ｇ矒閸┾偓妞ゆ巻鍋撴い顐㈢箳缁辨帒螣鐠囧樊鈧挾绱撴担鍦槈妞ゆ垵鎳庨埢鎾活敇閻愨晜鏂€濡炪倖姊归弸濠氬礂椤掑倻纾奸柣妯挎珪瀹曞矂鏌℃担鐟板闁诡喗鐟╁鍫曞箣閻樼數宓侀梻浣筋嚙閸戠晫绱為崱娑樼婵炴垯鍩勯弫濠囨煛閸モ晛鏋旂紒鈾€鍋撻梻浣圭湽閸ㄨ棄岣胯閻☆參姊绘担鍛靛綊顢栭崨顓囨稑鈹戦崱娆愭闂佹眹鍨绘灙闁告濞婇弻鏇＄疀閵壯咃紵闂佸憡锚瀹曨剟鈥旈崘顔嘉ч柛鈩冾殔琛肩紓鍌欑劍瑜板啯鏅堕悾灞藉灊闁割偁鍎遍悞鍨亜閹烘垵鈧崵澹曢挊澹濆綊鏁愰崱妤冪シ婵炲瓨绮撶粻鏍ь潖濞差亜宸濆┑鐘插€搁～鍛存⒑閸濆嫬鈧悂宕愰崷顓犵焿鐎广儱鎳夐崼顏堟煕椤愩倕鏋旈柛妯绘倐濮婅櫣绮欓幐搴㈡嫳濠殿喗菧閸斿秶绮嬮幒妤€顫呴柕鍫濇閸橀潧顪冮妶鍡橆梿婵☆偄瀚伴幃姗€鏁冮崒娑氬帾闂佹悶鍎滈崘鍙ョ磽缂傚倷鑳舵慨鐢告儎椤栨凹鍤曢柟缁㈠枟閸婄兘鎮楅悽鐢点€婇柛瀣崌瀹曟粏顦寸痪鎹愭闇夐柨婵嗙墛椤忕娀鎮介娑氭创闁哄矉缍侀崺鈩冪節閸屾粈妗撻梻浣虹帛娓氭宕板璺虹劦妞ゆ帒锕︾粔鐢告煕閻樻剚娈滅€规洘鍔欓幃婊堟嚍閵壯冨箰濠电姰鍨煎▔娑㈩敄閸涘瓨鍊堕柍鍝勫€荤粻楣冩煕椤愶絿鈽夐柍褜鍓氱换鍌烇綖韫囨洜纾兼俊顖濐嚙椤庢捇姊洪崨濠勬创婵炰匠鍛濠电姴娲㈤埀顑跨窔瀵粙顢橀悙鑼垛偓鍨攽閻愭潙鐏﹀畝锝呮健椤㈡瑦寰勯幇顓涙嫼闂佺鍋愰崑娑㈠礉閳ь剟鏌ｈ箛鏇炰粶濠⒀呮櫕缁瑦绗熼埀顒€顫忕紒妯诲闁告稑锕ら弳鍫㈢磽娴ｇ瓔鍤欓柛濠傤煼閸┾偓妞ゆ帊鑳跺▓浼存煕閵夋垵鍟▓銈夋⒑閻熸澘鎮戦柣锝庝邯瀹曟繂顓兼径瀣簵濠电偛妫欓崝鎴炵濠婂牊鐓涚€规搩鍠栫€氬嘲螞閻愮儤鐓熼幖娣灩閸ゎ剟鏌涢悩鎰佹畼缂侇喖顑呴鍏煎緞濡粯娅嗛梻浣稿閸嬪棝宕崸妤€绠紓浣贯缚缁犻箖寮堕崼婵嗏挃闁告帊鍗抽弻鐔烘嫚瑜忕弧鈧悗瑙勬处閸ㄥ爼骞冨▎鎾村€绘俊顖滃帶楠炴姊绘担铏瑰笡婵﹦鎳撳玻鍨枎閹惧磭顦梺闈涚墕椤︿即鎮″▎鎰垫闁绘劘灏欐禒銏ゆ煟韫囧﹥娅婇柟钘夌埣閺佹劙宕ㄩ鐔蜂壕闁圭儤鍩堝ḿ鈺呮煟閹捐櫕鎹ｅù鐘櫅閳规垿鎮欓懠顒€顣堕梺鍛婃煥缁夊爼骞戦姀鐘斀閻庯綆鍋勬禒娲⒒閸屾氨澧涢柛鎺嗗亾闂佹寧绻傚ú銊ノ涢鐐寸厸濠㈣泛瀛╃涵鍫曞极閸儲鍊垫繛鍫濈仢閺嬬喖鏌ｉ幙鍕瘈闁绘侗鍣ｅ浠嬪Ω閿曗偓椤庢捇姊洪棃鈺佺槣闁告ḿ鍘ч锝夊箮閼恒儮鎷绘繛杈剧秬濞咃絿鏁☉娆戠闁告瑥顦辨晶鐢碘偓瑙勬礃閸旀瑥鐣烽悜绛嬫晣婵炴垶眉婢规洖鈹戦缁撶細闁稿鎸鹃埀顒佺啲閹凤拷!

DIV完全自适应的实例，利用overflow:hidden你可以去掉默认存在的滚动条，一个仿框架的div布局就非常容易了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<title>div仿框架布局</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html { height:100%; overflow:hidden; background:#fff;}
body { height:100%; overflow:hidden; background:#fff;}
div { background:#f60; line-height:1.6;} /* www.mb5u.com */
.top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
.side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
.main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}
.bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
html { _padding:70px 10px;} /* www.mb5u.com */
.top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
.side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
.main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
.bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
</style>
</head>
<body>
<div class="top"></div>
<div class="side">
			 
			 
			 
			 
			 
			 
			 
			 
			 
</div>
<div class="main">
			 
			 
			 
			 
			 
			 
			 
			 
			 
</div>
<div class="bottom"></div>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-11-17

[收藏][报错][返回列表]

评论加载中....

DIV模仿完全自适应的网页框架实例_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些