🎃个人专栏：
🐬 算法设计与分析：算法设计与分析_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博客
欢迎收看，希望对大家有用！
目录
🎯个人简历表格：
🥏涉及知识点：
💻代码展示：
🥽实现效果：
🎯伪类选择器应用：
🥏涉及知识点：
💻代码展示：
🥽实现效果：
🎯个人简历表格：
🥏涉及知识点：
<table>：定义一个表格，用于展示个人简历的各个信息。<caption>：表格标题，显示为"个人简历"。<tr>：表示表格中的一行。<td>：表示表格中的一个单元格。class="tdbgc"：给指定的单元格设置一个名为"tdbgc"的类，用于设置背景色为灰色。rowspan="5"：用于合并单元格，将图片单元格跨越5行。<img>：插入一个图片，src属性指定图片的路径。<style>：定义了表格的样式，如宽度、边框、字体等。- CSS选择器（例如".pic"）：通过CSS选择器选中指定的元素，并对其进行样式设置。
💻代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 800px;
height: 550;
border: solid 3px #000033;
border-collapse: collapse;
text-align: center;
margin: 10px auto;
}
caption{
font-size: 24px;
padding: 10px;
}
td{
border: solid 2px;
}
.pic{
width: 200px;
}
.tdbgc{
background-color: #ccc;
}
</style>
</head>
<body>
<table>
<caption>个人简历</caption>
<tr>
<td class="tdbgc">姓名</td>
<td>张三丰</td>
<td class="tdbgc">性别</td>
<td>男</td>
<td rowspan="5" class="pic"><img src="images/boy.jpg" alt=""></td>
</tr>
<tr>
<td class="tdbgc">民族</td>
<td>汉</td>
<td class="tdbgc">籍贯</td>
<td>河南洛阳</td>
</tr>
<tr>
<td class="tdbgc">出生日期</td>
<td>2000-3-26</td>
<td class="tdbgc">婚姻状况</td>
<td>否</td>
</tr>
<tr>
<td class="tdbgc">学业</td>
<td>本科</td>
<td class="tdbgc">身高体重</td>
<td>173CM、70KG</td>
</tr>
<tr>
<td class="tdbgc">专业</td>
<td>计算机应用</td>
<td class="tdbgc">健康状况</td>
<td>良好</td>
</tr>
<tr>
<td 求职意向 class="tdbgc">求职意向</td>
<td colspan="4">计算机教育培训机构、软件公司</td>
</tr>
<tr>
<td class="tdbgc">毕业院校</td>
<td colspan="2">河南科技大学</td>
<td class="tdbgc">邮编</td>
<td>471003</td>
</tr>
<tr>
<td class="tdbgc">联系电话</td>
<td>13836781234</td>
<td class="tdbgc">邮箱</td>
<td colspan="2">11111111@qq.com</td>
</tr>
<tr>
<td class="tdbgc">语言能力</td>
<td colspan="4">普通话：标准 英语：熟练</td>
</tr>
<tr>
<td class="tdbgc">主修课程</td>
<td colspan="4">c、c++、c#、操作系统、数据结构、数据库</td>
</tr>
<tr>
<td class="tdbgc">个人技能</td>
<td colspan="4"><p>1.熟悉客户端与服务器的脚本编写</p><p>2.熟悉手机app的开发</p></td>
</tr>
</table>
</body>
</html>🥽实现效果：
🎯伪类选择器应用：
这段代码创建了一个带有样式的表格，用于展示图书的信息，包括图书名称、出版社、出版日期和价格。表格使用不同的颜色来区分奇偶行，并在鼠标悬停时应用另一种背景颜色。
🥏涉及知识点：
<!DOCTYPE html>: 这是文档类型声明，指定了文档使用的HTML版本。
<html lang="en">: 这是HTML元素的开始标签，lang属性指定了文档的语言为英语。
<head>: 这是头部标签，用于定义文档的头部信息，如标题、样式表等。
<meta charset="UTF-8">: 这是一个元数据标签，指定文档使用的字符编码为UTF-8，确保页面能正确显示中文等非ASCII字符。
<meta http-equiv="X-UA-Compatible" content="IE=edge">: 这个元数据标签定义了文档在使用IE浏览器时的兼容性设置。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 这个元数据标签定义了文档在移动设备上的视口（viewport）设置。
<title>Document</title>: 这是文档的标题，将显示在浏览器的标题栏或标签页上。
<style>: 这是样式标签，用于定义文档的样式信息。
table{}: 这是CSS选择器，指定了table元素的样式。
td,th{}: 这也是CSS选择器，指定了td和th元素（表格单元格）的样式。
tbody tr:nth-child(2n+1){}和tbody tr:nth-child(2n){}: 这些是CSS选择器，用于指定表格中奇数行和偶数行的样式。
<body>: 这是文档的主体部分，包含了实际显示在浏览器中的内容。
<table>: 这是表格元素的开始标签，定义了一个表格。
<thead>和</thead>: 这是表格头部的开始和结束标签，用于定义表格的列标题。
<th>: 这是表格头部单元格的开始标签，定义了一个列标题。
<tbody>: 这是表格主体的开始标签，用于定义表格的数据部分。
<tr>: 这是表格行的开始标签，定义了一个表格行。
<td>: 这是表格数据单元格的开始标签，定义了一个单元格。
</body>: 这是文档的结束标签，表示文档的主体部分结束。
</html>: 这是HTML元素的结束标签，表示整个HTML文档的结束。
💻代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 700px;
margin: 10px auto;
background-color: #cccccc;
border: 1px #000 solid;
border-collapse: collapse;
text-align: center;
}
td,th{
font-size: 14px;
font-weight: bold;
line-height: 20px;
text-align: center;
margin: 0 auto;
padding: 10px;
}
th{
background-color: #cccccc;
color: red ;
}
tbody tr:nth-child(2n+1){
background-color: #ffc;
color: #6600ff;
}
tbody tr:nth-child(2n){
background-color: #cf9;
color: #0000ff;
}
tbody tr:hover{
background-color: #33ffff;
}
</style>
</head>
<body>
<table>
<thead><tr>
<th>图书</th>
<th>出版社</th>
<th>出版日期</th>
<th>价格</th>
</tr></thead>
<tbody>
<tr>
<td>c++程序设计</td>
<td>清华大学出版社</td>
<td>2016.1</td>
<td>35</td>
</tr>
<tr>
<td>Java程序设计</td>
<td>人民邮电出版社</td>
<td>2017.6</td>
<td>43</td>
</tr>
<tr>
<td>HTML5+CSS3网页开发实战教程</td>
<td>清华大学出版社</td>
<td>2018.9</td>
<td>39</td>
</tr>
<tr>
<td>ASP.NET应用开发</td>
<td>机械工业出版社</td>
<td>2015.10</td>
<td>54</td>
</tr>
<tr>
<td>c++程序设计</td>
<td>清华大学出版社</td>
<td>2016.1</td>
<td>35</td>
</tr>
<tr>
<td>Java程序设计</td>
<td>人民邮电出版社</td>
<td>2017.6</td>
<td>43</td>
</tr>
<tr>
<td>HTML5+CSS3网页开发实战教程</td>
<td>清华大学出版社</td>
<td>2018.9</td>
<td>39</td>
</tr>
<tr>
<td>ASP.NET应用开发</td>
<td>机械工业出版社</td>
<td>2015.10</td>
<td>54</td>
</tr>
<tr>
<td>c++程序设计</td>
<td>清华大学出版社</td>
<td>2016.1</td>
<td>35</td>
</tr>
<tr>
<td>Java程序设计</td>
<td>人民邮电出版社</td>
<td>2017.6</td>
<td>43</td>
</tr>
<tr>
<td>HTML5+CSS3网页开发实战教程</td>
<td>清华大学出版社</td>
<td>2018.9</td>
<td>39</td>
</tr>
<tr>
<td>ASP.NET应用开发</td>
<td>机械工业出版社</td>
<td>2015.10</td>
<td>54</td>
</tr>
<tr>
<td>c++程序设计</td>
<td>清华大学出版社</td>
<td>2016.1</td>
<td>35</td>
</tr>
<tr>
<td>Java程序设计</td>
<td>人民邮电出版社</td>
<td>2017.6</td>
<td>43</td>
</tr>
<tr>
<td>HTML5+CSS3网页开发实战教程</td>
<td>清华大学出版社</td>
<td>2018.9</td>
<td>39</td>
</tr>
<tr>
<td>ASP.NET应用开发</td>
<td>机械工业出版社</td>
<td>2015.10</td>
<td>54</td>
</tr>
</body>
</html>🥽实现效果：
soogif
