《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块10 使用CSS3美化网站元素.pptx

模块十使用CSS3美化网站元素《HTML5+CSS3任务驱动教程》

目录任务一任务二任务三用CSS3设计网站导航用CSS3美化表格用CSS3美化表单

任务描述任务1用CSS3设计网站导航网站导航是网站中最重要的元素，也是网站提供给用户简便、快捷的访问内容的入口，帮助用户快速地找到网页中的内容。从形式上看，网站导航主要分横向导航、纵向导航、下拉及多级菜单导航等形式。

引入知识点任务1用CSS3设计网站导航10.1CSS3背景渐变及阴影10.2CSS超链接样式

任务1用CSS3设计网站导航10.1CSS3背景渐变及阴影1、CSS3渐变CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用CSS3渐变，你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3定义了两种类型的渐变（gradients）：线性渐变（LinearGradients）-向下/向上/向左/向右/对角方向径向渐变（RadialGradients）-由它们的中心定义本文主要介绍线性渐变的应用。为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色，其语法格式为：background:linear-gradient(direction,color-stop1,color-stop2,...);

任务1用CSS3设计网站导航10.1CSS3背景渐变及阴影2、CSS3阴影阴影在CSS3中可以应用在盒状元素的边框和文字上，就像图片的阴影效果一样。一般可以分为box-shadow盒子阴影和textshadow文字阴影两类。例如CSS3的box-shadow可以写做：box-shadow:ApxBpxCpx#xxx;Apx指定了水平阴影的距离，Bpx为垂直阴影的距离，Cpx为模糊的距离，#xxx表示阴影的颜色。例如：box-shadow:5px10px10px#999;即可为盒状元素产生阴影。

任务1用CSS3设计网站导航10.2CSS超链接样式HTML文档最大的特点是，通过超链接打破了传统的一般从上至下的阅读顺序。整个网站可以由超链接串连而成，无论从首页到每个栏目，还是进入其他网站都由无数超链接来实现页面跳转。CSS对链接的样式控制主要通过伪类来实现，链接的特殊性在于能够根据它们所处的状态来设置它们的样式，链接的四种状态：a:link-普通的、未被访问的链接a:visited-用户已访问的链接a:hover-鼠标指针位于链接的上方a:active-链接被点击的时刻超链接的四种状态控制，为我们的链接样式设计提供了良好的接口，特别是通过鼠标经过时的链接样式设计，可以实现丰富的交互效果，接下来在任务中的导航设计即可体会到其中的好处。

任务1用CSS3设计网站导航任务实现（1）在DreamweaverCC中创建一个空白创建一个HTML5页面，保存为index.html，为使HTML简洁，直接使用a标记进行块状化对每一个导航项进行浮动布局，并使用一个div容器作为总容器居中显示。HTML结构如下： divclass=nav ahref=#首页/a ahref=#学院概况/a ahref=#管理机构/a ahref=#教学部门/a ahref=#招生就业/a ahref=#创新创业/a ahref=#教辅部门/a ahref=#教辅部门/a /div

任务1用CSS3设计网站导航任务实现（2）接下来设计CSS样式，首先将div容器进行固定，居中显示，再完成导航的布局，因为a标记是行间元素，一般无法实现布局效果，所以需要对a标记进行display:block块状化，这样a标记具有了盒模型的特性，并可以进行浮动定位。（3）给链接添加一些文本、字体属性，为有更好的显示效果，为整个导航条添加背景渐变、阴影、圆角效果，添加渐变时，如要考虑到不同浏览器内核问题，需要针对不同内核的前缀，对应添加样式，CSS代码

任务1用CSS3设计网站导航任务实现（4）添加鼠标经过超链接时的a:hover效果增强交互性，这里可以设置变换背景颜色等效果，完成后在浏览器中预览其效果，效果见图10-2所示。浏览时若无法显示出CSS3的效果，请更换最新版的浏览器测试其效果。

任务描述任务2用CSS3美化表格表格作为一种非常特殊而实用的数据表达方式，是网页中经常使用的元素，一般用来显示从后台读取出的数据，也可以用表格进行布局操作。同其他HTML标记一样，我们也可以使用CSS对表格进行美化，例如制作细线