天气预报

最新推荐文章于 2024-10-17 18:29:30 发布

森滴滴滴滴滴滴

最新推荐文章于 2024-10-17 18:29:30 发布

阅读量238

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46439490/article/details/105714774

版权

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <style>
            body
            {
            margin:0;
            padding:0;
            }
            .div{
            display: flex;
            justify-content: space-between;
            margin:0;
            padding:0;
            .box1{
            width: 180px;
            height:120px;
            background-color: #ffcb0f;
            border:3px solid #c2c2c2;
            border-radius:5p;
            margin:260px 0px 0px 10px;
            text-align:center;
            }
            .box2{
            width: 180px;
            height:120px;
            background-color: #d8b123;
            border: 3px solid #c2c2c2;
            border-radius:5px ;
            margin: 260px 0px 0px 30px;
            text-align:center;
            }
            .box3{
            width:180px;
            height:120px;
            background-color: #a1532b;
            border: 3px solid #c2c2c2;
            border-radius:5px ;
            margin: 260px 0px 0px 30px;
            text-align:center;
            }
            .box4{
            width:200px;
            height:120px;
            background-color:#53620a;
            border: 3px solid #c2c2c2;
            border-radius:5px ;
            margin: 260px 0px 0px 30px;
            text-align:center;
            }
            .box5{
            width: 220px;
            height:120px;
            background-color: #646464;
            border: 3px solid #c2c2c2;
            border-radius:5px ;
            margin: 260px 0px 0px 30px;
            text-align:center;
            }
            .border-radius{
            width: 50px;
            height: 50px;
            border: 10px solid white;
            border-radius: 90px;
            }
            img{
            margin:160px 0px 0px -170px;
            width: 150px;
            height: 150px;
            border: 5px solid #c2c2c2;
            border-radius:90px ;
            float: left;
            }
             .word{
            color: white;
            font-size: 20px;
            margin: 70px 27px 30px;
        }
    </style>
</head>
<body bgcolor="green">
<div class="div">
    <div class="div">
        <div class="box1">
            <p class="word">周一晴</p>
        </div>
            <img src="1.png" > 
           
        <div class="box2">
            <p class="word">周二晴转多云</p>
        </div>
        <img src="2.png" >
        
        <div class="box3">
            <p class="word">周三多云转雨</p>
        </div>
        <img src="3.png" >
        
        <div class="box4">
            <p class="word">周四小雨转大雨</p>
        </div>
        <img src="4.png" >
        
      <div class="box5">
            <p class="word">周五大雨转雷阵雨</p>
        </div>
        <img src="5.jpg" >
    </div>
</body>
</html>