html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
DIV CSS:网页一行两列背景自适应
时间:2016-03-29
网页布局中常有的一种情况就是网页主体部分分成一行两列;而在很多种情况下,设计师们常把左右两列的背景色设计成不同色彩,以实现内容块的明显区分;但这样的设计给布局提出了一个看似简单,而实现非常难的问题;那就是左右两列怎么样实现背景高度自适应,及左边内容高于右边时,右边背景色也要和左边一样;右边内容高于左边时,左边背景色也要和右边一样;
当年为了实现这个,我在网上查过无数的文章,都没有很好的解决方案;多数人用很大的负数实现,也有人用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>
演示效果:
<!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>http://www.zishu.cn</title> <style> *{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;} #box{ background:#FFCC00;width:700px; border-left:200px solid #FF9900;} #left{margin-left:-200px; width:200px; position:static;} * html #left{position:fixed;} #right{float:right; width:695px;} </style> </head> <body> <div id="box"> <div id="right">right <br /> right</div> <div id="left">left</div> <div style="clear:both"></div> </div> 转载请注明出处:子鼠 </body> </html>
[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>
演示效果:
<!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>http://www.zishu.cn</title> <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> </head> <body> <div id="box"> <div id="content"> <div id="right">right <br />right</div> <div id="left">left</div> </div> </div> 转载请注明出处:子鼠 </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
上一条:提高CSS的网页渲染效率11个注意点
下一条:CSS初学:如何修改Zblog中的CSS
相关文章
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
demo展示1: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w
JQuery获取文章内容页自适应高度,优化界面外观
如何用js得到当前页面的url信息方法(JS获取当前网址信息)
设置或获取对象指定的文件名或路径。alert(window.location.pathname
分享js跳转页面方法
spanid=tiao"
jquery对单位进行换算的“笨”方法
DEDE项目上 编辑软件大小(单位换算):$(doc
JS简单页面倒计时转跳
script language="javascript"&g
最新文章
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 p 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了
何为百度移动网站MIP?MIP对网站有什么帮助?
随着移动互联网的发展,网友们对于移动产品服务体验要求也越来越高,当然了像移动网站体验也包括在内,随着互联网技术的发展,现在移动网站页面技术也一直在提升和创新,今
js实现点击按钮复制文本功能
如何去掉html中input的边框
js 判断字符串中是否包含某个字符串
织梦DedeCms做SEO优化必做的步骤
video标签设置autoplay在手机浏览器无法自动播放视频的解决方案
让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
怎么拿到input file上传的文件名字显示到页面中
何为百度移动网站MIP?MIP对网站有什么帮助?
swiper无法自动播放的解决办法
bootstrap在移动浏览器下响应式不起作用的解决方法