《3.第6章CSS高级应用.pptVIP

第6章 CSS高级应用 本章学习目标 ： 1. 知识目标： 理解列表、区块、边框、定位常用的属性的作用； 理解盒模型中各个组成部分之间的关系； 掌握使用CSS+DIV的方式设计网页布局； 掌握在DIV中设置这些属性的方法。 2. 技能目标： 掌握运用DW软件设计网页网页元素的CSS属性； 掌握使用CSS+DIV的方式对网页进行布局。 3. 能力目标： 运用所学知识对网页进行布局规划、设计和美化。 6.1列表 6.1.1 设置列表样式 列表由若干列表项构成，列表项使用li标记来表示。列表样式就是指列表项目的符号类型，在无序列表中，默认的符号类型是圆点，在有序列表中，默认的序号是阿拉伯数字。可以通过设置列表的list-style-type属性将无序列表中的符号类型设置为方块、空心圆，也可将有序列表中的序号设置为大(小)写罗马数字或大(小)写英文字母，另外，也可将无序列表的符号或有序列表的序号设置为不显示任何符号。 6.1列表 1.List-style-type属性 基本语法：List-style-type:属性值 语法说明： 设计列表样式语法中属性list-style-type的取值及对应的列 表符号见下表。 6.1列表 6.1列表 2、list-style-image属性 列表项的符号还可以通过使用图像来丰富和美化，列表的图像属性list-style-image用来设置列表符号的图像类型。 基本语法：List-style-image:none|URL 语法说明：none表示不使用图像符号；URL指定图像的名称和路径。 3、list-style-position属性 列表的list-style-position属性用来设置列表项的缩进，该属性包括两个属性值，一个为向内缩进，另一个为不向内缩进。 基本语法：List-style-position:outside|inside 语法说明 ：outside表示列表项不向内缩进，为默认值；inside表示列表项向内缩进。 6.2 边框与边距 6.2.1盒模型 网页设计中的每一个元素都可以看作是一个长方形的盒子，整个网页可以看作是一个大盒子，而这个大盒子又由不同的网页元素小盒子组成。每个盒子有边框border，每个盒子里有内容，内容与边框之间的距离为内边距（或填充）padding，网页中盒子与盒子之间的空白距离称为外边距margin。 6.2 边框与边距 一个盒子的实际宽度（或高度）是由content + padding + border+margin组成的，区块的width属性值仅仅指content的宽度，不包括paddind、border、margin所占的宽度。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding、margin。因此只要利用好盒子的这些属性，就能够实现各种各样的排版效果。 6.2 边框与边距 6.2.2 边框 在CSS中，为了设置边框的外观，提供了边框样式属性、边框宽度、边框颜色。 1.边框样式属性 使用边框样式属性不仅可以统一设置四条边框的样式，还可以分别设置各自的样式。 基本语法： 6.2 边框与边距 语法说明 border-style是一个复合属性，该属性值可以有多个，多个属性值之间用空格隔开。取值方法如下： 取一个值：四条边框均使用这一个值； 取二个值：上下边框使用第一个值，左右边框使用第二个值； 取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值。 第四个值：四条边框按照上、右、下、左的顺序来调用取值。border-top-style、border-bottom-style、border-left-style、border-right-style分别用来设置上、下、左、右边框样式。 6.2 边框与边距 6.2 边框与边距 2.边框宽度属性 使用边框宽度属性不仅可以统一设置四条边框的宽度，还可以分别设置四条边框的宽度。 基本语法： 6.2 边框与边距 3.边框颜色属性 使用边框宽颜色性不仅可以统一设置四条边框的宽度，还可以分别设置其颜色。 基本语法： 6.2 边框与边距 6.2.3 边距与填充 1. 边距 边距就是用来设置网页中某个元素的四边和网页中其他元素之间的空白距离，即盒子与盒子之间的距离。和边框属性类似，可以使用边距属性统一设置四个边距，也可以分别单独设置。 6.2 边框与边距