《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块10 使用CSS3美化网站元素_第1页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块10 使用CSS3美化网站元素_第2页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块10 使用CSS3美化网站元素_第3页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块10 使用CSS3美化网站元素_第4页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块10 使用CSS3美化网站元素_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

模块十使用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对表格进行美化，例如制作细线表格、隔行变色表格、鼠标经过时变色的表格等。本任务主要通过使用CSS来控制表格的样式，完成一个“隔行变色”的表格效果。表格数据展示效果如图10-3所示。引入知识点任务2用CSS3美化表格10.3HTML表格任务2用CSS3美化表格10.3HTML表格1、表格相关的标记表格由<table>标记来定义。每个表格均有若干行（由<tr>标记定义），每行被分割为若干单元格（由<td>标记定义）。字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。除此之处，还有几个专用标记，如<caption>定义表格的名称，<thead>定义表格的表头，<tbody>定义表格的主体，<th>定义表头的单元格，这些标记都有各自的语义。在应用表格排版时，应充分使用各个标记之间的嵌套来减少CSS类的定义，提升代码的可阅读性。2、CSS3中的nth-child()选择器表格往往用来显示多行的数据，每一行的位置都是平等的，若要设置其中某一行的样式，不是那么方便。如要本次任务中要设置隔行变色，涉及到基数行和偶数行的样式不同的问题。CSS3中的nth-child选择器为此提供了便利，:nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类型，其语法格式为：:nth-child(n|even|odd|formula)，各参数的作用见表所示。除IE8及更早的版本以外，所有主流浏览器均支持:nth-child()选择器。任务2用CSS3美化表格10.3HTML表格3、hover选择器在前面一个任务中，鼠标经过超链接时，使用:hover在鼠标移到链接上时添加的特殊样式。其实::hover选择器可用于所有元素，不仅是链接。所有主流浏览器都支持:hover选择器。做表格隔行变色，高亮显示时，可以通过设置CSS中的tr:hover伪类选择器达到效果，一个表格中，要求是当鼠标滑过每一行时，该行就有高亮显示，就是在表格里面的tr加上一个hover样式就行，例如tr:hover{background:yellow;}，这样可以更换行的背景色，但是如果给td加上了背景色，tr:hovertd{...}这样才能出现背景色的变换效果。任务2用CSS3美化表格任务实现（1）创建一个空白HTML5页面，在标题处输入“CSS3表格美化”，保存为index.html。充分选用表格的语义化标记，进行表格内容的结构定义，主要包括表格的标题、表头、主体等任务2用CSS3美化表格任务实现（2）为显示更加直观，本任务选用内部样式表的方式编写CSS代码，直接在<head>中写入<style>标记来编写CSS，为使代码简洁，本任务直接使用标记选择器来控制表格各元素的属性。（3）设置表格的边框，表格的边框主要是对table、td、th这三个标记进行设置，table负责表格外边框，对重复的线条，使用border-collapse:collapse属性进行重合，适当设置一些内容的填充，表格会按所在单元格的内容自动扩充容器而占据宽度。（4）设置表头的背景颜色，此处有两种设置方法，一种是对th进行设置，一种是对thead设置。显然thead是外层元素，表示整个表头，选择thead更加合适一些。（5）设置隔行变色效果，注意此处针对的行，是表格主体内容的行，因此选择器应该选择tbody下面的偶数个tr进行样式设计，代码格式为：tbodytr:nth-child(even){}。任务2用CSS3美化表格任务实现（6）设置鼠标经过时，高亮显示效果，此时使用hover伪类，即可方便实现，代码格式为：tbodytr:hover｛｝。最后给元素添加字体、文本等属性，CSS代码如下：<style> caption{/*设置表格标题的样式*/ font-family:"黑体"; font-size:1.6em; line-height:1.8em; } table{ border:solid4px#829B7E; } td,th{ border:dashed1px#829B7E; text-align:center; } table,td,th{ border-collapse:collapse;/*将边框进行重合*/ } td,th{ padding:10px20px; } thead{ background:#D7FBDF } tbodytr:nth-child(even){ background:#eee;/*对表格内容区域设置偶数行变色*/ } tbodytr:hover{ background:#033805;/*鼠标经过时高亮显示*/ color:#fff; }</style>任务2用CSS3美化表格任务实现（7）在浏览器中浏览网页效果，效果如图10-4所示，若部分CSS3的效果无法显示，请使用新版的浏览器测试。任务描述任务3用CSS3美化表单表单(form)在功能型网站中，是网页浏览者与网站服务器之间进行信息传递的重要工具，也是网站交互中重要的元素。在网页中，小到搜索框，大到注册表单，用户控制面板，都需要使用表单及表单元素进行设计。用户在网页上进行注册、登陆、留言等操作时，都是通过表单向网站数据库提交或读取数据的。本任务中，我们通过模仿QQ注册表单页面，来学习CSS3对表单的美化方法，浏览效果如图10-5所示，部分交互效果可通过网址在QQ官方网站浏览。引入知识点任务3用CSS3美化表单10.4CSS属性选择器任务3用CSS3美化表单10.4CSS属性选择器CSS选择器中，比较常用的是标记选择器、类选择器、ID选择器、伪类选择器等，而属性选择器是一种特殊类型的选择器。属性选择器可以指定具有特定属性的HTML元素样式，具有特定属性的HTML元素样式不仅仅是class和id。例如，给表单元素设置样式时，可以通过以下代码设置相同类型的元素，但拥有的属性不同的CSS样式：任务3用CSS3美化表单任务实现（1）创建HTML文件，添加布局元素，左侧放图片，右侧放表单，并保持一定的距离。（2）在右侧的表单中，加入各表单元素，主要有文本输入框、密码框、下拉列表、电话号码输入框，以及提交按钮，主要的HTML代码如下：

<divclass="left"> <imgsrc="01-4.jpg"/> </div> <divclass="zc"> <h1>欢迎注册QQ</h1> <h3>每一天，乐在沟通。</h3> <form> <p><inputtype="text"placeholder="昵称"autofocus="autofocus"/></p> <p><inputtype="password"placeholder="密码"/></p> <p> <select> <option>+86</option> <option>中国+86</option> <option>中国香港特别行政区+852</option> <option>中国澳门特别行政区+853</option> </select> <inputtype="tel"placeholder="手机号码"/></p> <p><inputtype="submit"value="立即注册"/></p>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论