CSS教程之CSS floats创立三栏网页结构

只看该作者 · 发表于 2015-1-16 00:14:25

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

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

x

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
三栏结构是今朝最多见的网页结构，次要页内容放在两头一栏，边上的两栏安排导航链接之类的内容。基础结构通常为题目之下安排三栏，三栏占有全部页面的宽度，最初在页的底端安排页脚，页脚也占有全部页面宽度。
　　

　　尽年夜多半网页计划者都熟习传统的网页计划手艺，用这些手艺能够天生带有表格、创立流动宽度结构大概“液态”（它能够依据用户扫瞄器窗口宽度主动伸缩）结构的网页。
　　如今，我们都入手下手丢弃基于表格的结构手艺，很多收集计划者正在从XHTML标志和CSS格局这一新典范中寻觅创立三栏结构的办法。用相对定位的办法从CSS中失掉流动宽度的结构其实不坚苦；可是失掉液态结构就有点坚苦了。因而，本文先容一种用CSS的float和clear属性来取得三栏液态结构的办法。
　　基础办法
　　基础的结构包括五个div，即题目、页脚和三栏。题目和页脚占有全部页宽。左栏div和右栏div都是流动宽度的，而且用float属性来把它们挤压到扫瞄器窗口的左边和右边。中栏实践上占有了全部页宽，中栏的内容在左、右两栏之间“流淌”。因为中栏div的宽度其实不流动，因而它能够依据扫瞄器窗口的改动举行需要的伸缩。中栏div的左边和右边的添补（padding）属性包管内容布置在一个划一的栏中，乃至当它舒展到边栏（左栏大概右栏）的底端也是如许。
　　三栏结构的一个例子
　　请看看用本文所先容的手艺举行三栏结构的例子。
　　这个例子用美丽的色彩来辨别结构的各个div。
　　XHTML代码：
　　ExampleSourceCode
　　<body>
　　<divid="header">
　　<h1>Header</h1>
　　</div>
　　<divid="left">
　　Portsidetext...
　　</div>
　　<divid="right">
　　Starboardsidetext...
　　</div>
　　<divid="middle">
　　Middlecolumntext...
　　</div>
　　<divid="footer">
　　Footertext...
　　</div>
　　</body>
　　上面是CSS代码：
　　ExampleSourceCode
　　body{
　　margin:0px;
　　padding:0px;
　　}
　　div#header{
　　clear:both;
　　height:50px;
　　background-color:aqua;
　　padding:1px;
　　}
　　div#left{
　　float:left;
　　width:150px;
　　background-color:red;
　　}
　　div#right{
　　float:right;
　　width:150px;
　　background-color:green;
　　}
　　div#middle{
　　padding:0px160px5px160px;
　　margin:0px;
　　background-color:silver;
　　}
　　div#footer{
　　clear:both;
　　background-color:yellow;
　　}
</p>
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。

只看该作者 · 发表于 2015-1-18 05:45:17

由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-2-2 12:40:58

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-2-7 20:26:41

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-2-23 11:25:20

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

只看该作者 · 发表于 2015-3-7 08:51:15

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

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

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

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

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

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

[DIV+CSS] CSS教程之CSS floats创立三栏网页结构

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

相关帖子