DreamweaverCS6完美网页制作基础实例与技巧从入门到精通第章CSS+Div灵活布局网页ppt课件

1、在CSS布局的网页中，与都是常用的标记，利用这两个标记，加上CSS对其样式的控制，可以很方便地实现网页的布局。过去最常用的网页布局工具是标签，它本是用来创建电子数据表的，由于标签本来不是要用于布局的，因此设计师们不得不经常以各种不寻常的方式来使用这个标签如把一个表格放在另一个表格的单元里面。Div标记早在HTML3.0时代就已经出现，但那时并不常用，直到CSS的出现，才逐渐发挥出它的优势。11.1.211.1.2DivDiv与与SpanSpan的区别的区别掌握基于CSS的网页布局方式，是实现Web标准的基础。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加

2、精确的控制。11.1.311.1.3DivDiv与与CSSCSS布局优势布局优势CSS对元素的定位包括相对定位和绝对定位，同时，还可以把相对定位和绝对定位结合起来，形成混合定位。如果想熟练掌握Div和CSS的布局方法，首先要对盒模型有足够的了解。盒子模型是CSS布局网页时非常重要的概念，只有很好地掌握了盒子模型以及其中每个元素的使用方法，才能真正的布局网页中各个元素的位置。1 1. .1.1盒子模型的概念盒子模型的概念float属性定义元素在哪个方向浮动。以往这个属性应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。11.2.211.2.2floatfloat定位定位pos

3、ition的原意为位置、状态、安顿。在CSS布局中，position属性非常重要，很多特殊容器的定位必须用position来完成。11.2.311.2.3positionposition定位定位无论使用表格还是CSS，网页布局都把大块的内容放进网页的不同区域里面。有了CSS，最常用来组织内容的元素就是标签。在利用CSS布局页面时，首先要有一个整体的规划，包括整个页面分成哪些模块，各个模块之间的父子关系等。11.3.111.3.1将页面用将页面用DivDiv分块分块当页面的内容已经确定后，则需要根据内容本身考虑整体的页面布局类型，如是单栏、双栏还是三栏等，这里采用的布局如图11.6所示。11.3

4、.211.3.2设计各块的位置设计各块的位置整理好页面的框架后，就可以利用CSS对各个板块进行定位，实现对页面的整体规划，然后再往各个板块中添加内容。11.3.311.3.3用用CSSCSS定位定位现在一些比较知名的网页设计全部采用的DIV+CSS来排版布局，DIV+CSS的好处可以使HTML代码更整齐，更容易使人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比表格强得多。一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定像素。11.4.111.4.1列固定宽度列固定宽度自适应布局是在网页设计中常见的一种布局形式，自适应的布局能够根据浏览

5、器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。11.4.211.4.2列自适应列自适应两列固定宽度非常简单，两列的布局需要用到两个div，分别为两个div的id设置为left与right，表示两个div的名称。11.4.311.4.3两列固定宽度两列固定宽度下面使用两列宽度自适应性，以实现左右列宽度能够做到自动适应，设置自适应主要通过宽度的百分比值设置。11.4.411.4.4两列宽度自适应两列宽度自适应在实际应用中，有时候需要右列固定宽度，右列根据浏览器窗口大小自动适应，在CSS中只要设置在左列的宽度即可，如上例中左右列都采用了百分比实现了宽度自适应，这里只要将左列宽度设定为固定值，右列不设置任何宽度值，并且右列不浮动。11.4.511.4.5两列右列宽度自适应两列右列宽