2021-08-27_html表格盒子css做天气预报

作者：小舞很执着 | 2024-07-31 02:33:40

踩

html表格盒子css做天气预报

一个值	上下左右
2	左上右下、右上左上（正对角线，反对角线）
3	左上、右上左下、右下（%）
4	左上、右上、右下、左下（从左上开始顺时针）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用表格和css创建天气预报</title>
    <link rel="stylesheet" type="text/css" href="weather.css"/>

</head>
<body>
<table>
    <caption><h2>天气预报</h2></caption>
    <tr class="no_border"><!--设置头部日历条-->
        <td colspan="5" class="title_td"><h3>2021/8/27 周五 农历七月二十</h3></td>
    </tr>

   <tr class="no_border"><!--插入当天云图-->
       <td rowspan="3" class="active_img"><img src="u=3253445598,1410772172&fm=26&fmt=auto&gp=0.webp.jpg">
       </td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
   </tr>

    <tr><!--设置星期数-->
        <td>
            周六
        </td>
        <td>
            周日
        </td>
        <td>
            周一
        </td>
        <td>
            周二
        </td>
    </tr>

    <tr><!--设置日期-->
        <td>8/29</td>
        <td>8/30</td>
        <td>8/31</td>
        <td>9/1</td>
    </tr>
    <tr class="weather"><!--设置当天气温以及插入后续几天的天气图-->
        <td class="active_tem no_border">33℃</td>
        <td><img src="u=3253445598,1410772172&fm=26&fmt=auto&gp=0.webp.jpg" ></td>
        <td><img src="u=3253445598,1410772172&fm=26&fmt=auto&gp=0.webp.jpg" ></td>
        <td><img src="u=3253445598,1410772172&fm=26&fmt=auto&gp=0.webp.jpg" ></td>
        <td><img src="u=3253445598,1410772172&fm=26&fmt=auto&gp=0.webp.jpg" ></td>
    </tr>
<!--分别设置温度、天气状况、风向、空气质量-->
    <tr><td class="no_border">30℃~35℃</td> <td>31℃~36℃</td> <td>30℃~35℃</td> <td>33℃~35℃</td> <td>33℃~35℃</td>
</tr>
    <tr><td class="no_border">晴朗</td> <td>晴朗</td> <td>晴朗</td> <td>晴朗</td> <td>晴朗</td></tr>
    <tr><td class="no_border">微风</td> <td>微风</td> <td>微风</td> <td>微风</td> <td>微风</td></tr>
    <tr><td class="no_border"><p class="active">优</p></td> <td><p>优</p></td> <td><p>优</p></td> <td><p>优</p></td> <td><p>优</p></td></tr>

</table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

css代码

table{
    width: 800px;
    border-spacing: 0;/*表格间距*/
    padding-bottom: 20px;
    background: #369;
    margin:0 auto;

}

td{
    color:#fff;
    font-size: 12pt;
    padding:10px;
    text-align: center;
    border-left: 1px solid #fff;
}

.no_border td,td .no_border{
    border-left:none;
}

.title_td{
    text-align: left;
    padding-left: 20px;
    font-size: 16px;

}

.active_img img{
    width:100px;
    height:100px;
}

.active_tem{
    font-size: 30px;
    font-weight: bold;
}

.weather{
    height: 130px;
}

.weather img{
    width: 60px;
    height:60px;
}

p{
    width:60px;
    margin:12px auto;
    border-radius:7px;
    background: #6C6;
}

.active{
    background-color: #339933;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

效果图

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】

2021-08-27_html表格盒子css做天气预报

目录

需要注意的点

使用表格和css制作天气预报页面