带来一篇CSS制造网页实例:DIV仿框架布局

只看该作者 · 发表于 2015-1-15 23:31:19

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

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

x

你可以轻松地控制页面的布局。
网页制造poluoluo文章简介：使用box-sizing完成div仿框架.
[介入测试的扫瞄器：IE6/IE7/IE8/FF3/OP10/SF4/Chrome2]
[操纵体系：Windows]
先看代码：
运转代码框
<!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"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>使用box-sizing完成div仿框架</title><styletype="text/CSS">*{margin:0;padding:0;}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:100px0;overflow:hidden;}html,body{height:100%;}.top{position:relative;margin-top:-100px;height:100px;background:#f60;}.side{position:relative;height:100%;background:#fc0;overflow:auto;width:200px;float:left;margin-right:0!important;margin-right:-3px;overflow:auto;}.main{position:relative;overflow:auto;height:100%;background:#f30;}.bottom{position:relative;height:100px;background:#f60;clear:both;}</style></head><body><divclass="top">top</div><divclass="side">side </div><divclass="main">main </div><divclass="bottom">bottom</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
关头部分：
html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:100px0;overflow:hidden;}
道理也许就是如许的：

登录/注册后可看大图

千言万语抵不外一副画，经由过程整容前后的对照，人人应当能看出box-sizing:border-box的感化了。
懂得box-sizing的同砚们应当晓得，它来自离微国对照悠远的css3天下，因而IE6/IE7是不撑持的，但我很卖力任滴说：本demo一般兼容IE6/IE7。
由于……
IE6/IE7下，<html>的box-sizing默许值本就是border-box（注：IE7有一点点不一般，overflow:hidden后神态有所恢复，将不影响本demo一般运作）。、
如今的成绩就是是否是要接纳这个办法了，给点好坏的对照，人人自行推敲吧：
对照利用相对定位的办法来完成，这个办法在今朝次要存在两个上风：

针对每种扫瞄器基础利用的统一办法，css代码复杂，易修正、易了解。
兼容。相对定位的办法在OP10下存在临时找不着修复bug的举措，只好绕个弯走了。

它最年夜的优势就是欠天真，假如没有IE6，我想我是坚定选择相对定位的办法的。
以下为使用实例demo。
运转代码框
<!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"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>使用box-sizing完成div仿框架</title><styletype="text/css">*{margin:0;padding:0;}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:100px0;position:relative;overflow:hidden;}html,body{height:100%;}.top{position:relative;margin-top:-100px;height:100px;background:#f60;}.side{position:relative;height:100%;background:#fc0;overflow:auto;width:200px;float:left;margin-right:0!important;margin-right:-3px;overflow:auto;}.main{position:relative;overflow:hidden;height:100%;background:#f30;padding-top:100px;margin-top:-100px;top:50px;margin-left:200px;_margin-left:0;z-index:2;}.mainiframe{height:100%;width:100%;background:#fff;position:absolute;left:0;top:0;}.bottom{position:relative;height:100px;background:#f60;clear:both;}</style></head><body><divclass="top">top</div><divclass="side">side </div><divclass="main"><iframeframeborder="0"src="http://www.g.cn/"></iframe> </div><divclass="bottom">bottom</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
一个应注重的成绩：
不要给body以overflow:hidden，它将会无情地埋没失落任安在它之外的任何器材，包含top/bottom（header/footer）；
一个应了解的要点：
[100%+(N)px]的高度发生的办法：div{height:100%;padding-top:(N)px;}。

有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等

只看该作者 · 发表于 2015-1-17 23:00:28

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-1-24 23:45:25

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-2 16:51:35

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

只看该作者 · 发表于 2015-2-8 03:43:54

可以使用 CSS 检查工具进行设计。

只看该作者 · 发表于 2015-2-24 13:19:30

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-7 13:01:10

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-3-15 07:28:21

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

只看该作者 · 发表于 2015-3-21 23:32:14

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

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

[DIV+CSS] 带来一篇CSS制造网页实例:DIV仿框架布局

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

相关帖子