第6章 CSS高级应用ppt课件.ppt

《第6章 CSS高级应用ppt课件.ppt》由会员分享，可在线阅读，更多相关《第6章 CSS高级应用ppt课件.ppt（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第6章 CSS高级应用李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 中国铁道出版社中国铁道出版社 2011.92011.9中国铁道出版社中国铁道出版社 2016.92016.9本章学习目标本章学习目标 ：1. 知识目标： 理解列表、区块、边框、定位常用的属性的作用； 理解盒模型中各个组成部分之间的关系； 掌握使用CSS+DIV的方式设计网页布局； 掌握在DIV中设置这些属性的方法。2. 技能目标： 掌握运用DW软件设计网页网页网页元素的CSS属性； 掌握使用CSS+DIV的方式对网页进行布局。3. 能力目标： 运用所学知识对网页进行布局规划、设计和美化。 中国铁道出版社

2、中国铁道出版社 2016.92016.96.1列表列表6.1.1 设置列表样式设置列表样式 列表由若干列表项构成，列表项使用标记来表示。列表样式就是指列表项目的符号类型，在无序列表中，默认的符号类型是圆点，在有序列表中，默认的序号是阿拉伯数字。可以通过设置列表的list-style-type属性将无序列表中的符号类型设置为方块、空心圆，也可将有序列表中的序号设置为大(小)写罗马数字或大(小)写英文字母，另外，也可将无序列表的符号或有序列表的序号设置为不显示任何符号。中国铁道出版社中国铁道出版社 2016.92016.96.1列表列表1.List-style-type属性属性基本语法：基本语法：

3、List-style-type:语法说明：语法说明：设计列表样式语法中属性list-style-type的取值及对应的列表符号见下表。 中国铁道出版社中国铁道出版社 2016.92016.9属性的取值列表符号属性的取值列表符号disc黑圆点（默认值）upper-roman按大写罗马字母排序I、II、IIIcircle空心圆lower-alpha按小写字母排序a、b、csquare黑方块upper-alpha按大写字母排序A、B、Cdecimal按数字排序1、2、3none不显示任何列表项或编号lower-roman按小写罗马字母排序i、ii、iii6.1列表列表中国铁道出版社中国铁道出版社 2

4、016.92016.96.1列表列表2、list-style-image属性属性列表项的符号还可以通过使用图像来丰富和美化，列表的图像属性list-style-image用来设置列表符号的图像类型。基本语法：基本语法：List-style-image:none|URL语法说明：语法说明：none表示不使用图像符号；表示不使用图像符号；URL指定图像的名称和路径。指定图像的名称和路径。3、list-style-position属性属性列表的列表的list-style-position属性用来设置列表项的缩进，该属性包括属性用来设置列表项的缩进，该属性包括两个属性值，一个为向内缩进，另一个为不向内

5、缩进。两个属性值，一个为向内缩进，另一个为不向内缩进。基本语法：基本语法：List-style-position:outside|inside语法说明语法说明 ：outside表示列表项不向内缩进，为默认值；inside表示列表项向内缩进。中国铁道出版社中国铁道出版社 2016.92016.96.2 边框与边距边框与边距盒模型盒模型 网页设计中的每一个元素都可以看作是一个长方形的盒子，整个网页可以看作是一个大盒子，而这个大盒子又由不同的网页元素小盒子组成。每个盒子有边框border，每个盒子里有内容，内容与边框之间的距离为内边距（或填充）padding，网页中盒子与盒子之间的空白距离称为外边距

6、margin。外边距margin填充padding内容content中国铁道出版社中国铁道出版社 2016.92016.96.2 边框与边距边框与边距 一个盒子的实际宽度（或高度）是由content + padding + border+margin组成的，区块的width属性值仅仅指content的宽度，不包括paddind、border、margin所占的宽度。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding、margin。因此只要利用好盒子的这些属性，就能够实现各种各样的排版效果。中

7、国铁道出版社中国铁道出版社 2016.92016.96.2 边框与边距边框与边距6.2.2 边框边框 在CSS中，为了设置边框的外观，提供了边框样式属性、边框宽度、边框颜色。 1.边框样式属性边框样式属性使用边框样式属性不仅可以统一设置四条边框的样式，还可以分别设置各自的样式。基本语法：基本语法：border-style:样式取值border-top-style:样式取值border-bottom-style:样式取值border-left-style:样式取值border-right-style:样式取值中国铁道出版社中国铁道出版社 2016.92016.96.2 边框与边距边框与边距 语法

8、说明语法说明 border-style是一个复合属性，该属性值可以有多个，多个属性值之间用空格隔开。取值方法如下：取一个值：四条边框均使用这一个值；取二个值：上下边框使用第一个值，左右边框使用第二个值；取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值。第四个值：四条边框按照上、右、下、左的顺序来调用取值。border-top-style、border-bottom-style、border-left-style、border-right-style分别用来设置上、下、左、右边框样式。中国铁道出版社中国铁道出版社 2016.92016.96.2 边框与边距边框与边距样式取值

9、说明样式取值说明none不显示边框，为默认值groove凹型线dotted点线ridge凸型线dashed虚线inset嵌入式solid实线outset嵌出式double双直线表6-2 边框样式属性取值说明中国铁道出版社中国铁道出版社 2016.92016.96.2 边框与边距边框与边距 2.边框宽度属性边框宽度属性使用边框宽度属性不仅可以统一设置四条边框的宽度，还可以分别设置四条边框的宽度。基本语法：基本语法：border-width:关键字|长度border-top-width: 关键字|长度border-bottom-width: 关键字|长度border-left-width: 关键字

10、|长度border-right-width: 关键字|长度语法说明：语法说明：长度包括长度值和长度单位，不可以使用负数。长度单位可以使用绝对单位也可以使用相对单位，如px、pt、cm等。border-width是一个复合属性，可以同时设置四条边框的宽度，设置方法与border-style类似。 关键字说明thin细边框medium中等边框、是默认值thick粗边框中国铁道出版社中国铁道出版社 2016.92016.96.2 边框与边距边框与边距 3.边框颜色属性边框颜色属性使用边框宽颜色性不仅可以统一设置四条边框的宽度，还可以分别设置其颜色。基本语法：基本语法：border-color:关键字

11、|RGB值border-top-color: 关键字| RGB值border-bottom-color: 关键字| RGB值border-left-color: 关键字| RGB值border-right-color: 关键字| RGB值语法说明语法说明RGB值使用十六进制的RGB和RGB函数值等同。border-color是一个复合属性，可以同时设置四条边框的宽度，设置方法与border-style类似。中国铁道出版社中国铁道出版社 2016.92016.96.2 边框与边距边框与边距 6.2.3 边距与填充边距与填充 1. 边距边距边距就是用来设置网页中某个元素的四边和网页中其他元素之间的

12、空白距离，即盒子与盒子之间的距离。和边框属性类似，可以使用边距属性统一设置四个边距，也可以分别单独设置。margin:长度|百分比|automargin-top: 长度|百分比|auto margin-bottom: 长度|百分比|automargin-left: 长度|百分比|automargin-right: 长度|百分比|auto语法说明：语法说明：长度包括长度值和长度单位，如5px。百分比是相对于上级元素宽度的百分 比，允许使用负值。auto为自动取边距值，是默认值。margin是一个复合属性，可以同时设置四条边框的宽度，设置方法与其它复合属性类似。 基本语法：基本语法：中国铁道出版社

13、中国铁道出版社 2016.92016.96.2 边框与边距边框与边距 2. 填充填充填充属性用来控制边框和其内部元素之间的空白距离，从语法与用法上与边距类似。基本语法：基本语法：padding:长度|百分比padding-top: 长度|百分比 padding-bottom: 长度|百分比padding-left: 长度|百分比padding-right: 长度|百分比语法说明：语法说明：长度包括长度值和长度单位，如5px。百分比是相对于上级元素宽度的百分比，允许使用负值。margin是一个复合属性，可以同时设置四条边框的宽度，设置方法与其它复合属性类似。中国铁道出版社中国铁道出版社 2016

14、.92016.96.3定位定位 6.3定位定位定位属性用来控制网页中显示的元素的位置。定位属性对div的作用很大，因为每一个div都可以看作是一个独立体，而这个独立体在网页中的位置就是由定位属性来决定的。 定位方式定位方式 1. 定位属性定位属性position定位属性position用来设置网页中HTML元素定位的具体方式。定位方式主要包含绝对定位、相对定位和静态定位。基本语法：基本语法：position:static|absolute|relative语法说明：语法说明：static表示静态定位，是默认值。表示静态定位，是默认值。中国铁道出版社中国铁道出版社 2016.92016.96.3

15、定位定位absolute表示绝对定位，需要和下一节介绍的位置属性top、bottom、right、left等结合使用。绝对定位的网页元素的参照点为设置了定位属性的最近的祖先元素，如果没有定了位的祖先级元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，参照物可能是BODY或 HTML 元素）。位置属性值为其相对于参照点的偏移量。绝对定位的网页元素不在文档流中，不会随页面大小的改变而改变。relative表示相对定位，也需要和下一节介绍的位置属性top、bottom、right、left等结合使用。相对定位的网页元素其位置相对于自身在未定位前的位置进行偏移，偏移量由位置属性设置。相对定

16、位的元素没有脱离文档流，会随着页面大小的改变而改变。中国铁道出版社中国铁道出版社 2016.92016.96.3定位定位 2.位置属性位置属性网页元素的定位只有在定位属性和位置属性共同作用下，才可以确定其位置，所以学习设置元素的位置属性也是很必要的。位置属性包括top、left、right、bottom四分属性，分别表示元素上、左、右、下的偏移量。基本语法：基本语法：top:auto|长度值|百分比left:auto|长度值|百分比right:auto|长度值|百分比bottom:auto|长度值|百分比语法说明：语法说明：auto表示采用默认值。长度值包括数值和长度单位。百分比作为属性值是一

17、个相对值。中国铁道出版社中国铁道出版社 2016.92016.96.3定位定位浮动属性用来设置元素是否浮动，以及它的浮动位置，浮动元素在文档流中。 浮动浮动基本语法基本语法 ：float:left|right|none语法说明：语法说明： auto表示采用默认值。长度值包括数值和长度单位。百分比作为属性值是一个相对值。中国铁道出版社中国铁道出版社 2016.92016.96.4 DIV布局布局 DIV标签是用来为HTML文档内大块的内容提供结构和背景的元素，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块。通过设置DIV标签的CSS样式来控制DIV的边框、大小、颜色、定位等属性实现D

18、IV+CSS的布局。 行布局行布局行布局是最简单的也是最基本的布局形式。DIV在默认状态下，宽度占据整行的空间，可通过设置DIV的宽度和高度属性对DIV的大小进行调整，宽度和高度属性可以设置具体数值的固定大小，也可以设置成自适应大小。中国铁道出版社中国铁道出版社 2016.92016.96.4 DIV布局布局 列布局列布局列布局也是的布局的基本形式。DIV在默认状态下，宽度占据整行的空间，可通过设置DIV的宽度和高度属性对DIV的大小进行调整，宽度和高度属性可以设置具体数值的固定大小，也可以设置成自适应大小。在列布局中，通过设置浮动属性float和定位属性position实现各DIV块在页面中

19、的位置。中国铁道出版社中国铁道出版社 2016.92016.96.5 应用实例应用实例中国铁道出版社中国铁道出版社 2016.92016.96.5 应用实例应用实例本案例采用DIV+CSS的思路实现网页布局与效果设计。首先将图6.30看作是要完成的设计图，然后按照下面的实现思路进行操作：第一步，分析效果图，进行布局规划；第二步，从效果图中提取尺寸和素材；第三步，编写HTML代码；第四步，编写CSS样式代码；第五步，对代码进行优化和调整。布局规划完之后，首先使用photoshop、fireworks等图形软件从效果图中提取必要的素材，如设计CSS样式所需的大小、颜色、图片、文本等，然后进行HTM

20、L代码的编写和CSS代码的编写以下重点从DIV+CSS设计的角度对本例的实现进行分析与讲解，对于页面中内容生成的HTML代码不作为介绍的重点。 中国铁道出版社中国铁道出版社 2016.92016.96.5 应用实例应用实例 总体布局规划与设计总体布局规划与设计首先进行总体布局规划。从设计图可以看出，本例的布局为典型的“回”字形布局，在设计可以分成两个层次，第一层按三行布局设计，然后对中间部分插入三列布局设计，布局规划示意图如图6.31所示。根据布局分析的结果，在Dreamwaver中制作的方法和步骤如下：第一步：在Dreamwaver中新建HTML文件，文件另存为6-11.html；第二步：在

21、文件中依次插入三个DIV，并分别设置DIV的ID值为“top”，“conetnt”，“bottom”；第三步：在ID为content的DIV块中依次插入三个DIV，并分别设置DIV的ID值为“left”，“main”，“right”； top contentbottomcontentleftmainrightmainright中国铁道出版社中国铁道出版社 2016.92016.96.5 应用实例应用实例为总体布局进行CSS设计的方法和步骤如下：第一步：在文件中新建CSS规则，定义top、content、bottom块的宽度width统一设为880px，CSS代码如下所示： #top,#cont

22、ent,#bottom width: 880px;第二步：在文件中新建CSS规则，定义content块为相对定位，即position值为relative,高度height值为420px，content区块距离top区块的上边距margin-top为10px, content区块距离bottom区块的下边距margin-bottom为10px，CSS代码如下右所示：中国铁道出版社中国铁道出版社 2016.92016.96.5 应用实例应用实例#content position: relative;height:420px; margin-top:10px; margin-bottom:10px;

23、第三步：在文件中新建CSS规则，定义left区块的为绝对定位，即position值为absolute,距父容器content块左边的距离left值为0px，宽度width值为180px，边框为细实线，颜色取值为#CCC，即border值为 thin solid #CCC,CSS代码如下所示：#left position: absolute;border: thin solid #CCC; width: 200px;left:0px;中国铁道出版社中国铁道出版社 2016.92016.96.5 应用实例应用实例第四步：在文件中新建CSS规则，定义main区块的为绝对定位，即position值为a

24、bsolute,距父容器content块左边的距离left值为210px，宽度width值为500px，边框为细实线，颜色取值为#CCC，即border值为 thin solid #CCC，CSS代码如下所示： #main position: absolute;border: thin solid #CCC;width: 500px;left:210px;中国铁道出版社中国铁道出版社 2016.92016.96.5 应用实例应用实例第五步：在文件中新建CSS规则，定义right区块的为绝对定位，即position值为absolute,距父容器content块左边的距离left值为720px，宽

25、度width值为160px，边框为细实线，颜色取值为#CCC，即border值为 thin solid #CCC，CSS代码如下所示：#right position: absolute;border: thin solid #CCC;width: 160px;left:720px;中国铁道出版社中国铁道出版社 2016.92016.96.5 应用实例应用实例第六步，优化CSS代码，将left,main,right块CSS代码中的取值相同的position和border属性放到一起形成复合样式，最终生成的整体布局CSS代码为：#content position: relative;height:

26、420px; #left,#main,#right position: absolute;border: thin solid #CCC; #left width: 180px; left:0px; 中国铁道出版社中国铁道出版社 2016.92016.96.5 应用实例应用实例#main width: 500px;left: 210px;#right width:160px;left: 720px;总体布局设设计完成后，整个页面被分成了top、left、main、right、bottom五个区块，然后分别对这五个区块进行分布局规划和设计。中国铁道出版社中国铁道出版社 2016.92016.9本章小结本章小结 本章介绍了CSS中常用的属性，主要包括列表属性、边框、边距、定位等相对属性，并通过实便讲解了这些属性能实现的效果。列表是网页中经常用到的组织内容的HTML标记，结合CSS的其它属性列表可以实现横排，极大的扩展的列表的应用范围。通过盒模型的介绍，可以很好地理解网页元素的边框、边距、填充等属性，并能灵活地应用这些属性实现网页美化的效果。定位属性的灵活应用对于实现DIV+CSS的网页设计模式具有重要意义。