网页三列自适应等高且中列宽度自适应

您现在的位置：中国互联帮助中心>> 最新资讯>>详细内容

<<返回上一页

网页三列自适应等高且中列宽度自适应: 大中小文章来源：中国互联更新时间：2011-8-18

分享到：

<p>　　网页三列自适应等高且中列宽度自适应的CSS布局实例，作者silence应用了很多HACK进行代码编写。</p> <p>　　IE6是主要出现问题的浏览器，希望在以后的发展中，IE6与标准不再协调的事情不要再次发生。我们看代码：</p> <p align="center"><textarea class="fm" id="code" style="WIDTH: 490px; HEIGHT: 466px" rows="27" cols="78"><!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=utf-8" /> <title>三列自适应等高且中列宽度自适应 - www.webjx.com</title> <style type="text/css"> a{ color:#30C;} .wrap{overflow:hidden;} .left{width:250px;float:left; background:#FC9;} .right{width:250px;float:right;background:#FC9;} .center{ background:#FC0;_float:left;/* ie6 hack*/ overflow:hidden;} .row{margin-bottom:-10000px;padding-bottom:10000px;} </style> </head> <body> <div class="wrap"> <div class="left row"><a href="#">www.webjx.com</a></div> <div class="right row"> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> </div> <div class="center row"> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <span style="float:right; position:relative;"> </span>  </div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按

分享到：复制地址新浪微博腾讯微博 QQ空间开心网人人网百度空间百度贴吧网易微博搜狐微博

上一篇：音乐和歌词同步的网页特效代码

下一篇：网页分栏特效

广告联盟中的CPA、CPS、CPC、CPM分别是什么意思