【基于HTML5的网页设计及应用】——链接伪类选择器和伪元素选择器

Y小夜

已于 2023-12-05 18:44:02 修改

阅读量961

点赞数 29

分类专栏：基于HTML5的网页设计及应用文章标签： html5 前端 html

于 2023-11-11 12:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/shsjssnn/article/details/134210723

版权

基于HTML5的网页设计及应用专栏收录该内容

25 篇文章

订阅专栏

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-优快云博客

🐳Java基础：Java基础_IT闫的博客-优快云博客

🐋c语言：c语言_IT闫的博客-优快云博客

🐟MySQL：数据结构_IT闫的博客-优快云博客

🐠数据结构：数据结构_IT闫的博客-优快云博客

💎C++：C++_IT闫的博客-优快云博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-优快云博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-优快云博客

🥏python：python_IT闫的博客-优快云博客

欢迎收看，希望对大家有用！

🎯链接伪类选择器：

🥏涉及知识点:

<!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>