《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 赵峰 模块6-11 创建网页中的超链接- 综合案例

模块六创建网页

中的超链接目录任务创建“在线学习网”页面的超链接引入知识点6.1创建超链接6.2超链接的类型任务创建“在线学习网”页面的超链接6.1创建超链接超文本链接（HyperTextLink）通常简称为超链接（HyperLink），或者简称为链接（Link）。超链接就是从一个网页转到另一个网页的途径。链接是HTML的一个最强大和最有价值的功能。任务创建“在线学习网”页面的超链接6.1创建超链接6.1.1超链接a元素的语法格式创建超链接使用的标记是<a>。超链接要能正确地进行链接跳转，需要同时存在两个端点，即源端点和目标端点。源端点是指网页中提供链接单击的对象，如链接文本或链接图像；目标端点是指链接跳转过去的页面或位置，如某个网页、锚记等。超链接的目标端点使用<a>标记的href属性来指定，源端点则通过<a>标记的内容来指定。除了需要使用href属性外，还经常需要用到其他一些相关的属性。任务创建“在线学习网”页面的超链接6.1创建超链接6.1.2设置超链接的路径在网站中，每一个网页都有一个唯一的地址与之对应，这个地址称为统一资源定位符，即URL（UniformResourceLocator），它的功能就是提供在Internet上查找资源的标准方法。而对于一般的文件则是它的路径，即所在的目录和文件名。链接路径就是在超链接中用于标识目标端点的位置标识。常见的链接路径主要有以下两种类型。1.绝对路径2.相对路径任务创建“在线学习网”页面的超链接6.2超链接的类型1.根据超链接目标端点的位置不同划分（1）内部超链接：指在同一站点内部，不同页面之间的超链接。（2）外部超链接：是站点外部的链接，是网页与因特网中某个目标网页的链接。（3）锚记超链接：是同一网页内部的链接。通常情况下，锚记链接用于链接到网页内部某个特定的位置。（4）电子邮件超链接：指链接到电子邮箱的链接。单击该链接可以发送电子邮件。（5）可执行文件超链接：通常又称文件下载链接，单击该链接可以运行可执行文件，可以用于下载文件或在线运行可执行文件。任务创建“在线学习网”页面的超链接6.2超链接的类型2.根据链接源端点的内容不同划分（1）文本超链接：以文本作为超链接源端点。（2）图像超链接：以图像作为超链接源端点。（3）图像热点超链接：以图像热区作为超链接源端点。任务创建“在线学习网”页面的超链接6.2超链接的类型3.根据链接目标端点的内容不同划分（1）网页超链接：链接到HTML、ASP、PHP等网页文档的链接，这是网站中最常见的链接。（2）文件下载超链接：链接到图像、音频、影片、Word文档、Excel文档、PowerPoint文档、PDF文档等资源文件或RAR、ZIP等压缩文件的链接。（3）电子邮件超链接：链接到电子邮件的超链接形式，将会启动邮件客户端程序，浏览者可以写邮件并发送到链接的邮箱中。（4）空链接：链接目标形式上为“#”，主要用于在对象上附加行为等（5）脚本超链接：链接目标为一段JavaScript脚本代码，用于执行某项操作（6）锚记超链接：链接目标为网页文档中的某一位置，这一位置可以位于当前网页或其他网页中，这个网页可以位于当前站点内，也可以位于其他站点内任务创建“在线学习网”页面的超链接6.2超链接的类型1内部超链接内部超链接是指在同一个网站内部，不同网页之间的链接关系。基本语法格式如下：<ahref=“链接文件的路径”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型2外部超链接外部超链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系。基本语法格式如下：

<ahref=“URL”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型3锚记超链接锚记超链接又称书签链接。在浏览网页的时候，如果页面内容过长，需要不断地拖动滚动条才能看到所有内容，这时可以在该网页上建立锚记目录，单击目录上的某一项就能自动跳到该目录项对应的网页位置。任务创建“在线学习网”页面的超链接6.2超链接的类型第一步：创建锚记基本语法格式如下：HTML5：<aid=“锚记名称”>源端点</a>HTML5以前版本：<aname=“锚记名称”>源端点</a>语法说明：锚记名称就是对第二步跳转所创建的锚记，“源端点”则是设置链接后跳转的位置，可以是文本或图片。任务创建“在线学习网”页面的超链接6.2超链接的类型第二步：建立锚记链接基本语法格式如下：（1）链接到同一个页面中的锚记，称为内部锚记超链接。<ahref=“#锚记名称”>源端点</a>（2）链接到其他页面中的锚记，称为外部锚记超链接。<ahref=“锚记所在页面的文件路径#锚记名称”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型4电子邮件超链接在页面上创建电子邮件链接，可以让浏览者快速地与网站负责人联系。当鼠标单击链接对象时，浏览者的计算机系统中默认的电子邮件客户端软件将自动打开。基本语法格式如下：<ahref=”mailto:电子邮件”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型5文件下载超链接目标端点为某个需下载的文件的链接称为文件下载链接。当用户单击该链接后，浏览器会自动判断文件类型，以做出不同情况的处理，如直接打开，或弹出下载对话框供下载可用于下载的文件类型有.doc、.rar、.mp3、.zip、.exe等。基本语法格式如下：<ahref=“链接文件的路径”>下载文件链接</a>任务创建“在线学习网”页面的超链接6.2超链接的类型6脚本超链接目标端点为脚本代码的链接称为脚本链接。通过脚本可以实现HTML语言完成不了的功能。基本语法格式如下：<ahref=“JavaScript:…”>源端点</a>任务创建“在线学习网”页面的超链接6.2超链接的类型7文本超链接文本超链接是指源端点为文本的链接。基本语法格式如下：<ahref=“目标端点”>链接文本</a>任务创建“在线学习网”页面的超链接6.2超链接的类型8图像超链接图像超链接是指源端点为图像文件的超链接。基本语法格式如下：<ahref=“目标端点”><imgsrc=“图像文件路径”></a>任务创建“在线学习网”页面的超链接6.2超链接的类型9图像热点超链接图像映射是指源端点为图片热点的链接。一幅图像可以被切分成不同的区域，每一个区域可以链接到不同的地址，这些区域称为图像的热区。基本语法格式如下：<imgsrc="图片文件路径"usemap="#Map_name"><mapname="#Map_name"><areashape="rect"coords="x1,y1,x2,y2"href="链接地址1"><areashape="circle"coords="x,y,r"href="链接地址2"><areashape="poly"coords="x1,y1,x2,y2,x3,y3,…"href="链接地址3">…</map>任务创建“在线学习网”页面的超链接任务实现（1）通过文本超链接实现页面链接。（2）通过图像热点超链接实现首页到子页面的链接。（3）过锚记超链接实现子页面各部分内容的链接。（4）通过电子邮件超链接实现“联系我们”链接到邮箱：843118486@任务创建“在线学习网”页面的超链接任务实现（5）通过脚本超链接关闭“在线学习网站”中的数字媒体技术概述课程子页面文件course_multimedia.html。（6）通过外部超链接和图像超链接实现首页“友情链接”到“广东创新科技职业学院”网站。（7）通过文件下载超链接可以下载资源文件“download.rar”。任务创建“在线学习网”页面的超链接谢谢模块五网页表单设计目录任务一任务二任务三注册页面的设计读者留言板的设计引入知识点任务1注册页面的设计7.1了解表单7.2输入元素input任务1注册页面的设计7.1了解表单一个表单由三部分组成：（1）表单标记：包括处理表单数据所用的CGI程序（通用网关接口）的URL和数据提交到服务器的方法。（2）表单域：包括文本框、密码框、复选框、单选框、下拉选择框、文件上传框、多行文本框和隐藏域等。（3）表单按钮：包括提交按钮、重置按钮和普通按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用来控制其他定义了处理脚本的处理工作。任务1注册页面的设计7.1了解表单1、表单的作用表单在网页中的主要作用是采集用户数据，它提供一个页面，一个入口。表单处理信息的一般过程为：用户在表单中完成信息的填写后，单击表单中的提交按钮时，用户所输入的信息就会提交到服务器，服务器中的应用程序会对这些信息进行处理和响应，完成用户和服务器之间的交互。任务1注册页面的设计7.1了解表单2、表单元素form表单是网页上一个特定的区域，这个区域是由<form>标记定义的，它是一对双标记，<form>标记代表表单区域的开始，</form>标记代表表单区域的结束，在<form>和</form>标记之间的所有内容都属于表单内容。<form>标记的基本语法格式如下：<formname="表单名称"action="表单提交地址"method="数据传输方式">…</form>任务1注册页面的设计7.1了解表单表单常用属性任务1注册页面的设计7.2输入元素input基本语法格式<inputtype="输入控件类型"name="控件名字">任务1注册页面的设计7.2输入元素input根据type属性值的不同可以得到不同的控件类型type常用的属性值任务1注册页面的设计7.2输入元素input1、文本框text基本语法格式：<inputtype="text"name="field_name"value="field_value"size="size_value"maxlength="max_value">文本框属性任务1注册页面的设计7.2输入元素input2、密码框password基本语法格式：<inputtype="password"name="field_name"value="field_value"size="size_value"maxlength="max_value">密码框属性任务1注册页面的设计7.2输入元素input单选按钮属性3、单选按钮radio基本语法格式：<inputtype="radio"name="field_name"value="value"checked>任务1注册页面的设计7.2输入元素input复选框属性4、复选框checkbox基本语法格式：<inputtype="checkbox"name="field_name"value="value"checked>任务1注册页面的设计7.2输入元素input普通按钮属性5、普通按钮button基本语法格式：<inputtype="button"name="field_name"value="button_text">任务1注册页面的设计7.2输入元素input提交按钮属性6、提交按钮submit基本语法格式：<inputtype="submit"name="field_name"value="submit_text">任务1注册页面的设计7.2输入元素input重置按钮属性7、重置按钮reset基本语法格式：<inputtype="reset"name="field_name"value="reset_text">任务1注册页面的设计7.2输入元素input图片按钮属性8、图片按钮image基本语法格式：<inputtype="image"name="field_name"src="image_url">任务1注册页面的设计7.2输入元素input文本域属性9、文本域file基本语法格式：<inputtype="file"name="field_name">任务1注册页面的设计7.2输入元素input隐藏域属性10、隐藏域hidden基本语法格式：<inputtype="hidden"name="field_name">任务1注册页面的设计任务实现（1）创建一个HTML5页面，制作注册页面；（3）使用表格对注册页面的结构进行控制；（2）在页面中插入一个form元素；（4）在表格相对应的位置放入表单输入元素。任务1注册页面的设计注册界面引入知识点任务2读者留言板的设计7.3下拉选择框元素select7.4多行文本域textarea任务2读者留言板的设计7.3下拉选择框元素select下拉选择框也是页面中常用的表单元素，它由<select>标记定义，是一对双标记，<select>标记定义了下拉选择框的开始，</select>标记定义了下拉选择框的结束。可以通过属性设置要显示的选项数量，以及是否允许多项选择等内容。任务2读者留言板的设计7.3下拉选择框元素selectselect元素的常用属性基本语法格式：<selectname="field_name"size="size_value"multiple>…</select>任务2读者留言板的设计7.3下拉选择框元素selectselect元素相当于一个容器，标记当前的下拉选择框是菜单还是列表，而它所包含的菜单或列表中的每一项都是由option元素定义的。option元素定义了下拉选择框里的选项，它也是一对双标记，选项的内容包含在开始标记<option>和结束标记</option>之间。option元素要定义在<select>和</select>标记里面才能发挥作用。任务2读者留言板的设计7.3下拉选择框元素selectoption元素的常用属性option元素基本语法格式：<selectname="field_name"><optionvalue="string"selected>选项1</option><option>选项2</option><option>选项3</option>…</select>任务2读者留言板的设计7.4多行文本域textarea基本语法格式：<textareaname="field_name"cols="number"rows="number"></textarea>textarea元素也是在页面中经常使用的表单元素，它是一对双标记，<textarea>标记为开始标记，</textarea>标记为结束标记，需要在页面显示的初始文本内容放置于<textarea>与</textarea>标记之间。任务2读者留言板的设计7.4多行文本域textareatextarea元素的常用属性任务实现（1）创建一个HTML5页面，制作“读者留言板”页面；（3）使用表格对“读者留言板”页面的结构进行控制；（2）在HTML页面中插入一个form元素；任务2读者留言板的设计（4）在表格相对应的位置放入表单输入元素、下拉选择框元素及多行文本域元素。任务2读者留言板的设计读者留言板谢谢模块八

CSS3样式基础《HTML5+CSS3任务驱动教程》目录任务一任务二任务三网页大标题的样式设计网页中的文字排版制作产品分类本模块任务安排：引入知识点任务1网页大标题的样式设计8.1什么是CSS8.2CSS的应用任务1网页大标题的样式设计8.1什么是CSSCSS是层叠样式表(CascadingStyleSheets)的简称，是用来表现HTML或XML的标记语言，运用CSS样式与HTML所描述的信息结构相结合，能够帮助设计师将网页内容与表现相分离，使网站更加容易构建与维护。任务1网页大标题的样式设计8.1什么是CSSCSS的语法结构任务1网页大标题的样式设计8.2CSS的应用1、行间样式行间样式，也叫内联样式，由HTML标记中的style属性所支持，要使用行间样式，你需要在相关的标签内使用样式（style）属性。行间样式将表现和内容混杂在一起。<pstyle="color:#f00;padding-left:20px">这是一个段落。</p>任务1网页大标题的样式设计8.2CSS的应用2、内部样式内部样式是CSS样式编码的初级应用形式，样式表作为页面的一个单独部分，由<style></style>标记定位在<head></head>之中。只能针对当前页面有效，不能跨页面执行。<head><styletype="text/CSS">hr{color:blue;}p{margin-left:20px;}body{background-color:#ccc;}</style></head>任务1网页大标题的样式设计8.2CSS的应用3、外部样式外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。而且多个网页可以调用同一个样式表文件，这样能够实现代码的最大限度重用及网站文件的最优化配置。当样式需要应用于很多页面时，外部样式表将是理想的选择。<head><linkrel="stylesheet"type="text/CSS"href="mystyle.CSS"/></head>任务1网页大标题的样式设计8.2CSS的应用CSS的文本属性任务1网页大标题的样式设计任务实现（1）使用HBuilder创建一个html文件，保存为index.html，文档中包含<head>、<body>等基本的HTML结构。（3）为<h1>标记设计CSS样式（2）在<body>标记中，使用标题标记<h1>将内容进行语义化标记引入知识点任务2网页中的文字排版8.3CSS字体样式任务2网页中的文字排版8.3CSS字体样式任务实现（1）在HBuilder中新建一个HTML5页面，保存为news1.html，使用<div>、<h1>、<h2>、<p>标记对网页内容进行结构定义（3）采用外部样式表的方式，将CSS与html链接（2）新建CSS文件，保存于与HTML文档同一目录下，保存文件名称为news.css任务2网页中的文字排版body{ font-size:100%;}div{ width:600px; font-family:MicrosoftYahei;/*字体为微软雅黑*/}h2{ text-indent:2em;/*首行缩进2个字符*/ font-style:italic;/*设置倾斜字体*/}p{ font-size:1.2em;/*字体放大0.2倍*/ line-height:1.8em;/*行高为原来的1.8倍*/ text-indent:2em;/*首行缩进*/ color:#333;}效果图任务2网页中的文字排版效果图任务2网页中的文字排版按相同方法完成new2.html页面，采用外部样式表，实现相同的外观。引入知识点任务3制作产品分类8.4列表元素列表HTML标记任务3制作产品分类1、ul无序列表2、ol有序列表3、自定义列表dl<h3>无序列表:</h3><ul><li>循环制</li><li>淘汰制</li><li>混合制</li></ul><h3>有序列表:</h3><ol> <li>一等奖</li> <li>二等奖</li> <li>三等奖</li> </ol><dl><dt>欢迎来学习HTML+CSS</dt><dd>这里有，html教程</dd><dd>这里有，css模块</dd><dd>这里有，css教程</dd></dl>列表的CSS属性任务3制作产品分类任务实现任务3制作产品分类（1）启动HBuilder，新建文档，选择HTML文档，保存为list.html，将文档内容写入<body>标记中。为文本内容添加h1、ol-li、h3、ul-li等标记或标记对，添加标记时注意标记的配对和缩进。（2）新建CSS样式表文件，保存为list.css，并使用<link>标记与HTML页面关联。效果图任务3制作产品分类谢谢模块九使用DIV+CSS布局页面《HTML5+CSS3任务驱动教程》目录任务一任务二任务三网页中的图文混排网页中的全图排版多行多列式布局本模块任务安排：任务描述任务1网页中的图文混排在现代网页中，纯文字的网页显得过于单调，为吸引用户浏览，通常在文字中会插入适当的相关图片，以更好地展现要表达的意思。在传统的表格式布局中，往往通过插入一个表格，再在表格中插入图片，并对表格应用align属性来控制图片居中、居左还是居右来显示。而本任务中利用块状元素的盒子模型特性，应用CSS块状元素的更多属性，实现更多图文混排效果。任务1浏览效果如图9-1所示。引入知识点任务1网页中的图文混排9.1CSS盒子模型9.2CSS浮动与定位任务1网页中的图文混排9.1CSS盒模型任务1网页中的图文混排9.1CSS盒模型1．外边框margin可以单独改变元素的上、下、左、右边距（顺时针）。也可以一次改变所有的属性。外边距设置属性有margin、margin-top、margin-bottom、margin-right、margin-left。2．边框元素外边距内就是元素的边框（border）,每个边框有3个方面：宽度、样式，以及颜色。常用的边框属性有7项:border-top（上边框）、border-right（有边框）、border-bottom（下边框）、border-left（左边框）、border-width（边框宽度）、border-color（边框颜色）、border-style（边框样式）。其中border-width可以一次性设置所有的边框宽度，border-color同时设置四面边框的颜色时，可以连续写上4种颜色，并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序（顺时针）。任务1网页中的图文混排9.1CSS盒模型3．内边距元素的内边距在边框和内容区之间为paddingpadding属性与外边距类似，格式也大致相同，可以单独设置四内边距，也可使用padding一次性设置4．CSS3圆角在CSS3之前，要实现圆角的效果主要通过图片辅助实现，实现起来不是很方便，使用CSS3的border-radius很方便实现圆角边框，但要注意部分旧版本的浏览器不直接CSS3的属性border-radius和前面介绍的border的参数个数和用法基本相同任务1网页中的图文混排9.2CSS浮动与定位float是CSS样式中的布局属性，float属性的left和right值分别能够让元素向左和向右浮动。比如当元素向左浮动之后，对象的右侧将清空出一块区域，以便让剩下的文档元素能够贴在右侧。利用这个特性可以方便地设计出需要的块状元素排版布局效果。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。clear属性指定元素两侧不能出现浮动元素，主要有三个属性值：both、left、right，分别表示清除两边的浮动、清除元素左边的浮动、清除元素右边的浮动。

采用position:absolute;之后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bottom和left四个方向的边距值来实现。一旦对象被设置绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象而存在

使用position:relative;进行相对定位，通过left和top来设置偏离原来位置左侧和上侧的距离。任务1网页中的图文混排任务实现（1）创建一个HTML5页面，使用合适的标记对网站内容进行结构定义；（2）根据CSS盒子模型原理对网页进行布局设置，对图片进行合适的定位，在编写CSS代码之前先将需要用到的图片保存于网站目录中的images文件文件夹中，本项目主要采用类选择器、后代选择器（也可使用子元素选择器）编写出CSS代码；（3）使用内部样式表的形式将所写CSS应用于该网页。任务描述任务2网页中的全图排版网页中全是图片的排版布局也不少见，图片排版常被用在相册类、产品展示类的网页中，这类页面往往有大量的图片在同一页中进行展示，使用CSS布局进行全图排版的核心在于，对浮动定位的控制，并且具有较好的灵活性。对于具有相同尺寸的图片进行排版，用CSS进行浮动定位是比较好控制的，若对于各个图片的尺寸规格不相同的图片进行直接排版，也可以采用流式布局，使图片错落排列。网站的图片新闻，采用了相同大小的图片，此时只需要设置好一张图片的样式，其他图片用相同的元素进行设置并产生浮动即可，外层元素的整体宽度也很容易通过盒模型计算得知。引入知识点任务2网页中的全图排版9.3CSS背景控制任务2网页中的全图排版9.3CSS背景控制任务2网页中的全图排版9.3CSS背景控制background:#f09url(bg.png)repeat-xfixed20px40px;任务2网页中的全图排版任务实现（1）在DreamweaverCC中创建一个空白HTML5页面，在标题处输入“校园风光”，保存为index.html。选用<div>标记对页面进行整理布局，给<div>标记设置一个类layout，选用无序列表ul对图片进行结构定义，每一个列表项中包含图片和段落文字，HTML代码如下：<divclass="layout"> <h2>美丽校园</h2> <ul> <li><imgsrc="images/hu.png"/><p>湖相依、楼相伴</p></li> <li><imgsrc="images/huguang.jpg"/><p>湖光倒影</p></li> <li><imgsrc="images/biyezhao.jpg"/><p>毕业照</p></li> <li><imgsrc="images/kongzi.png"/><p>孔子像</p></li> <li><imgsrc="images/menlou.png"/><p>学校正门门楼</p></li> <li><imgsrc="images/qiao.png"/><p>创新桥</p></li> <li><imgsrc="images/shiguang.jpg"/><p>快乐时光</p></li> <li><imgsrc="images/xiaoyuan.jpg"/><p>美丽校园</p></li> <li><imgsrc="images/yundonghui.jpg"/><p>运动会</p></li> </ul></div>任务2网页中的全图排版任务实现（2）为显示更加直观，本任务选用内部样式表的方式编写CSS代码，直接在<head>中写入<style>标记来编写CSS，首先编写CSSReset可以清除一些标记的特性，如ul、li的边距等，然后编写布局元素layout类，主要是给它固定宽度，水平方向居中对齐。注意：根据之前介绍的盒模型原理，此时layout的宽度应该等于一个li占据的宽度，再乘以3即可，layout的width=(图片宽度270px+左右外边距20px+li左右边框2px)*3=876px。（3）给图片固定大小为，宽度为270px，高度为160px。并给li标记进行向左浮动，即可让元素共处同一行，当每显示完3个li元素后，剩余的没有空间显示，自动会进入下一行显示。（4）给<h2>标题内容设置图标进行视觉美化。因此时的图片并不是网页的内容，只是显示效果的辅助，因此此时给<h2>设置背景图像为宜，并且不平铺，加入背景后要让背景显示在文字的左侧，此时应给<h2>标记添加一些填充留白，以为背景让出摆放的位置。然后给背景图片进行适当的定位，使之显示到合适的位置。最后给元素添加一些边框、字体等属性，CSS代码如下：任务2网页中的全图排版任务实现<style> ul,li{ margin:0;padding:0;list-style:none; } .layout{ width:876px; margin:20pxauto; } .layouth2{ background:url(images/titlebj.jpg)no-repeatleftcenter; line-height:2em; padding-left:66px; font-family:MicrosoftYahei; border-bottom:solid#31C4F91px; letter-spacing:0.8em; } .layoutli{ float:left; border:solid1px#DEF4FC; margin:10px; text-align:center; } .layoutliimg{ width:270px; height:160px; }任务2网页中的全图排版最终效果任务描述任务3多行多列式布局PC上的网站元素越来越多，为使各元素美观大方的呈现出来，通过需要对页面进行排版。通常采用多行或多列的方式去复杂页面进行整体布局，从而使内容井然有序。本任务通过实现如图9-11所示的多行多列排版布局效果，来学习CSS的背景定位、图标管理及代码优化等知识。引入知识点任务3多行多列式布局9.4CSS代码优化任务3多行多列式布局9.4CSS代码优化1、网页中的小图标管理网页中的小图标通常是UI设计师为提升网页美观度而添加的网页元素，通常是一种视觉设计上的美化，一般设计得比较小巧精细，完成此部分的网页效果时，通常使用背景图片进行背景定位来辅助完成。通常会将这些小图标收集起来，用图像处理工具添加在一张图片上，并有明确的尺寸，需要用到各个小图标时，再进行精确定位即可定位到指定的图标了。任务3多行多列式布局9.4CSS代码优化2、增加CSS代码重用率主要的代码的改进方法是使用群组选择器，将大部分的公共代码进行集合在群组中，同时也可以使用CSS覆盖，得到代码的重用3、容器高度不扩展的问题在制作CSS网页过程中，在默认情况下，容器的高度默认情况下，会随着容器的内容进行自动扩展，但在CSS布局中常常会碰到容器不扩展的问题。可以在子容器的最末处添加了一个清除浮动的div容器<divclass="clear"></div>任务3多行多列式布局任务实现（1）创建HTML文件，添加一个固定宽度、页面居中的主容器<div>标记，作为全页的框架，其class为content。（2）仔细观察任务效果图，最外层的主容器是固定宽度的，再确定容器中整体的布局结构。本任务可采用两种不同的方式布局，第一种可以采用三列式、固定宽度的布局，再在每一列中分成多行；第二种可以采用右侧方块固定，左侧4个方块固定宽度并自由浮动的布局。（3）在content所在div中，添加5个<div>标记，并分别设置类名称为service、about、info、resource、news，为优化代码，将5个方块的公共代码抽出来，放入box类中，主要包括边框、浮动等属性，完成div布局元素的HTML代码（4）创建CSS样式表，为类选择器设置相关布局属性进行定位，其CSS样式代码如下：.content{width:990px;margin:0auto;padding:10px025px0;background:#fff;}.box{float:left;border:solid1px#e9e9e9;}.service{width:238px;height:233px;}.about{width:488px;height:233px;margin:010px;}.news{width:238px;height:428px;float:right;}.info{width:238px;height:183px;margin:10px010px0;}.resource{width:488px;height:183px;margin:10px;}任务3多行多列式布局任务实现（5）接下来完成每个盒子公共部分的效果，主要体现在标题栏基本相同，此处采用图标管理，将图标放在一张图片上，设置相同的背景图片，主要的CSS代码如下：/*每个盒子公共部分的CSS*/.box{float:left;border:solid1px#e9e9e9;}.box.top{height:32px;position:relative;border-bottom:solid1px#9ab1b8;}.box.toph2{width:70px;height:15px;margin:10px000;padding:00035px;border-right:solid1px#7c8d90;background:url("../img/icon.gif")no-repeat;overflow:hidden;float:left;font:normal14px"微软雅黑";color:#37585e;line-height:15px;}.box.topa{width:30px;height:15px;background:url("../img/icon.gif")no-repeat0-105px;overflow:hidden;display:block;position:absolute;top:8px;right:20px;text-indent:-999em;}.box.topa:hover{background:url("../img/icon.gif")no-repeat0-120px;}任务3多行多列式布局任务实现（6）在每个不同的方块中对应应用h2、a、ul、li等标记做好元素的结构，完成的HTML（7）在每个不同的方块中，利用各自的类来定位不同的背景位置，设置好图标的精确位置，再对各个部分的内容进行细节设计，具体CSS代码（8）此时在浏览器中浏览效果时，发现内容区域背景颜色并不是白色，此问题是由于外层容器content的高度未能实现自动扩展，在HTML结构中添加一个清除浮动即可解决此问题。谢谢模块十使用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> </form> </div>任务3用CSS3美化表单任务实现（3）编写CSS样式，首先可以编写布局控制好页面，及浮动效果，然后对表单元素进行样式设计，此处可先写公共的样式，即所有元素都具有的外观，这里有两种类型，一种是input，一种是select，可合并在一组来写，属性主要有宽度、高度、行高、填充、圆角、边框、字体大小等。（4）下拉列表及电话号码输入框，因为要处同一行，所以需要进行浮动，此时，对select元素及input[type='tel']这两个元素分别设置不同的宽度及浮动。（5）对提交按钮进行样式设计，采用属性选择器input[type='submit']，因提交按钮没有边框和填充，因此需要给它添加一点宽度，这样才能与上面的元素宽度对齐，并给提交按展示设置背景颜色、文字颜色、外边距，同时需要清除浮动（因上面的元素进行了浮动）。（6）给所有表单元素input和select，使用伪类:hover和:focus添加交互效果，主要设置其边框颜色等。注意：:focus选择器用于选取输入获得焦点的元素，此属性之前较少使用，主要用在表单元素中。最后，对一些细节的字体、宽度、边距等做一些细节设置，完成CSS代码任务3用CSS3美化表单任务实现（8）完成后在浏览器中浏览效果，若有没有达到的效果，再次进行修正，最终浏览效果如图10-6所示。谢谢模块十一综合案例具体任务学校网站页面设计具体任务学校网站页面设计本任务设计一个完整的学校网站页面，包括网站和网页的建立、CSS样式的设计和网页相关信息功能的设计，网页效果如图所示。我们能够清晰地看到页面的整体结构分布，其顶部为导航信息栏，中间是关于学校的相关介绍及学校、学院的最新消息展示等，底部为网站信息、版权声明等内容。整个页面的设计涵盖了本书各个模块的知识，通过实现本任务，可以较好地将理论知识转化为实践能力。任务实现学校网站页面设计（1）启动HBuilderX软件，执行“文件”→“新建”命令，输入站点名称和本地站点文件夹路径，单击“保存”按钮即可成功建立一个名称为“学校网站”的站点任务实现学校网站页面设计（1）启动HBuilderX软件，执行“文件”→“新建”命令，输入站点名称和本地站点文件夹路径，单击“保存”按钮即可成功建立一个名称为“学校网站”的站点学校网站文件夹下包含网站的index.html主页文件、course.html子页文件，以及CSS和images两个文件夹，分别用于存放网站需要的CSS样式文件和图片文件。任务实现学校网站页面设计（2）建立CSS样式文件，如图所示。

编辑层级样式表内容，然后保存到CSS文件夹下，方便整体管理网站的代码。任务实现学校网站页面设计（3）导航的代码设计与分析。①导航页面设计的代码如下：<divclass="header"><divclass="header-top"> <divclass="container"> <divclass="detail"> <ul> <li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>+66666666666</li> <li><iclass="glyphiconglyphicon-time"aria-hidden="true"></i>周一到周五9:00到18:00</li> </ul> </div> <divclass="indicate"> <p><iclass="glyphiconglyphicon-map-marker"aria-hidden="true"></i>学校路666号</p> </div> <divclass="clearfix"></div> </div></div><divclass="container"> <navclass="navbarnavbar-default"> <divclass="container-fluid"> <!---Brandandtogglegetgroupedforbettermobiledisplay---> <divclass="navbar-header"> <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"> <spanclass="sr-only">Togglenavigation</span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <divclass="navbar-brand"> <h1><ahref="index.html">学校<span>主页</span></a></h1> </div> </div> <!--Collectthenavlinks,forms,andothercontentfortoggling--> <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"> <navclass="link-effect-2"id="link-effect-2"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="index.html"><spandata-hover="Home">主页</span></a></li> <li><ahref="about.html"><spandata-hover="About">关于我们</span></a></li> <li><ahref="services.html"><spandata-hover="Services">提供服务</span></a></li> <li><ahref="projects.html"><spandata-hover="Projects">计划与安排</span></a></li> <li><ahref="courses.html"><spandata-hover="Courses">课程</span></a></li> <li><ahref="codes.html"><spandata-hover="Codes">资源库</span></a></li> <li><ahref="contact.html"><spandata-hover="Contact">联系我们</span></a></li> </ul> </nav> </div> </div> </nav></div></div>任务实现学校网站页面设计（3）导航的代码设计与分析。通过使用<ul>和<li>标记，可以实现网站导航栏列表，对于导航中的各个条目，填入需要表现的导航信息，展示导航内容。通过<nav>标记定义导航中的链接部分，将导航中的各条目内容转化为链接，实现不同内容主页的跳转。任务实现学校网站页面设计②导航CSS样式设计的代码如下：定义<nav>标签的样式，通过position，display等属性控制导航栏内位置显示等属性。对于每个条目，通过background属性，设置整个header内的背景颜色，进一步还可通过padding属性设置对应区域内边距。nava{ position:relative; display:inline-block; outline:none; text-decoration:none;}nava:hover,nava:focus{ outline:none;}.header{background:#49872E;}.header-top{padding:1em0;background:#2e353f;}任务实现学校网站页面设计通过上述代码可以得到如图所示的效果。任务实现学校网站页面设计（4）主体部分的代码设计与分析。①学校宣传信息的代码如下：通过<img>标记设置区块背景，用于展示学校风景。 <divclass="banner"><div><imgsrc="image/1.jpg"alt=""width="100%"/></div> </div>任务实现学校网站页面设计②学校宣传信息底部条幅页面设计的代码如下：通过<h4>标记设置标题，通过<i>标记设置文本斜体。<divclass="banner-bottom"> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>师资力量</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-user"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>视频课程</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-facetime-video"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>图书馆</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-book"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>在线课程</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-blackboard"></i> </div> <divclass="clearfix"></div> </div> <divclass="clearfix"></div></div>任务实现学校网站页面设计③学校宣传信息底部条幅CSS设计的代码如下：.banner-bottom{text-align:center;background:#EDF7FF;