【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用

已于 2023-12-05 18:44:18 修改
阅读量1.2k 收藏 11
点赞数 6
分类专栏： 基于HTML5的网页设计及应用 文章标签： html5 前端 html
于 2023-11-02 15:24:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shsjssnn/article/details/134182193
版权

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_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博客

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

目录

🎯个人简历表格：

🥏涉及知识点：

💻代码展示：

 🥽实现效果：

 🎯伪类选择器应用：

🥏涉及知识点：

💻代码展示：

 🥽实现效果：

🎯个人简历表格：

🥏涉及知识点：

  1. <table>：定义一个表格，用于展示个人简历的各个信息。
  2. <caption>：表格标题，显示为"个人简历"。
  3. <tr>：表示表格中的一行。
  4. <td>：表示表格中的一个单元格。
  5. class="tdbgc"：给指定的单元格设置一个名为"tdbgc"的类，用于设置背景色为灰色。
  6. rowspan="5"：用于合并单元格，将图片单元格跨越5行。
  7. <img>：插入一个图片，src属性指定图片的路径。
  8. <style>：定义了表格的样式，如宽度、边框、字体等。
  9. 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>

 🥽实现效果：

 🎯伪类选择器应用：

        这段代码创建了一个带有样式的表格，用于展示图书的信息，包括图书名称、出版社、出版日期和价格。表格使用不同的颜色来区分奇偶行，并在鼠标悬停时应用另一种背景颜色。

🥏涉及知识点：

  1. <!DOCTYPE html>: 这是文档类型声明，指定了文档使用的HTML版本。

  2. <html lang="en">: 这是HTML元素的开始标签，lang属性指定了文档的语言为英语。

  3. <head>: 这是头部标签，用于定义文档的头部信息，如标题、样式表等。

  4. <meta charset="UTF-8">: 这是一个元数据标签，指定文档使用的字符编码为UTF-8，确保页面能正确显示中文等非ASCII字符。

  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">: 这个元数据标签定义了文档在使用IE浏览器时的兼容性设置。

  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">: 这个元数据标签定义了文档在移动设备上的视口（viewport）设置。

  7. <title>Document</title>: 这是文档的标题，将显示在浏览器的标题栏或标签页上。

  8. <style>: 这是样式标签，用于定义文档的样式信息。

  9. table{}: 这是CSS选择器，指定了table元素的样式。

  10. td,th{}: 这也是CSS选择器，指定了td和th元素（表格单元格）的样式。

  11. tbody tr:nth-child(2n+1){}和tbody tr:nth-child(2n){}: 这些是CSS选择器，用于指定表格中奇数行和偶数行的样式。

  12. <body>: 这是文档的主体部分，包含了实际显示在浏览器中的内容。

  13. <table>: 这是表格元素的开始标签，定义了一个表格。

  14. <thead>和</thead>: 这是表格头部的开始和结束标签，用于定义表格的列标题。

  15. <th>: 这是表格头部单元格的开始标签，定义了一个列标题。

  16. <tbody>: 这是表格主体的开始标签，用于定义表格的数据部分。

  17. <tr>: 这是表格行的开始标签，定义了一个表格行。

  18. <td>: 这是表格数据单元格的开始标签，定义了一个单元格。

  19. </body>: 这是文档的结束标签，表示文档的主体部分结束。

  20. </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

Y小夜
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
单片机原理及应用——基于Proteus和Keil C
03-24
单片机原理及应用——基于Proteus和Keil C 一个简易流水灯 LED控制 a.LED单灯闪烁; b.LED双灯交替闪烁; c.LED多灯流水灯;
个人简历HTML页面
10-13
一个简单的HTML个人简介网页，在第十七行可以修改背景图片的路径，请按自己的实际情况修改即可，否则将无背景图案。不懂代码请不要随便修改，只需要修改其中的文字即可。会的勿喷。谢谢
HTML5制作信息登记表
码云仓库地址：https://gitee.com/lance-gyq
12-04 1万+
# 制作信息登记表# 样式需求分析: 一、 通过最外层的大盒子对页面进行整体控制，设置宽高、背景图片及相对定位。 二、 通过标记对表单进行整体控制，对其设置宽高、边距、边框样式及绝对定位。 三、 通过标记控制标题的文本样式，对其设置对齐、外边距样式。 四、 通过标记控制每一行的学员信息模块，对其设置外边距样式。 五、 通过标记控制提示信息，将其转为行内块元素，对其设置宽度、又内边距及右对齐。 六、 通过标记控制输入框的宽高、内边距和边宽样式。 成品样式主要代码： 效果图： 这...
利用html+css制作个人简历
WeiComp
04-02 1万+
使用html和css，制作一份个人简历（内容比较基础，上手容易）
HTML-注册登录信息表
最新发布
Kevin7_35Durant的博客
04-29 215
【代码】HTML-注册登录信息表。
html制作好看的个人简历(附源码)
xcLeigh
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
用html制作一个简历
QwwwQxx的博客
03-20 7728
【代码】用html制作一个简历。
html制作个人简历
m0_64242574的博客
05-18 2万+
前几天我为大家介绍了些html的标签，利用这些标签咱们可以简单制作个简历，来巩固知识。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人简历</title> </head> <body background="01bb62571600ba32f8758c9b79b318.jpg@2o.jpg">
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
BASK2312的博客
05-19 1万+
动态的朦胧天空背景图，可以配置个人职业技能，大图标，姓名，年龄，性别，手机号，邮箱，qq号，居住地，户籍，学历，学校，专业等信息，也可以扩展新的。动态的朦胧天空背景图，可以配置自己的图标，个人名言，名字，职称，邮箱，手机号，工作地址等信息，也可以扩展新的。动态的科技线路背景图，可以配置个人工作过的公司，工作的时间，负责的项目，开发工具等信息，也可以扩展新的。动态的科技线路背景图，可以配置个人教育的学校，时间，几学到的东西等信息，也可以扩展新的。出来，个人的掌握的工具，及熟练度等信息，也可以扩展新的。
标准c语言程序设计和应用——华中科技大学出版社第三章课后题.pdf
06-27
标准c语言程序设计和应用——华中科技大学出版社第三章课后题.pdf标准c语言程序设计和应用——华中科技大学出版社第三章课后题.pdf标准c语言程序设计和应用——华中科技大学出版社第三章课后题.pdf标准c语言程序设计...
大数据可视化工具设计及应用——基于电商行业.pdf
07-04
大数据可视化工具设计及应用——基于电商行业.pdf
网页设计大作业——旅游网站，html、css实现.zip
10-22
网页设计大作业——旅游网站，html、css实现.zip
html代码做的个人简历
09-12
HTML做的个人简历，非常好看，很适合个人主页 ，初学前端做的
Html5+Css3网页设计基础 第三版 源代码
11-20
HTML5与 CSS3网页设计基础 第3版 作者：Terry Felke-Morris著 源代码分享
java毕业设计——基于java出租车计价器设计与实现(论文+答辩PPT+源代码+数据库).zip
05-29
java毕业设计——基于java出租车计价器设计与实现(论文+答辩PPT+源代码+数据库).zip java毕业设计——基于java出租车计价器设计与实现(论文+答辩PPT+源代码+数据库).zip java毕业设计——基于java出租车计价器设计与...
html创建简历
weixin_44375151的博客
06-21 3134
html创建简历
网页设计——简单个人简历制作
m0_62627288的博客
07-04 1524
2.创建表格（表格的边框为1.5像素，边框的颜色为默认的黑色）填充简历的具体内容，简历中要求插入一张个人照片，其中“教育背景”部分，在填充内容时要求用到。1.表格的标题是“个人简历” 采用一级标题文字（注意这里需要用到的HTML标记和）；作业要求：创建一个HTML文档，完成个人简历的制作，具体形式如图所示。注：代码中图片需要根据自己设计的具体更改；
纯HTML个人简历模板代码
热门推荐
JackieDYH的博客
08-23 15万+
纯HTML个人简历模板代码-html初级入门案例-附带源码
html：运用表单表格制作简易个人简历
astar2022的博客
07-14 1785
谢谢大家观看我们下期再见！
绘制相关系数表
05-30
要绘制相关系数表，可以使用Python中的pandas和seaborn库。以下是一个简单的例子： ```python import pandas as pd import seaborn as sns # 读取数据 data = pd.read_csv('data.csv') # 计算相关系数 corr = data.corr() # 绘制相关系数表 sns.heatmap(corr, cmap='coolwarm', annot=True) sns.set(font_scale=1.5) plt.title('Correlation Table') plt.show() ``` 其中，`data.csv`是包含数据的CSV文件。该代码会绘制出相关系数表，热力图中颜色越深表示相关系数的绝对值越大，红色表示正相关，蓝色表示负相关，数字表示相关系数的值。`cmap`参数可以设置颜色映射，`annot`参数可以控制是否在热力图上显示数字。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Y小夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值