CSS教程之CSS floats创立三栏网页结构
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是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更能体现样式和结构相分离，结构的重构性强。 由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 学Dreamweaver技术的过程其实是一个增加信心的过程。
页:
[1]