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

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