《CSS-布局篇(浮动)入门》由会员分享，可在线阅读，更多相关《CSS-布局篇(浮动)入门（9页珍藏版）》请在金锄头文库上搜索。
1、网页设计 进阶技能切片与排版温州职业中专 冯晨笑布局的方法在表格布局时代，所有的排版方式和布局方式，全 都依赖于TABLE/TR/TD这三个表格标签来进行。俗 称，打格子。一个网页设计师格子打的好坏、快慢，能很直接的 就反映出他的水平。老一辈的网页开发人员，全都会用表格标签快速的 开发一张网页。可以说，如果没有表格布局法的诞 生，也就不会有互联网今天的繁荣因为你可以 什么都不会，也能在短短几十分钟之内就完成一张 “精美的网页”。 不过，表格布局法是一种邪门歪道的武功。导航有什么用？因为表格布局法太多看重了眼前的利益，而无视了 将来可能会产生的更麻烦的问题。这无异于杀鸡取 卵。正统的布局法就是C
2、SS布局法，又称DIV+CSS。当 然，这是一种错误的称呼。正确的称呼就只是CSS布 局法，或者是(X)HTML+CSS。为什么是错的？因为这种布局方法已经不再局限于 使用某一类HTML标签了，而是什么样的网页结构， 就该采用什么样的HTML标签。段落就是P，无序列 表就是UL，三级标题就是H3。导航的样子这种新式的布局方法主要的布局手段是依靠CSS。通 过CSS强大的外观控制能力，来达到布局、排版的效 果。由于CSS可以精确到控制网页上的每一像素，因 此，用CSS布局法做出来的网页，效果可以是无与伦 比的，远胜于表格布局法。当然，CSS布局法不是万能的，它最大的弊端就在于 ，开发周期的过长（
3、单从一个网页来讲，一两个小 时是基本完不成一张的。不过就网站整体来看，CSS 布局法会比表格布局法快），以及浏览器兼容性。导航的本质是什么？CSS布局主要通过FLOAT和POSITION这两个属性来 控制。当然，正规的做法就只有POSITION一种，但 不得不承认FLOAT也是可以用来做布局的。而且比 POSITION还要便捷。完成导航FLOAT属性，有三个值分别是left/right/none 。也就是左浮动（元素向右边靠），右浮动（元素 向左边靠），无浮动（保持原状）。借助这三个值，CSS就可以很好来进行网页的布局和 排版了。完成导航例如这种常见的三栏布局，就可以很快速的借助 FLOAT来
4、完成。完成导航因为这时候只需要先设置好中间三个块的高和宽后 ，再将其进行左浮动，或是右浮动即可。例如，代码就可以如下编写： Div1,div2,div3 height:100px; float:left;Div1 width:200px;Div2width:500px;Div3width:200px;完成导航当然，之所以说FLOAT用来做布局会有问题，就是 因为如果使用浮动之后不清除浮动的话，它后面的 元素也会跟着浮动。而清除浮动的属性，就是clear。它有四个值： left/right/both/none。Left:就是清除左浮动。Rigth同理。None，就是不 清除，保持原来的状态（如果有浮动，继续有浮动 ）。而both是比较特殊的，就是同时清除左右浮动 。一般来说，clear只需要设置成both即可。
