无为清净楼资源网 Design By www.qnjia.com
网页布局中常有的一种情况就是网页主体部分分成一行两列;而在很多种情况下,设计师们常把左右两列的背景色设计成不同色彩,以实现内容块的明显区分;但这样的设计给布局提出了一个看似简单,而实现非常难的问题;那就是左右两列怎么样实现背景高度自适应,及左边内容高于右边时,右边背景色也要和左边一样;右边内容高于左边时,左边背景色也要和右边一样;
当年为了实现这个,我在网上查过无数的文章,都没有很好的解决方案;多数人用很大的负数实现,也有人用javascript实现; 后来因为感觉这样实现不合理,所以我一直用表格来实现; 因为这样最简单; 但今天同事问起我这个问题,我中午仔细想了想;想出了一个解决办法,写出来和大家分享;
基本原则:
1、布局要合理,不能为了实现这样的效果而使html的代码变得臃肿;
2、CSS部分也要简单巧妙实现,不能为了这样的效果而写大量的代码;而主要的还是浏览器兼容方面要没有问题;
以下是我实现的代码,说明一下,这样的布局还不是很理想;但这已是我暂时能想到的最好解决办法了;
实现方法一:左边用边框,右边用背景色;
这个方法是左边用200PX的边框来实现一列的背景,再用这个标签的实际背景色来实现另一列的背景,这样左右永远都是一样高的;
程序代码
<div id="box">
<div id="right">right <br /> right</div>
<div id="left">left</div>
<div style="clear:both"></div>
</div>
程序代码
<style>
/*这一行可能不用看,是废话,为了好看一点*/
*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;}
/*最外边的一个盒子,左边框200PX,有背景色*/
#box{ background:#FFCC00;width:700px; border-left:200px solid #FF9900;}
/*让左边的一列向左移动200PX*/
#left{margin-left:-200px; width:200px; position:static;}
/*由于IE和FIREFOX有区别,所以对IE加了一行作处理*/
* html #left{position:fixed;}
/*右边的宽度,这里我为什么没有写700PX;说实话,我实在没有想明白;这里最多只能写900-200-2=698PX;但这在使用过程中,并不会有影响;*/
#right{float:right; width:695px;}
</style>
演示效果:
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
方法一存在一个问题:就是如果左边的背景是一张图怎么办?对,如果是纯色,那么没有问题;如果是一张图,就没有办法了;所以我写了第二种解决办法;
实现方法二:用嵌套实现两列背景;这个方法我个人推荐使用;
程序代码
<div id="box">
<div id="content">
<div id="right">right <br />right</div>
<div id="left">left</div>
</div>
</div>
CSS部分我不用解释了吧!
程序代码
<style>
*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;}
#box{ background:#FFFF66;width:700px; padding-left:200px; float:left;}
#content{ background: #FF6600; float:left;}
#right{ width:695px; float:right;}
#left{ width:200px; margin-left:-200px; position:static; float:left;}
* html #left{position:fixed;}
</style>
演示效果:
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年07月01日
2024年07月01日
- 群星2001-大宅门电视剧原声大碟[首版][WAV+CUE]
- 群星2001-芭啦芭啦樱之花电影原声带AVCD[香港首版][WAV+CUE]
- 群星2001-重回摇滚舞台·纪念薛岳逝世十周年演唱会2CD[引进版][WAV+CUE]
- 群星2001-林夕音乐词典2CD[香港首版][WAV+CUE]
- 《101系列 金声回忆 101 蔡琴》[WAV+CUE][3.23GB]
- 《101系列:True Legend 101 陈百强》[WAV+CUE][2.8GB]
- 《陈百强28CD合集》1979-1993 低速原抓[CUE+WAV][8.3G]
- 【蓝调摇滚】JohnHaydock-2024-StraightLineOnACurvedRoad(FLAC)
- 感受独特魅力《百万双钢琴演奏曲》5CD[WAV+CUE]
- 【古典音乐】安娜·莫福《咏叹调》美国版SACD[WAV+CUE]
- 《法拉利·汽车专用试音碟》名贵音响顶级黑胶金碟[CUE+WAV][478M]
- 群星《惠威试音碟5CD》顶级音质[CUE+APE][1.7G]
- 《101系列:百分百3CD 100首百分百经典金曲》[WAV+CUE][2.9GB]
- 群星.2004-《第八届广州国际高级音响展》HIFI珍藏版[APE+CUE]
- 红音堂《蔡琴往事系列》SQCD紫银合金5CD[wav]