HTML+CSS+Javascript网站制作案例教程第10章 设置列表和表单的CSS属性.pptVIP

10.1.1　ul 无序列表样式 无序列表是网页中常见的元素之一，用于将一组相关的列表项目不分先后顺序地列在一起。无序列表使用li标签来罗列各个项目，并且每个项目前面都带有特殊符号。在CSS中，list-style-type属性用于设置无序列表项目前的列表符号。 10.1.2　 ol 有序列表样式 有序列表和无序列表的区别是有序列表具有先后顺序，可以是按数字排列，也可以是按字母排列。在CSS样式中，可以通过list-style-type属性对有序列表进行控制。 课堂案例——设置网页中的项目列表 课堂案例：设置网页中的项目列表 最终文件：光盘\最终文件\第10章\10-1-1.html 视频：光盘\视频\第10章\10-1-1.swf 10.1.3　更改列表项目样式 给有序列表或无序列表设置list-style-type属性时，所有的li标签都应用该样式，如果希望某个li标签具有单独的样式，则可以对该li标签单独设置list-style-type属性，再对该项目应用该样式，那么该样式只会对该条项目起作用。 10.1.4　使用图片作为列表样式 用图片作为列表样式可以达到美化页面、提升网页整体视觉的效果。在CSS样式中，list-style-image属性用于设置图片作为列表样式。在CSS样式中，list-style-image属性用于设置图片作为列表样式，只需输入图片的路径作为属性值即可。 课堂案例——定义网页中的有序列表 课堂案例：定义网页中的有序列表 最终文件：光盘\最终文件\第10章\10-1-2.html 视频：光盘\视频\第10章\10-1-2.swf 课堂案例——设置独立的项目列表样式 课堂案例：设置独立的项目列表样式 最终文件：光盘\最终文件\第10章\10-1-3.html 视频：光盘\视频\第10章\10-1-3.swf 10.1.5　定义列表 定义列表是一种比较特殊的列表形式，和有序列表和无序列表相比，应用得比较少。定义列表的dl标签是成对出现，制作定义列表需要在“代码”视图中手动添加，列表中每个元素的标题使用dt/dt标签，每个dt/dt标签后面跟随dd/dd标签，用于描述列表中内容。 课堂案例——设置项目符号为自定义图像 课堂案例：设置项目符号为自定义图像 最终文件：光盘\最终文件\第10章\10-1-4.html 视频：光盘\视频\第10章\10-1-4.swf 课堂案例——设置定义列表样式 课堂案例：设置定义列表样式 最终文件：光盘\最终文件\第10章\10-1-5.html 视频：光盘\视频\第10章\10-1-5.swf 很多具有交互功能的网站都用到表单，它由很多表单元素组成，可以用来接收并记录用户输入的数据信息，然后通过按钮操作提交给Web服务器，以此来实现用户和服务器的交互。单纯的表单元素的外观相对来说比较简陋，通过CSS属性可以给表单元素设计一个令人赏心悦目的交互界面，从而使浏览者能够在一个美观、整齐的氛围中与网站服务器进行交互。 10.2.1　表单元素的背景颜色 网页中，表单元素默认的背景颜色为白色，在CSS样式中background-color属性可以对表单的背景颜色加以设置，让其背景更加美观。 10.2.2　表单元素的边框 在CSS样式中，可以通过border属性对表单元素的边框进行设置，从而美化表单。border属性包括3个参数，分别为style、color和width，设置表单元素的边框只需对这3个参数进行相应的设置。 课堂案例——使用CSS样式定义文本框背景颜色 课堂案例：使用CSS样式定义文本框背景颜色 最终文件：光盘\最终文件\第10章\10-2-1.html 视频：光盘\视频\第10章\10-2-1.swf 10.2.3　圆角文本字段 通过CSS样式，可以定义圆角文本字段，从而让文本字段的外观更加新颖，产生更好的视觉效果。设置圆角文本字段的方法是首先设置文本字段的border属性值为none，然后添加相应的背景图片。 课堂案例——使用CSS样式定义文本框的边框效果 课堂案例：使用CSS样式定义文本框的边框效果 最终文件：光盘\最终文件\第10章\10-2-2.html 视频：光盘\视频\第10章\10-2-2.swf 课堂案例——使用CSS样式实线圆角文本字段效果 课堂案例：使用CSS样式实线圆角文本字段效果 最终文件：光盘\最终文件\第10章\10-2-3.html 视频：光盘\视频\第10章\10-2-3.swf 超链接是网页中最重要、最根本的元素，是整个因特网的基础。超链接可以将网站中的每个页面关联在一起，通过超链接能够快速实现页面的跳转、功能的激活等。通过CSS样式，可以设置出美观大方、具有不同外观和样式的超链接，从而增加页面的样式效果和超链接交互效果。 10.4.1