《网页设计制作》课件——项目5.pptxVIP

《网页设计制作》项目5

5.1CSS列表属性5.2CSS精灵技术5.3CSS复合选择器5.4CSS超级链接属性5.5CSS特性目录

5.1CSS控制列表样式建议定义无序或有序列表时，可以通过标签的属性控制列表的项目符号，但是这种方式实现的效果并不理想，因此需要使用CSS中的列表样式属性。

list-style-type属性list-style-image属性list-style-position属性list-style-type属性用于控制无序和有序列表的项目符号。list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。list-style-position属性用于控制列表项目符号的位置。5.1CSS控制列表样式

5.1CSS控制列表样式list-style-type属性list-style-image属性list-style-position属性列表类型属性值显示效果无序列表（ul）disc●circle○square■有序列表（ol）decimal阿拉伯数字1、2、3......upper-alpha大写英文字母A、B、C......lower-alpha小写英文字母a、b、c......upper-roman大写罗马数字I、II、III......lower-roman小写罗马数字i、ii、iii......ul、ol公共属性none不显示任何符号list-style-type的属性值及显示效果

5.1CSS控制列表样式因为各个浏览器对list-style-type属性的解析不同。因此，在实际网页制作过程中不推荐使用list-style-type属性。list-style-type属性list-style-image属性list-style-position属性

5.1CSS控制列表样式基本格式ul{list-style-image:url(图片路径);}list-style-type属性list-style-image属性list-style-position属性例如：styletype=text/cssul{list-style-image:url(images/1.png);}/style

5.1CSS控制列表样式list-style-type属性list-style-image属性list-style-position属性例如：list-style-position属性取值inside：列表项目符号位于列表文本以内。outside：列表项目符号位于列表文本以外。styletype=text/css.in{list-style-position:inside;}.out{list-style-psition:outside;}li{border:1pxsolid#CCC;}/style

5.1CSS控制列表样式list-style-image属性2list-style-position属性3list-style-type属性1列表样式复合属性list-style复合属性list-style:列表项目符号列表项目符号的位置列表项目图像;使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为li设置背景图像的方式实现不同的列表项目符号。

5.1CSS列表属性5.2CSS精灵技术5.3CSS复合选择器5.4CSS超级链接属性5.5CSS特性目录

5.2CSS精灵技术什么是CSS精灵技术？

CSS精灵（也称CSSSprites），是一种处理网页背景图像的方式。在网页设计中，CSS精灵会将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。5.2CSS精灵技术

CSS精灵技术需求是什么？网页中的小图片大家随处可见上网导航信息查询网上预订5.2CSS精灵技术

5.2CSS精灵技术当用户访问一个网站时，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰,服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。CSS精灵技术的需求

5.2CSS精灵技术CSS精灵技术的工作原理只需发送一次请求将页面内所有零星图像制作成一张精灵图使用CSS定位属性

5.2CSS精灵技术如何制作一个简单的精灵图然后，通过使用CSS的background