1css.ppt

CSS: 网页布局 CSS与table布局的区别 用table进行布局是传统的网页设计的方法。使用CSS对网页布局可以设计更美观的网页。 在CSS网页布局中通常使用div和span标记。div标记的功能是，为HTML文档内大块元素内容提供结构和背景。div和/div标记之间可以包含文本、段落、表格等复杂内容。例如： span标记称为CSS的容器。用来定义一个由文本和HTML标签组成的信息块。和div相比，span只能定义一行文本的样式。 div可以理解成一个块，是比表格更简单的元素。从语法上来看，div只有div/div这样简单的定义。div最大的优点是，它的样式由css来控制。 总体上讲，div+css布局比table布局节省代码，代码结构更清晰。使得网站页面布局修改更简单。 但不是说，使用了div+css就不能使用table，它们可以混合使用。 使用div+css联合布局的例子 在该例子中，首先用div将页面划分成3个大的区域。对于每个div设置其样式。 部分样式的定义如下，其含义是，对于所有的div标签设置其高度为200个像素，背景色是红色。对于.title选择符，设置边缘的空白为0. 宽为776个像素。在此例子中，“顶部”div使用了样式title。所以它的背景色不是红色而是#abcdef 对于中间的div，嵌入了多个div。 CSS布局属性 HTML中的标签在CSS中称为元素，使用css进行网页布局时，需要将这些元素定位。定位方式有两种浮动定位，和采用定位属性定位。 CSS元素分为块元素和内联元素。块元素包括div、h1、table 、center 、p等。 内联元素包括a、 span 、b 、br等、 内联元素只能容纳文本和其他内联元素。块元素可以容纳所有其他元素。块元素和内联元素的基本差异在于，布局时块元素是从新行开始，内联元素不是。 元素的定位 元素的排列有块元素排列、内联元素排列和混合排列三种。 1. 块元素排列：默认的排列方式是换行排列。如下面的代码（见6-2.htm） 2. 内联元素排列：默认排列方式是顺序同行排列，直到宽度超出了容器本身的宽度才自动换行。 3. 混合排列是指当前页面中既有块元素又有内联元素的排列方式。默认的块元素不允许任何元素排列在它两边显示，所以每当遇到块元素时，将自动另起一行显示。 浮动属性定位 最简单的定位方法是使用浮动属性float来定位。Float有auto, left, right 3个取值。 从下面的例子可以看出，使用float属性实现了两个块元素的并排显示。通过float属性再配合CSS的其他属性，可以完全控制页面元素的指定显示 定位属性：定位属性主要包括三种：定位模式、边偏移和层叠定位属性。 1. 定位模式即position属性。语法如下： 其含义是在static、relative、absolute、fixed属性中选择一个。 边偏移：主要包括top、right、bottom、left四个属性。语法： 层叠定位属性：z-index，其功能是用来定义页面元素的层叠顺序。语法 绝对定位的综合应用 在定位模式中，absolute是绝对定位，定位元素被完全从文档中独立出来。所以使用绝对定位元素会覆盖其他元素或被其他元素覆盖。绝对定位的例子：6-4.html文件。 再看绝对定位的例子：6-5.html文件。 从上述显示效果可以看出，页面中后面出现的觉得定位元素覆盖了前面的定位元素。这是默认层叠方式，如果想改变层叠方式，则需要z-index属性来指定。例如在mm样式中加入，z-index: 1后，显示效果就改变了。 层叠属性值越大则元素显示越靠前。 相对定位 相对定位是通过positive属性的relative值来进行定位。相对定位中虽然元素的位置发生了偏移，但是元素本身原来占有的位置并没有消失。 见例子6-7.html中的代码 使用浮动属性 浮动属性是网页布局中常用的属性之一，使用浮动属性不但可以很好的进行内容布局，而且可以制作导航条等页面元素。语法如下： none:设置元素不浮动 Left:左侧浮动 Right:右侧浮动 当设置某元素的浮动属性值后，此元素会在一个新的层上出现。并同时对页面的其他部分内容造成影响。 见例子：6-10.htm 清除属性 –clear 清除属性是指指定一个元素是否允许有其他元素漂浮在它周围。语法: None表示允许两边有浮动对象，left表示不允许左边有浮动对象，right不允许右边，both则完全不允许有浮动对象。（更改前例子试一试） 光标属性 CSS中，光标属性专门用于设置在对象上移动鼠标时，指针所采用的光标形状。 例子 将下面的代码添加到一个html文档中 滤镜属性 使用滤镜属性可以把一些特别的效果添加到HTML元素中，使页面更美观