您當(dāng)前位置：首頁(yè) > web前端 > htmlcss > CSS基礎(chǔ)教程：DIV制作框架布局

CSS基礎(chǔ)教程：DIV制作框架布局

來(lái)源：程序員人生發(fā)布時(shí)間：2014-06-08 18:55:44 閱讀次數(shù)：2692次

　　網(wǎng)(LieHuo.Net)教程剛剛學(xué)習(xí)CSS技術(shù)，還不是太熟練，還好，咱的時(shí)間多能堅(jiān)持！終于做出一個(gè)可以同時(shí)兼容FF,IE6,7,8幾大瀏覽器的框架布局頁(yè)面，還有幾個(gè)細(xì)小的問(wèn)題，并不影響使用，特別分享給大家，多提意見(jiàn)！

<!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" content="text/html; charset=GBK" /><title>CSS+DIV制作框架布局教程</title></head><style type="text/css" />* {padding:0;margin:0;list-style:none;font-family:宋體;font-size:12px;font-weight:400;line-height:20px;}html {height:100%;}body {background-color:#fff;height:100%;width:expression((documentElement.clientWidth<1000) ? 1000px : auto );}.clearboth {clear:both;}iframe {width:100%;height:100%;}.container {width:100%;height:100%;}.header {height:130px;position:absolute;left:0;top:0;right:0;min-width:980px;}.header_top {height:106px;background:#468ab4;min-width:980px;}.logo {padding:8px 50px 0 8px;float:left;display:inline;}.menu {float:left;display:inline;width:570px;}.menu_image {float:left;width:570px;margin:10px 0 0 1px;padding:0;}.tu {float:left;margin:0 20px 0 0;}.menu_text {float:left;width:570px;}.zi {float:left;font-size:13px;font-weight:700;width:60px;text-align:center;margin:0 20px 0 0;}.person {float:left;width:150px;display:inline;padding-top:35px;}.state {padding:70px 0 0;float:left;width:50px;display:inline;}.state p {font-size:13px;font-weight:700;}.disappear {visibility:hidden;display:none;}.header_bottom {background-color:#468ab4;height:24px;line-height:24px;vertical-align:middle;color:#FFF;min-width:980px;}.h_b_left {float:left;padding-left:12px;}.h_b_right {float:right;padding-right:120px;}.sideleft {position:absolute;width:190px;top:130px;left:0;bottom:28px;border-left:10px solid #468ab4;overflow:auto;}.sidecenter {background-color:#468ab4;width:10px;position:absolute;top:130px;left:200px;bottom:28px;}.sideright {position:absolute;top:130px;left:210px;right:0;bottom:28px;border-right:10px solid #468ab4;min-width:760px;}.footer {position:absolute;height:28px;background:#468ab4;left:0;bottom:0;right:0;text-align:center;min-width:980px;}.footer span {line-height:28px;vertical-align:middle;color:#FFF;display:block;width:100%;}/******IE6********/html {padding:130px 10px 28px;}.header {height:130px;margin-top:-130px;position:relative;top:0;right:0;bottom:0;left:0;}.container {min-width:1004px;}.sideleft {height:100%;float:left;width:200px;position:relative;top:0;right:0;bottom:0;left:0;}.sidecenter {height:100%;float:left;width:10px;position:relative;top:0;right:0;bottom:0;left:0;}.sideright {height:100%;margin-left:210px;_margin-left:207px;position:relative;top:0;right:0;bottom:0;left:0;}.footer {height:28px;position:relative;top:0;right:0;bottom:0;left:0;}/*by www.vxbq.cn*/</style><body><div class="container"><div class="header"><div class="header_top"><div class="logo"><img src="http://www.vxbq.cn/liehuo.net/images/liehuo2009/logo.gif" alt="" /></div><div class="menu"><ul class="menu_image"><li class="tu"><img src="http://www.vxbq.cn/uploads/allimg/0912/liehuouser.png" /></li><li class="tu"><img src="http://www.vxbq.cn/uploads/allimg/0912/liehuouser.png" /></li><li class="tu"><img src="http://www.vxbq.cn/uploads/allimg/0912/liehuouser.png" /></li><li class="tu"><img src="http://www.vxbq.cn/uploads/allimg/0912/liehuouser.png" /></li><li class="tu"><img src="http://www.vxbq.cn/uploads/allimg/0912/liehuouser.png" /></li><li class="tu"><img src="http://www.vxbq.cn/uploads/allimg/0912/liehuouser.png" /></li><li class="tu"><img src="http://www.vxbq.cn/uploads/allimg/0912/liehuouser.png" /></li></ul><ul class="menu_text"><li class="zi">系統(tǒng)設(shè)置</li><li class="zi">用戶(hù)管理</li><li class="zi">欄目管理</li><li class="zi">欄目管理</li><li class="zi">欄目管理</li><li class="zi">欄目管理</li><li class="zi">欄目管理</li></ul><div class="clearboth"></div></div><div class="person"><ul><li>2009年11月8日星期三</li><li>角色：系統(tǒng)管理員</li><li>用戶(hù)名：系統(tǒng)管理員 </li></ul></div><div class="state"><p>注銷(xiāo)</p></div><div class="disappear"></div><div class="clearboth"></div></div><div class="header_bottom"><span class="h_b_left">管理系統(tǒng)</span><span class="h_b_right">當(dāng)前版本：1.0</span><div class="clearboth"></div></div></div><div class="mainer"><div class="sideleft"><iframe frameborder="0" src="http://www.vxbq.cn/"></iframe></div><div class="sidecenter"><</div><div class="sideright"><iframe frameborder="0" src="http://www.vxbq.cn/"></iframe></div><div class="clearboth"></div></div><div class="footer"><span>Copyright © 2009 Liehuo.net All Rights Reserved.</span></div></div></body></html><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線(xiàn)----------------------------

上一篇 導(dǎo)出 Access 2007 中表時(shí)沒(méi)有主鍵列的數(shù)據(jù)位于的 SharePoint 列表數(shù)據(jù)視圖

下一篇 如何解決AJAX的跨瀏覽器問(wèn)題

分享到:

------分隔線(xiàn)----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS基礎(chǔ)教程：DIV制作框架布局