CSS基础教程：DIV制作框架布局_html-js-css

概述网(LieHuo.Net)教程刚刚学习CSS技术，还不是太熟练，还好，咱的时间多能坚持！终于做出一个可以同时兼容FF,IE6,7,8几大浏览器的框架布局页面，还有几个细小的问题，并不影响使用，特别分享给大家，多提意见！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q…

　　内存溢出 jb51.cc 刚刚学习CSS技术，还不是太熟练，还好，咱的时间多能坚持！终于做出一个可以同时兼容FF,ie6,7,8几大浏览器的框架布局页面，还有几个细小的问题，并不影响使用，特别分享给大家，多提意见！

<!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.wfuyu.com*/</style><body><div class="container"><div class="header"><div class="header_top"><div class="logo"><img src="http://www.wfuyu.com/lIEhuo.net/images/lIEhuo2009/logo.gif" alt="" /></div><div class="menu"><ul class="menu_image"><li class="tu"><img src="http://www.wfuyu.com/uploads/allimg/0912/lIEhuouser.png" /></li><li class="tu"><img src="http://www.wfuyu.com/uploads/allimg/0912/lIEhuouser.png" /></li><li class="tu"><img src="http://www.wfuyu.com/uploads/allimg/0912/lIEhuouser.png" /></li><li class="tu"><img src="http://www.wfuyu.com/uploads/allimg/0912/lIEhuouser.png" /></li><li class="tu"><img src="http://www.wfuyu.com/uploads/allimg/0912/lIEhuouser.png" /></li><li class="tu"><img src="http://www.wfuyu.com/uploads/allimg/0912/lIEhuouser.png" /></li><li class="tu"><img src="http://www.wfuyu.com/uploads/allimg/0912/lIEhuouser.png" /></li></ul><ul class="menu_text"><li class="zi">系统设置</li><li class="zi">用户管理</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>角色：系统管理员</li><li>用户名：系统管理员 </li></ul></div><div class="state"><p>注销</p></div><div class="disappear"></div><div class="clearboth"></div></div><div class="header_bottom"><span class="h_b_left">管理系统</span><span class="h_b_right">当前版本：1.0</span><div class="clearboth"></div></div></div><div class="mainer"><div class="sIDeleft"><iframe frameborder="0" src="http://www.wfuyu.com/"></iframe></div><div class="sIDecenter"><</div><div class="sIDeright"><iframe frameborder="0" src="http://www.wfuyu.com/"></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>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

总结

以上是内存溢出为你收集整理的CSS基础教程：DIV制作框架布局全部内容，希望文章能够帮你解决CSS基础教程：DIV制作框架布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1021921.html

CSS基础教程：DIV制作框架布局

发表评论

评论列表（0条）