HTML+CSS之表格(15个案例+代码+效果图+素材)

news2024/11/25 4:57:23

目录

1.table标签的border属性

案例:制作一个带边框的表格

1.代码

2.效果

2.table标签的cellspacing属性

案例:制作一个带边距的表格

1.代码

2.效果

3.table标签的cellpadding属性

1.代码

2.效果

4.table标签的width和height属性

案例:指定宽高的表格

1.代码

2.效果

5.table标签的align属性

案例:表格居中

1.代码

2.效果

6.table标签的bgcolor属性

案例:为table添加背景色

1.代码

2.效果

7.table标签的background的属性

案例:为表格添加背景图

1.代码

2.效果

8.tr标签的height属性

案例:设置tr行高为50

1.代码

2.效果

9.tr标签的align属性

案例:使tr标签内容居中

1.代码

2.效果

10.tr标签的valign属性

案例:使表格内容垂居中

1.代码

2.效果

11.tr标签的background的属性

案例：tr标签添加滤镜

1.代码

2.效果

12.tr标签的bgcolor属性

案例:使用bgcolor为tr添加背景色

1.代码

2.效果

13.td标签的width和height属性

案例：鼠标悬浮扩大td宽高

1.代码

2.效果

14.td标签的align属性

案例:控制td文本居中

1.代码

2.效果

15.表结构

案例:编写一个简单的网页

1.代码

2.效果

附录:

1.table标签的border属性

        border 属性 - 定义表格边框的宽度。例如：<table border="1">

案例:制作一个带边框的表格

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个带边框的表格</title>
    <style>
        table {
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;
        }

        tr{
            height: 50px;
            width: 100%;
            border: solid 1px #000;
            background-color: #6e9696a1;
        }
        tr:hover{
            background-color: #ff060670;
        }
        td:hover{
            background-color: chocolate;
            color: #0eebb3dc;
        }
    </style>

</head>

<body>
    <table border="1px" width="300px" height="300px">
        <tr>
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr>
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr>
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr>
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>

</body>

</html>

2.效果

可以看到我们添加了为表格添加蓝色的边框

2.table标签的cellspacing属性

        cellspacing 属性 - 指定单元格之间的间距。例如：<table cellspacing="20px">

案例:制作一个带边距的表格

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个带边框的表格</title>
    <style>
        table {
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;

             
        }

        tr{
            height: 50px;
            width: 100%;
            border: solid 1px #000;
            background-color: #6e9696a1;
        }
        tr:hover{
            background-color: #ff060670;
        }
        td:hover{
            background-color: chocolate;
            color: #0eebb3dc;
        }
    </style>

</head>

<body>
    <table border="1px" width="300px" height="300px" cellspacing="20px">
        <tr>
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr>
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr>
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr>
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>

</body>

</html>

2.效果

3.table标签的cellpadding属性

        cellpadding 属性 - 指定内容与单元格边框之间的距离。例如：<table cellpadding="20px">

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制内边距到内容的距离</title>
    <style>
        table {
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;

             
        }

        tr{
            height: 50px;
            width: 100%;
            border: solid 1px #000;
            background-color: #6e9696a1;
        }
        tr:hover{
            background-color: #ff060670;
        }
        td:hover{
            background-color: chocolate;
            color: #0eebb3dc;
        }
    </style>

</head>

<body>
    <table border="1px" width="300px" height="300px" cellpadding="20px" >
        <tr>
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr>
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr>
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr>
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>

</body>

</html>

2.效果

可以看到内容到上下边框都有了相同的内边距

4.table标签的width和height属性

        width 和 height 属性 - 分别指定表格的宽度和高度。可以使用像素或百分比。例如：<table width="100%" height="200px">

案例:指定宽高的表格

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指定宽高的表格</title>
    <style>
        table {
            /**
             * 表格边框
             */
             border: solid 5px #c4e2e9;

             /***
             *指定表格的宽度和高度
             */
             width: 800px;
             height: 600px;
             
        }

        tr{
            height: 50px;
            width: 100%;
            border: solid 1px #000;
            background-color: #03f7f7fb;
        }
        tr:hover{
            background-color: #00fd2a;
        }
        td:hover{
            background-color: rgb(116, 235, 215);
            color: #94ecd6dc;
        }
    </style>

</head>

<body>
    <table border="1px" width="300px" height="300px" >
        <tr>
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr>
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr>
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr>
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>

</body>

</html>

2.效果

5.table标签的align属性

        align 属性 - 控制表格在页面中的水平对齐方式（左、中、右）。例如：<table align="center">。不过，在现代网页设计中更推荐使用CSS来设置对齐方式

案例:表格居中

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指定宽高的表格</title>
    <style>
        table {
            /**
             * 表格边框
             */
             border: solid 5px #c4e2e9;

             /***
             *指定表格的宽度和高度
             */
             width: 800px;
             height: 600px;
             
             
        }

        tr{
            height: 50px;
            width: 100%;
            border: solid 1px #000;
            background-color: #5eee7dfb;
        }
        tr:hover{
            background-color: #c1e7c7;
        }
        td:hover{
            background-color: rgb(116, 235, 215);
            color: #fa1100dc;
        }
    </style>

</head>

<body>
    <table border="1px" width="300px" height="300px" align="center" >
        <tr>
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr>
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr>
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr>
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>

</body>

</html>

2.效果

6.table标签的bgcolor属性

        bgcolor 属性 - 设置表格背景颜色。例如：<table bgcolor="#FFCC99">。同样地，用CSS来设置背景色是更好的做法

案例:为table添加背景色

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;

             /**
              * 
              */
             
        }

        td{
            border: 3px double #000;
        }
    </style>
</head>
<body>
    <!-- 添加背景色 -->
    <table border="1px" width="300px" height="300px"  bgcolor="orange">
        <tr>
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr>
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr>
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr>
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>
</body>
</html>

2.效果

7.table标签的background的属性

        background 属性 - 为表格设置背景图片。例如：<table background="image.jpg">。推荐使用CSS的background-image属性.

案例:为表格添加背景图

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;

             /**
              * 为表格添加背景色
              */
              background-image: url("./aImg.png");
              background-size: cover;
              color: chartreuse;
             
        }

        td{
            border: 3px double #000;
        }
    </style>
</head>
<body>
    <!-- 添加背景色 -->
    <table border="1px" width="512px" height="512px"  >
        <tr>
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr>
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr>
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr>
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>
</body>
</html>

2.效果

8.tr标签的height属性

        height 属性 (对于 <tr>) - 设置行的高度。例如：<tr height="50">。

案例:设置tr行高为50

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;

             /**
              * 为表格添加背景色
              */
              background-image: url("./aImg.png");
              background-size: cover;
              color: chartreuse;
             
        }

        td{
            border: 3px double #000;
        }

       
    </style>
</head>
<body>
    <!-- 添加背景色 -->
    <table border="1px" width="512px" height="512px"  >
        <!-- 设置行高为50 -->
        <tr height="50">
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr>
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr>
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr>
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>
</body>
</html>

2.效果

9.tr标签的align属性

        align 属性 (对于 <tr>) - 控制该行内所有单元格的内容水平对齐方式。例如：<tr align="right">。

案例:使tr标签内容居中

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;

             /**
              * 为表格添加背景色
              */
              background-image: url("./aImg.png");
              background-size: cover;
              color: chartreuse;
             
        }

        td{
            border: 3px double #000;
        }
    </style>
</head>
<body>
    <!-- 添加背景色 -->

    <table border="1px" width="512px"  >
        <tr align="center" >
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr align="center" >
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr align="center" >
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr align="center" >
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr align="center" >
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>
</body>
</html>

2.效果

可以看到行内的元素都居中了,包括文字的显示

10.tr标签的valign属性

        valign 属性 (对于 <tr>) - 设置行内所有单元格内容的垂直对齐方式（顶部、中部、底部）。例如：<tr valign="middle">。

案例:使表格内容垂居中

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;

             /**
              * 为表格添加背景色
              */
              background-image: url("./aImg.png");
              background-size: cover;
              color: chartreuse;
             
        }

        td{
            border: 3px double #000;
        }
        tr{
            width: 200px;
            height: 80px;
        }
    </style>
</head>
<body>
    <!-- 添加背景色 -->

    <table border="1px" width="512px"  >
        <tr valign="middle" >
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr valign="middle" >
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr valign="middle" >
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr valign="middle" >
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr valign="middle" >
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>
</body>
</html>

2.效果

11.tr标签的background的属性

        background 属性 (对于 <tr>) - 设置行的背景图像。例如：<tr background="row_bg.gif">。

案例：tr标签添加滤镜

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;

             /**
              * 为表格添加背景色
              */
              background-image: url("./aImg.png");
              background-size: cover;
              color: chartreuse;
             
        }

        td{
            border: 3px double #9901ff;
        }
        tr{
            width: 200px;
            height: 80px;
            background-color: rgba(236, 129, 129, 0.3);
        }
    </style>
</head>
<body>
    <!-- 添加背景色 -->

    <table border="1px" width="512px"  >
        <tr valign="middle" >
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr valign="middle" >
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr valign="middle" >
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr valign="middle" >
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr valign="middle" >
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>
</body>
</html>

2.效果

12.tr标签的bgcolor属性

        bgcolor 属性 (对于 <tr>) - 设置整行的背景颜色。例如：<tr bgcolor="#FFFFCC">。

案例:使用bgcolor为tr添加背景色

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            /**
             * 表格边框
             */
             border: solid 5px #3f4a4d;

             /**
              * 为表格添加背景色
              */
              background-image: url("./aImg.png");
              background-size: cover;
              color: chartreuse;
             
        }

        td{
            border: 3px double #9901ff;
        }
        tr{
            width: 200px;
            height: 80px;
            
        }
    </style>
</head>
<body>
    <!-- 添加背景色 -->

    <table border="1px" width="512px"  >
        <tr valign="middle" bgcolor="#3f4a4d" >
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr valign="middle" >
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr valign="middle" >
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr valign="middle" >
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr valign="middle" bgcolor="#3f4a4d" >
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>
</body>
</html>

2.效果

13.td标签的width和height属性

        width 和 height 属性 (对于 <td>) - 分别定义单元格的宽度和高度。例如：<td width="100" height="50">。

案例：鼠标悬浮扩大td宽高

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            /**
             * 表格边框
             */
             border: solid 5px #3f4a4d;

             /**
              * 为表格添加背景色
              */
              background-image: url("./aImg.png");
              background-size: cover;
              color: chartreuse;
             
        }

        td{
            border: 3px double #9901ff;
        }
        tr{
            width: 200px;
            height: 80px;
            
        }
        td:hover{
            background: rgba(243, 207, 0, 0.151);
            width: 200px;
            height: 80px;
            color: #9901ff;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 添加背景色 -->

    <table border="1px" width="512px"  >
        <tr valign="middle" bgcolor="#3f4a4d" >
            <td>
                科目
            </td>
            <td>
                教师
            </td>
            <td>
                年龄
            </td>
        </tr>
        <tr valign="middle" >
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr valign="middle" >
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr valign="middle" >
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr valign="middle" bgcolor="#3f4a4d" >
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>
</body>
</html>

2.效果

14.td标签的align属性

        align 属性 (对于 <td>) - 控制单元格内文本的水平对齐方式。例如：<td align="left">。

案例:控制td文本居中

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制内边距到内容的距离</title>
    <style>
        table {
            /**
             * 表格边框
             */
             border: solid 5px #00ccff;

             
        }

        tr{
            height: 50px;
            width: 100%;
            border: solid 1px #000;
            background-color: #6e9696a1;
        }
        tr:hover{
            background-color: #ff060670;
        }
        td:hover{
            background-color: chocolate;
            color: #0eebb3dc;
        }
    </style>

</head>

<body>
    <table border="1px" width="300px" height="300px" cellpadding="20px" >
        <tr>
            <!-- 标题居中 -->
            <td align="center">
                科目
            </td>
            <td align="center">
                教师
            </td>
            <td align="center">
                年龄
            </td>
        </tr>
        <tr>
            <td>
                java
            </td>
            <td>
                张三
            </td>
            <td>
                18
            </td>
        </tr>

        <tr>
            <td>
                HTML
            </td>
            <td>
                李四
            </td>
            <td>
                22
            </td>
        </tr>


        <tr>
            <td>
                汇编语言
            </td>
            <td>
                惜己
            </td>
            <td>
                23
            </td>
        </tr>

        <tr>
            <td>
                JavaScript
            </td>
            <td>
                小久
            </td>
            <td>
                24
            </td>
        </tr>
    </table>

</body>

</html>

2.效果

可以看到标题居中了

15.表结构

  • caption标签定义表名
  • thead定义表格的头部
  • tfoot定义页脚
  • tbody定义表格的主题部分

案例:编写一个简单的网页

注:这个是动态的简单的网页

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            /* 设置表格宽度 */
            border-collapse: collapse;
            /* 合并边框 */
            text-align: center;
            /* 居中文本 */
        }

        th,
        td {
            padding: 10px;
            /* 内边距 */
        }

        .theadTdStyle {
            background-color: #00ccff;
            color: #fff;
            width: 25%;
            height: 50px;
        }

        img {
            display: block;
            /* 居中图片 */
            margin: auto;
            /* 居中图片 */
            border-radius: 50%;
        }

        .myImgStyle {

            border: 2px solid #f8f403fd;

        }

        .myImgStyle:hover {
            background-color: darkorange;
        }

        .myDivStyle {
            width: 100%;
            height: 300px;
            background-color: linear-gradient(to right, #85e7eb, #e71414);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .myBarStyle:hover {
            background-color: #da2626;
            width: 512px;
            height: 512px;
            border-radius: 0px;
        }
        .myTdStyle{
            width: 100%;
            height: 100px;
            background-color: #f57f7f;
        }
        /**
        *添加阴影效果
        */
        .myShadowStyle{
            box-shadow: 5px 5px  10px rgba(29, 112, 196, 0.5);
        }
        .myShadowStyleTwo{
            box-shadow: 5px 5px  10px rgba(72, 253, 1, 0.911);
        }

        /**
        *添加简单的动画效果
        */
        .myEasyAnimation{
            animation: myAnimation 5s linear 2s infinite alternate;
        }
        @keyframes myAnimation{
            0%{
                transform: scale(0.5);
            }
            50%{
                transform: scale(1);
            }
            100%{
                transform: scale(1.5);
            }
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr> <!-- 使用 tr 包含 th -->
                <th class="theadTdStyle myShadowStyle">网站首页</th>
                <th class="theadTdStyle myShadowStyle">登录页面</th>
                <th class="theadTdStyle myShadowStyle">信息页</th>
                <th class="theadTdStyle myShadowStyle">关于我们</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="4">
                    <div class="myImgStyle myDivStyle myShadowStyleTwo">

                        <img src="./aImg.png" alt="" class="myBarStyle myShadowStyleTwo"
                            style="background-size: cover;width: 300px;height: 300px;"></img>
                        <img src="./aMouse.png" class="myBarStyle myShadowStyleTwo"
                            style="background-size: cover;width: 300px;height: 300px;"></img>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="myImgStyle myEasyAnimation"><img src="./aImg.png"></td>
                <td class="myImgStyle myEasyAnimation"><img src="./aImg.png"></td>
                <td class="myImgStyle myEasyAnimation"><img src="./aImg.png"></td>
                <td class="myImgStyle myEasyAnimation"><img src="./aImg.png"></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td class="myTdStyle" colspan="4">&copy; 版权惜.己所有</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

2.效果

附录:

所用素材下载

aMouse.png等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2190721.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

BUSHOUND的抓包使用详解

BUSHOUND的抓包使用详解

BUSHOUND是个过滤软件&#xff0c;确切来说是在windows操作系统它的驱动层USB传输的数据。所以这个数据上可能是与USB的总线上的数据是有一点差异的。 先要选择设备的抓包。所以就是在device这个界面底下&#xff0c;我们首先要选择我们要抓的设备。 尝试下键盘设备 电脑键盘…
阅读更多...
COPS论文总结——Lec17

COPS论文总结——Lec17

文章目录 一、简介二、ALPS1.可用性。2.低延迟。3.分区容忍。4.高可扩展性。5.对比CAP 三、COPS的一致性1.一致性的分类2.Causal 一致性&#xff08;1&#xff09;模型抽象&#xff08;2&#xff09;Causal 定义 一、简介 1.论文的标题是‘Don’t Settle for Eventual: Scalab…
阅读更多...
CNN中的平移不变性和平移等变性

CNN中的平移不变性和平移等变性

1. 平移等变性 数学上函数的等变性定义如下&#xff1a; 也就是给定一张图像&#xff0c;平移后卷积的结果与卷积后再平移的结果是相同的 2. 平移不变性 如果某个属性在任何平移下都不会改变&#xff0c;那么它就是平移不变的。考虑上面的图像。 即使像素值发生了位移&#x…
阅读更多...
c++内存申请和释放

c++内存申请和释放

// // Created by 徐昌真 on 2024/10/5. // #include <iostream> using namespace std; int main() {//在堆区申请一块内存int* ptr new int(1314); //申请了一个int类型的内存 用ptr指针指向它 它的值是1314cout << *ptr << endl;//可以通过指针修改它的值…
阅读更多...
【C++差分数组】1589. 所有排列中的最大和|1871

【C++差分数组】1589. 所有排列中的最大和|1871

本文涉及知识点 C差分数组 LeetCode1589. 所有排列中的最大和 有一个整数数组 nums &#xff0c;和一个查询数组 requests &#xff0c;其中 requests[i] [starti, endi] 。第 i 个查询求 nums[starti] nums[starti 1] … nums[endi - 1] nums[endi] 的结果 &#xff…
阅读更多...
华为OD机试 - 基站维护工程师数 - 动态规划（Python/JS/C/C++ 2024 E卷 200分）

华为OD机试 - 基站维护工程师数 - 动态规划（Python/JS/C/C++ 2024 E卷 200分）

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华为OD刷题交流群&#xff0c;…
阅读更多...
GEE问题：筛选指定区域的Sentinel-1影像缺乏VH等波段

GEE问题：筛选指定区域的Sentinel-1影像缺乏VH等波段

目录 问题简介 原始代码 原始代码 问题解析 修改后的代码 问题简介 亲爱的同事们&#xff0c;我正在尝试使用 SAR 图像 - Sentinel-1 来改进使用机器学习的地上生物量建模。我想处理 Sentinel 图像并将它们作为波段插入以增强模型。通过阅读文档&#xff0c;可用的极化&a…
阅读更多...
前端编程艺术（3）---JavaScript

前端编程艺术（3）---JavaScript

目录 1.JavaScript 1.输出 2.变量和数据类型 3.运算符 4.数组 5.函数 6.面向对象 7.ES6面向对象 2.BOM 1.document对象 3.DOM 4.JSON 1.JavaScript JavaScript是一种脚本编程语言&#xff0c;通常用于为网页增加交互性和动态效果。它是一种高级语言&#xff…
阅读更多...
用js和css实现一行一行文字交替显示

用js和css实现一行一行文字交替显示

用js和css实现&#xff0c;效果是&#xff1a;有多行文字&#xff0c;一行一行的交替显示&#xff0c;每隔几秒显示一行&#xff0c;循环显示。 代码如下&#xff0c;保存为html即可看到效果&#xff1a; <!DOCTYPE html> <html lang"en"> <hea…
阅读更多...
心觉：梦想成真的三个核心步骤

心觉：梦想成真的三个核心步骤

Hi&#xff0c;我是心觉&#xff0c;与你一起玩转潜意识、脑波音乐和吸引力法则&#xff0c;轻松掌控自己的人生&#xff01; 挑战每日一省写作190/1000天 梦想成真是每个人的愿望 但是希望你不要把“梦想成真”这四个字当成愿望或许愿&#xff0c;因为它实际上是一个成事的…
阅读更多...
为什么芯片有多个不同的供电电压？

为什么芯片有多个不同的供电电压？

一、为什么芯片有多个不同的供电电压&#xff1f; 优化性能与功耗&#xff1a;芯片的核心部分&#xff08;Core&#xff09;和输入输出部分&#xff08;IO&#xff09;可能采用不同的电压。核心电压通常较低&#xff0c;以减少功耗和发热&#xff0c;提高能效&#xff1b;而IO电…
阅读更多...
如何解决msvcp140.dll丢失，这6个方法可以解决msvcp140.dll丢失

如何解决msvcp140.dll丢失，这6个方法可以解决msvcp140.dll丢失

在日常电脑使用中&#xff0c;可能会遇到一些常见问题&#xff0c;比如msvcp140.dll丢失或损坏。这个问题会导致程序无法正常运行&#xff0c;对我们的生活、工作造成困扰。本文将介绍6种解决msvcp140.dll丢失的方法&#xff0c;让大家能快速解决这个问题。 一&#xff0c;msvc…
阅读更多...
25游卡（服务器）面试经验 游卡最常见面试问题总结

25游卡（服务器）面试经验 游卡最常见面试问题总结

目录 【面试经历】 问题+详细答案 面试流程 面试攻略 【面试经历】 秋招目前面了十多家，第一家不开摄像头且表示麦不好要求找个耳机的。贴面经（纯八股） 1.HTTP与HTTPS 2.MTU如何设置，过大过小的后果 3.DNS过程 4.如何创建进程/线程，孤儿进程 5.java从文件到运行的过程…
阅读更多...
大厂笔试现已经禁用本地IDE怎么看

大厂笔试现已经禁用本地IDE怎么看

如果我说本来面试做题这种事情就是反人类你相信吗&#xff1f; 这个罪恶的源头就是 Google&#xff0c;说是为了选择高素质的计算机编程水平的人才&#xff0c;然后把面试就变成了考试&#xff0c;最大的受益者当然是印度人了。 当把一个考察过程变成标准化的考试过程&#x…
阅读更多...
每日一道算法题——二分查找

每日一道算法题——二分查找

文章目录 开口闭口区分:1、问题2、示例3、解决方法&#xff08;1&#xff09;注意点&#xff08;2&#xff09;代码 开口闭口区分: 开口闭口区分: [1,2,3] 左闭右闭[1,2,3) 左闭右开(1,2,3] 左开右闭 开口如数组(1,2,3)不包含当前数据&#xff0c;也就是指只有2&#xff0c;闭口…
阅读更多...
各省-科技创新、研发强度数据（2007-2022年）

各省-科技创新、研发强度数据（2007-2022年）

研发强度通常指研究与试验发展&#xff08;R&D&#xff09;经费与国内生产总值&#xff08;GDP&#xff09;之比&#xff0c;是衡量一个国家或地区科技活动强度的重要指标。高研发强度往往意味着更强的科技创新能力和更快的技术进步速度。 从地区分布来看&#xff0c;研发…
阅读更多...
什么是 HTTP 请求中的 preflight 类型请求

什么是 HTTP 请求中的 preflight 类型请求

在浏览器的 HTTP 请求中&#xff0c;当我们使用 fetch API 或者 XMLHttpRequest 来进行跨域请求时&#xff0c;浏览器有时会发送一种称为 Preflight 的请求。这种请求是浏览器在实际发送跨域请求前&#xff0c;先与目标服务器进行的一次 “探测” 请求&#xff0c;以确认服务器…
阅读更多...
java基础_异常总结详解

java基础_异常总结详解

1 列举一些列举常见的运行时异常 运行时异常都是 RuntimeException 子类异常 NullPointerException - 空指针异常 ClassCastException - 类转换异常 IndexOutOfBoundsException - 下标越界异常 ArithmeticException - 计算异常 IllegalArgumentException - 非法参数异常 Numb…
阅读更多...
C - Separated Lunch

C - Separated Lunch

题目链接: C - Separated Lunch (atcoder.jp) 题目描述: 大致意思是&#xff1a;有n个人&#xff0c;让你把他们分为两个组&#xff0c;然后分完后的这两个组的最大值最小为多少&#xff1f; 数据范围&#xff1a; 样例输入&#xff1a; 5 2 3 5 10 12 样例输出&#xff1a;…
阅读更多...
二分查找算法——在排序数组中查找元素的第一个和最后一个位置

二分查找算法——在排序数组中查找元素的第一个和最后一个位置

1.题目解析 题目来源&#xff1a;在排序数组中查找元素的第一个和最后一个位置——力扣 测试用例 2.算法原理 查找左端点 此时根据二段性&#xff0c;需要将数组分为大于target与小于target两部分&#xff0c;然后取出中点位置判断此时中点位置的值与target的大小关系&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023