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

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

2024-05-12 17:05:13 前端知识 前端哥 822 527 我要收藏

🎃个人专栏:

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8329.html
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!