来一发DIV+CSS：网页一行两列背景自顺应

只看该作者 · 发表于 2015-1-16 00:10:46

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以轻松地控制页面的布局。
网页结构中常有的一种情形就是网页主体部分分红一行两列；而在良多种情形下，计划师们常把摆布两列的背景致计划成分歧色采，以完成内容块的分明辨别；但如许的计划给结构提出了一个看似复杂，而完成十分难的成绩；那就是摆布两列怎样完成背景高度自顺应，及右边内容高于右侧时，右侧背景致也要和右边一样；右侧内容高于右边时，右边背景致也要和右侧一样；
昔时为了完成这个，我在网上查过有数的文章，都没有很好的办理计划；多半人用很年夜的正数完成，也有人用javascript完成；厥后由于感到如许完成分歧理，以是我一向用表格来完成；由于如许最复杂；但明天同事问起我这个成绩，我午时细心想了想；想出了一个办理举措，写出来和人人分享；
基础准绳：
1、结构要公道，不克不及为了完成如许的效果而使html的代码变得痴肥；
2、CSS部分也要复杂奇妙完成，不克不及为了如许的效果而写大批的代码；而次要的仍是扫瞄器兼容方面要没有成绩；
以下是我完成的代码，申明一下，如许的结构还不是很幻想；但这已经是我临时能想到的最好办理举措了；
完成办法一：右边用边框，右侧用背景致；
这个办法是右边用200PX的边框来完成一列的背景，再用这个标签的实践背景致来完成另外一列的背景，如许摆布永久都是一样高的；

程序代码
<divid="box">
<divid="right">right<br/>right</div>
<divid="left">left</div>
<divstyle="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:200pxsolid#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>
演示效果：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-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:200pxsolid#FF9900;}#left{margin-left:-200px;width:200px;position:static;}*html#left{position:fixed;}#right{float:right;width:695px;}</style></head><body><divid="box"><divid="right">right<br/>right</div><divid="left">left</div><divstyle="clear:both"></div></div>转载请说明出处：子鼠</body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
办法一存在一个成绩：就是假如右边的背景是一张图怎样办？对，假如是纯色，那末没有成绩；假如是一张图，就没有举措了；以是我写了第二种办理举措；
完成办法二：用嵌套完成两列背景；这个办法我团体保举利用；

程序代码
<divid="box">
<divid="content">
<divid="right">right<br/>right</div>
<divid="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>
演示效果：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-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><divid="box"><divid="content"><divid="right">right<br/>right</div><divid="left">left</div></div></div>转载请说明出处：子鼠</body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。

只看该作者 · 发表于 2015-1-18 05:30:07

AdobeDreamweaverCS5软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的AdobeCSLive在线服务AdobeBrowserLab集成。

只看该作者 · 发表于 2015-1-24 16:58:29

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-2-2 11:43:49

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-2-7 19:55:49

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-2-23 10:48:13

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-7 08:35:57

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-3-14 20:55:28

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-3-21 16:19:55

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发DIV+CSS：网页一行两列背景自顺应

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子