来讲讲：CSS计划多列多模块等高网页结构

只看该作者 · 发表于 2015-1-16 00:07:33

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

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

x

符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
　　起首给人人看一个图：

　　之前我们在结构这类必要多列多模块，多列等高，一样平常会选择横着切一张背景图来举行摹拟，这个也是没有举措的举措。
　　我们晓得纯真的两列等高我们能够使用正内边距加负外边距来完成。padding-bottom:32767px;margin-bottom:-32767px;
　　这个办法的道理是事前经由过程正内边距来使其具有充足高的结构控件，然后经由过程负外边距来使得其的地位稳定。经由过程给父元素溢出埋没，我们能够埋没失落事前占有的充足高的空间。由两列实践的内容高度来决意全部父元素的高度，从而完成了等高。
　　习气头脑上，我们都是多列等高，然后把这几列都浮动。如今我们变更一下思绪，间接利用不浮动的一列的时分，情形会如何，我们发明，当一列不浮动搭配正内边距加负外边距，父元素溢出埋没，它的高度跟仍是由内涵元从来决意，可是经由过程webdevelopertoolbar我们能够看到它实践上已占有了充足的高度空间。

登录/注册后可看大图

　　一样的事理，定位也遵守这个划定规矩。我们能够把两侧边框利用相对定位来流动到两侧，由于相对定位是不占结构空间的，那末我们必要一个文档流来对父元素举行占位。基础上父元素有多高，就显现相对定位的元素几内容，实践上这也就完成了一个等高。
　　晓得了这个体现道理，那末我们上文的结构也就不难了，只必要把每列最初一个模块再举行正内边距加负外边距来举行空间占位就能够完成了！至于下边框，实践上别的一个容器从底下举行拼装完成的~！
　　上面放上全体代码：

<!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>无题目1</title><styletype="text/CSS">*{margin:0;padding:0;}body{margin:30px;font:14px/1.6emVerdana,Lucida,Arial,Helvetica,宋体,sans-serif;}.main{overflow:hidden;width:800px;margin:0auto;}.left{float:left;width:250px;overflow:hidden;}.center{float:left;margin-left:5px;width:295px;}.right{float:right;width:245px;overflow:hidden;}.bor_top{height:1px;background:#FB9D51;overflow:hidden;}.equal{padding-bottom:32767px;margin-bottom:-32767px;}.box{background:#F5E2AF;border:1px#FB9D51solid;padding-left:10px;padding-right:10px;}.mt5{margin-top:5px;}</style></head><body><divclass="main"><divclass="leftequal"><divclass="box"><p>你信任这个摆布等高的结构是纯的CSS写的吗？</p></div><divclass="boxmt5"><p>来测试一下吧？~！</p></div><divclass="boxmt5"><p>测试一下</p></div><divclass="equalmt5box"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div></div><divclass="centerequal"><divclass="box"><p>忍不住你不信，这个切实其实是纯CSS写的</p></div><divclass="boxmt5"><p>来测试一下吧？~！</p></div><divclass="boxmt5"><p>测试一下</p></div><divclass="equalmt5box"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div></div><divclass="equalright"><divclass="box"><p>测试一下</p><p>测试一下</p></div><divclass="boxmt5"><p>测试一下</p><p>测试一下</p><p>测试一下</p></div><divclass="boxmt5"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div><divclass="equalmt5box"><p>测试一下</p><p>测试一下</p><p>测试一下</p></div></div></div><divclass="main"><divclass="leftbor_top"></div><divclass="centerbor_top"></div><divclass="rightbor_top"></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
　　上述代码在IE6,IE7,FIREFOX里皆能一般显现，可是在IE8BETA1内里，仿佛必需共同浮动，正内边距跟负外边距的过剩空间才干被埋没，但愿正式版的IE8会修复这一点。假如想在IE8BETA1内里一般显现，请人人把最初一个模块也举行浮动便可~！在此就不做演示了！

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。

只看该作者 · 发表于 2015-1-18 05:15:35

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

只看该作者 · 发表于 2015-1-18 05:15:35

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet)的家喻户晓。

只看该作者 · 发表于 2015-1-18 05:15:35

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。

只看该作者 · 发表于 2015-1-25 15:02:35

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

只看该作者 · 发表于 2015-2-2 22:38:09

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-8 20:00:43

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-2-26 02:50:35

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-8 11:44:02

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

只看该作者 · 发表于 2015-3-15 23:16:18

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

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

[DIV+CSS] 来讲讲：CSS计划多列多模块等高网页结构

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

相关帖子