本文详细介绍了如何在HTML5中使用链接伪类选择器和伪元素创建动态的导航菜单，包括列表项样式、链接状态样式以及鼠标悬停和点击时的效果。
🎃个人专栏：
🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客
🐳Java基础：Java基础_IT闫的博客-CSDN博客
🐋c语言：c语言_IT闫的博客-CSDN博客
🐟MySQL：数据结构_IT闫的博客-CSDN博客
🐠数据结构：数据结构_IT闫的博客-CSDN博客
💎C++：C++_IT闫的博客-CSDN博客
🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客
💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客
🥏python：python_IT闫的博客-CSDN博客
欢迎收看，希望对大家有用！
🎯链接伪类选择器：
🥏涉及知识点:
<!DOCTYPE html>声明了文档类型为HTML，告诉浏览器使用HTML解析器来解析该页面。
<html lang="en">标签定义了整个HTML文档的开始和结束。
<head>标签内包含了一些元数据和引用的外部资源。
<meta charset="UTF-8">设置字符集为UTF-8，确保页面能正确地显示各种语言的字符。<meta http-equiv="X-UA-Compatible" content="IE=edge">通过X-UA-Compatible元标签设置兼容模式，使页面在IE浏览器中以最高版本的模式渲染。<meta name="viewport" content="width=device-width, initial-scale=1.0">设置视口的宽度和初始缩放比例，使页面在移动设备上呈现良好的可视效果。<title>Document</title>设置页面标题为 "Document"。
<style>标签用来定义页面的样式。
li选择器定义了列表项的样式。设置了宽度、字体、内边距、外边距、背景颜色、文本居中对齐以及圆角等样式属性。a:link、a:visited、a:hover、a:active分别定义了链接在不同状态下的样式。设置了颜色属性，用来改变链接的颜色。
<body>标签内包含了网页的主体内容。
<ul>标签定义了一个无序列表。<li>标签定义了列表项。<a>标签定义了一个链接，通过href属性指定链接的目标地址。每个列表项都包含一个链接，点击链接时会跳转到相应的目标位置（由
href属性指定）。整体效果是一个简单的导航菜单，点击菜单项后可以快速跳转到页面内的指定位置。请注意，这只是一个静态的HTML页面，没有具体的内容和跳转目标。如果需要实际内容和功能，请在相应的
href属性中填写正确的目标地址。
💻代码展示:
html
<!DOCTYPE html> <!-- 声明文档类型为 HTML -->
<html lang="en"> <!-- 标识网页的语言为英语 -->
<head>
<meta charset="UTF-8"> <!-- 设置字符集为 UTF-8，使网页能正确地显示各种语言的字符 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置兼容模式为 IE 浏览器当前最新版本 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置网页在移动端设备上的缩放比例为 1:1 -->
<title>Document</title> <!-- 设置网页标题为 "Document" -->
<style> <!-- 在 head 标签中添加样式 -->
li{ <!-- 设置 li 标签的样式 -->
width: 170px; <!-- 设置宽度为 170 像素 -->
font: 30px "隶书"; <!-- 设置字体大小为 30 像素，字体为 "隶书" -->
padding: 5px; <!-- 设置内边距为 5 像素 -->
margin: 10px; <!-- 设置外边距为 10 像素 -->
background-color: lightgray; <!-- 设置背景颜色为浅灰色 -->
list-style: none; <!-- 取消列表样式 -->
text-align: center; <!-- 设置文本居中对齐 -->
border-radius: 5px; <!-- 设置圆角半径为 5 像素 -->
}
a:link{ <!-- 设置链接的样式 -->
color: blue; <!-- 设置链接颜色为蓝色 -->
}
a:visited{ <!-- 设置已访问链接的样式 -->
color: red; <!-- 设置已访问链接颜色为红色 -->
}
a:hover{ <!-- 设置鼠标悬停在链接上的样式 -->
color: yellow; <!-- 设置链接颜色为黄色 -->
}
a:active{ <!-- 设置链接被点击时的样式 -->
color: green; <!-- 设置链接颜色为绿色 -->
}
</style>
</head>
<body>
<ul> <!-- 定义一个无序列表 -->
<li><a href="#1">学校概况</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #1 -->
<li><a href="#2">院校设置</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #2 -->
<li><a href="#3">教育教学</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #3 -->
<li><a href="#4">科学研究</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #4 -->
<li><a href="#5">招生就业</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #5 -->
<li><a href="#6">合作交流</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #6 -->
<li><a href="#7">诚聘英才</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #7 -->
<li><a href="#8">智慧校园</a></li> <!-- 添加一个列表项，其中包含一个链接，链接地址为 #8 -->
</ul>
</body>
</html>🥽实现效果：
【基于HTML5的网页设计及应用】——链接伪类选择器
🎯伪元素选择器：
🥏涉及知识点:
- DOCTYPE声明 (
<!DOCTYPE html>)：指定文档类型为HTML。- HTML元素 (
<html>)：整个HTML文档的根元素。- head元素 (
<head>)：包含了关于文档的元信息，如字符集、浏览器兼容性等。- meta元素：用于设置文档的元信息，如字符集（
<meta charset="UTF-8">）和视口（<meta name="viewport" content="width=device-width, initial-scale=1.0">）。- title元素 (
<title>)：定义了文档的标题，显示在浏览器的标题栏或标签页上。- style元素 (
<style>)：内联样式表，用于定义CSS样式。- li元素 (
<li>)：无序列表项，代表每个菜单项。- a元素 (
<a>)：超链接，用于创建可点击的链接。- ul元素 (
<ul>)：无序列表，包含多个菜单项。- body元素 (
<body>)：文档的主体内容。CSS样式部分定义了列表项和链接在不同状态下的样式，包括宽度、字体、背景颜色、内边距、外边距等。鼠标悬停时，列表项的背景颜色会变成skyblue，并出现红色的三角形。链接的颜色在不同状态下也有所变化。
💻代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 设置字符集为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置兼容模式，使页面在IE浏览器中以最高版本的模式渲染 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口的宽度和初始缩放比例 -->
<title>Document</title> <!-- 设置页面标题为 "Document" -->
<style>
li{ /* 列表项样式 */
width: 170px; /* 设置宽度 */
font: 30px "隶书"; /* 设置字体 */
padding: 5px; /* 设置内边距 */
margin: 10px; /* 设置外边距 */
background-color: lightgray; /* 设置背景颜色 */
list-style: none; /* 移除默认的列表样式 */
text-align: center; /* 文本居中对齐 */
border-radius: 5px; /* 设置圆角边框 */
}
li:hover{ /* 鼠标悬停在列表项上的样式 */
background-color: skyblue; /* 改变背景颜色 */
}
a:link{ /* 未访问链接的样式 */
color: blue; /* 设置颜色为蓝色 */
}
a:visited{ /* 已访问链接的样式 */
color: red; /* 设置颜色为红色 */
}
a:hover{ /* 鼠标悬停在链接上的样式 */
color: yellow; /* 设置颜色为黄色 */
}
a:active{ /* 链接被点击时的样式 */
color: green; /* 设置颜色为绿色 */
}
li:hover::before{ /* 鼠标悬停在列表项上时的伪元素样式（红色三角形，出现在文本之前） */
content:''; /* 清空内容 */
display:inline-block; /* 将元素显示为内联块级元素 */
width:0px; /* 设置宽度为0 */
height:0px; /* 设置高度为0 */
border-style:solid; /* 设置边框样式为实线 */
border-width:10px; /* 设置边框宽度为10px */
border-color: transparent transparent transparent red; /* 设置边框颜色为透明、透明、透明、红色 */
}
li:hover::after{ /* 鼠标悬停在列表项上时的伪元素样式（红色三角形，出现在文本之后） */
content:''; /* 清空内容 */
display:inline-block; /* 将元素显示为内联块级元素 */
width:0px; /* 设置宽度为0 */
height:0px; /* 设置高度为0 */
border-style:solid; /* 设置边框样式为实线 */
border-width:10px; /* 设置边框宽度为10px */
border-color:transparent red transparent transparent; /* 设置边框颜色为透明、红色、透明、透明 */
}
ul a{text-align: center;} /* 设置链接文本居中对齐 */
</style>
</head>
<body>
<ul> <!-- 无序列表 -->
<li><a href="#1">学校概况</a></li> <!-- 列表项1，链接目标为ID为 "1" 的元素 -->
<li><a href="#2">院校设置</a></li> <!-- 列表项2，链接目标为ID为 "2" 的元素 -->
<li><a href="#3">教育教学</a></li> <!-- 列表项3，链接目标为ID为 "3" 的元素 -->
<li><a href="#4">科学研究</a></li> <!-- 列表项4，链接目标为ID为 "4" 的元素 -->
<li><a href="#5">招生就业</a></li> <!-- 列表项5，链接目标为ID为 "5" 的元素 -->
<li><a href="#6">合作交流</a></li> <!-- 列表项6，链接目标为ID为 "6" 的元素 -->
<li><a href="#7">诚聘英才</a></li> <!-- 列表项7，链接目标为ID为 "7" 的元素 -->
<li><a href="#8">智慧校园</a></li> <!-- 列表项8，链接目标为ID为 "8" 的元素 -->
</ul>
</body>
</html>
🥽实现效果：
伪元素选择器
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
