【技能锤炼】
【练习素材】
【案例4-7】制作简单的热点新闻板块
一、案例描述
1、 考核知识点
超链接标记<a>
2、 练习目标
Ø 掌握超链接文本的定义方法
Ø 掌握无序列表的应用方法
Ø 掌握链接伪类的定义方法
3、 需求分析
在制作网页时，为了增强网页的功能性，经常需要将列表和超链接配合使用，为了便于初学者的理解和掌握，接下来，通过一个制作热点新闻版块的案例做具体演示。
4、 案例分析
1) 效果如图4-15所示。
图4-1 热点新闻版块效果图
2) 具体实现步骤如下：
a) 定义新闻标题。
b) 定义水平线，并通过CSS设置水平线的样式。
c) 定义无序列表，并为列表项中的文本添加超链接属性，并定义链接伪类。
d) 为“马上注册”图片添加超链接属性。
二、案例实现
1、制作页面结构
新建HTML页面，
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS
保存后，在谷歌浏览器中预览，效果如图所示。
图4-2 正常情况下的新闻链接板块
【阶段案例】制作风云人物列表
本章前几节重点讲解了选择器及伪类链接的使用，为了使读者更好的掌握这些相关知识点，本节将通过案例的形式分步骤制作一个“风云人物列表”，其默认效果如图4-22所示。
图 4-22 “风云人物列表”默认效果
当鼠标悬浮于导航选项时，该选项的文本颜色发生变化，且添加下划线效果，如图4-23所示。
图 4-23 鼠标悬浮样式
当用鼠标点击导航选项后，会出现该款软件的相关介绍，例如点击第一个导航选项，效果如图4-24所示。
图 4-24 人物介绍效果
4.1.1 分析效果图
1、结构分析
图4-25所示的软件效果展示页面由标题、导航栏及内容介绍三部分组成，如图4-25所示。
图 4-25 结构分析
在HTML页面中，可以使用标题标记<h2>定义标题，通过<nav>元素内部嵌套<a>链接搭建导航结构，然后由定义列表<dl>定义内容部分，并为导航和内容间设置锚点链接。同时为了设置某些特殊显示的文本可以通过嵌套<em>标记来定义。
2、样式分析
仔细观察效果图，可以发现页面中的标题、导航栏和内容部分均水平居中显示，可整体定义。然后需要分别定义每一部分的样式，首先定义导航栏中<a>链接的样式，包括访问前后和访问时两种样式。然后定义内容介绍部分，将页面加载完成时内容部分的显示状态设为隐藏，并统一设置内容部分的文字样式，文字前的小图标通过伪元素选择器定义。为了突出内容部分的文字效果，通过结构化伪类选择器搭配<em>标记进行定义。最后，通过target选择器将链接到的内容设置为显示，从而实现点击导航中的某一款软件时，显示该软件相对应的内容介绍信息。
精灵图应用
在前端页面中，列表添加小图标是常见的设计需求，以下是几种常用方法：
1. 使用 HTML 和 CSS 实现
可借助 HTML 的列表标签（如 <ul> 或 <ol>）来创建列表，再利用 CSS 的 list-style-image 属性指定图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul {
list-style-image: url('icon.png');
}
</style>
</head>
<body>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
</body>
</html>
这种方法简单直接，不过图标尺寸和位置的调整灵活性欠佳。
2. 使用内联 SVG 图标
将 SVG 代码直接嵌入 HTML 文件，能够灵活控制图标的样式和交互。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
svg {
width: 16px;
height: 16px;
margin-right: 5px;
fill: currentColor;
}
</style>
</head>
<body>
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>列表项 1</li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>列表项 2</li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>列表项 3</li>
</ul>
</body>
</html>
这种方法可方便地对图标进行样式定制，而且能避免额外的 HTTP 请求。
3. 使用字体图标库
像 Font Awesome、Iconfont 这类字体图标库，提供了丰富的图标资源，只需引入相应的 CSS 文件，然后在 HTML 中使用特定的类名就能显示图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<ul>
<li><i class="fas fa-check"></i> 列表项 1</li>
<li><i class="fas fa-check"></i> 列表项 2</li>
<li><i class="fas fa-check"></i> 列表项 3</li>
</ul>
</body>
</html>
此方法使用便捷，图标可像文本一样进行样式设置，不过会增加一些额外的 CSS 文件加载。
4. 使用背景图片
利用 CSS 的 background-image 属性为列表项添加背景图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
li {
list-style-type: none;
background-image: url('icon.png');
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
</style>
</head>
<body>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
</body>
</html>
这种方法能灵活控制图标的位置和大小，不过需手动处理列表项的样式。
