html,css实现静态小时候的图——tree

最新推荐文章于 2023-05-29 10:36:43 发布

pumpkin_truck

最新推荐文章于 2023-05-29 10:36:43 发布

阅读量507

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/pumpkin_truck/article/details/129692427

版权

今天来给大家画一个小时候经常画的图，有月亮，有房子，有树木。
为了检查学生们的第一章学习掌握情况布置的，我觉得还挺好看的。
在这里插入图片描述
其中最想考查学生的定位，圆角边框，阴影和渐变。
使用技术都是他们刚学的基础，所以写法比较简陋
代码如下：

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 1000px;
            height: 550px;
            background-color: rgb(10, 10, 10);
            margin:200px auto;
            background-image: linear-gradient(to bottom,black 0%,rgba(88, 86, 86, 0.6) 30%,rgba(27, 25, 25, 0.8) 50%,black 100%);
        }
       
        .moon_one{
            width: 70px;
            height: 70px;
            border: darkgray 1px solid;
            border-radius: 50%;
            position: relative;
            left: 920px;
            background-color:#ffffff;
            box-shadow: 0px 0px 4px #fff;;
        }

        .moon_two{
            width: 50px;
            height: 50px;
           
            border-radius: 50%;
            position: relative;
            left:20px;
            background-color: black ;    
        }
        .content{
            width: 100%;
            height: 80%;
           

        }
        .tree1{
            width: 0;
            height: 0;
            border: 40px solid transparent;
            border-bottom-color: green;
            position: relative;
            left: 600px;
            top:20px
            
        }
         .tree2{
            width: 0;
            height: 0;
            border: 60px solid transparent;
            border-bottom-color: green;
            position: relative;
            left: 580px;
            top:-40px
           
        }
       .tree3{
            width: 0;
            height: 0;
            border: 80px solid transparent;
            border-bottom-color: green;
            position: relative;
            left: 560px;
            top:-120px
        
        }
        .bole{
            width: 20px;
            height: 200px;
            background-color: green;
            position: relative;
            left: 628px;
            top:-120px
           
        }
       .roof{
            width: 0;
            height: 0;
            border: 130px solid transparent;
            border-bottom-color:#0000fe;
             position: relative;
            left: 270px;
            top:-620px ;
           
        }
          .chimney{
            width: 40px;
            height: 100px;
          background-color:#0000fe;
          position: relative;
            left: 450px;
            top:-760px ;
        
        }
     .room{
            width: 240px;
            height: 220px;
            background-color:#ff7e22;
            position: relative;
            left: 270px;
            top:-720px ;
            padding: 10px;
        }
           .window{
            width: 80px;
            height: 80px;
            padding: 6px;
            border: 2px solid white;   
        }
        .window_one{
            height: 30px;
            width: 30px;
            border: 1px solid black;
            float: left;
            margin: 4px;  
        }
       .door{
            width: 80px;
            height: 200px;
            border: 6px solid white;
           position: relative;
           top:-80px;
           left: 150px;
        }
         .door_one{
            height: 45px;
            width: 36px;
            border: 2px solid black;
            float: left;   
        }
        .footer{
            width: 100%;
            height: 38px;
            /* border: 1px solid darkblue; */
            background-color: green;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="moon">
            <div class="moon_one">
            <div class="moon_two">  </div>
            </div>
        </div>
        <div class="content">
            <div class="tree1"></div>
            <div class="tree2"></div>
            <div class="tree3"></div>
            <div class="bole"></div>
            <div class="roof"></div>
            <div class="chimney"></div>
            <div class="room">
               <div class="window">
                 <div class="window_one"></div>
                 <div class="window_one"></div>
                 <div class="window_one"></div>
                 <div class="window_one"></div>
               </div>
               <div class="door">
                 <div class="door_one"></div>
                 <div class="door_one"></div>
                 <div class="door_one"></div>
                 <div class="door_one"></div>
                 <div class="door_one"></div>
                 <div class="door_one"></div>
                 <div class="door_one"></div>
                 <div class="door_one"></div>
              </div>
            </div>
        </div>
        <div class="footer"></div>
    </div>
        
</body>
</html>