🎃个人专栏:
🐬 算法设计与分析:算法设计与分析_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>
🥽实现效果:
伪元素选择器