HTML的

最新推荐文章于 2024-07-25 10:45:42 发布

接着看日落

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量29

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/2301_77161151/article/details/135054376

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .box{
               width: 400px;
               height: 400px;
               border: 1px solid #000;
               margin: 50px auto 0;
               position: relative;
           }
           .box div{
               width: 200px;
               height: 200px;
               position: absolute;
           }
           .box1{
               background-color: #000;
               left: 20px;
               top: 20px;
               z-index: 10;
           }
           .box2{
               background-color:antiquewhite;
               left: 40px;
               top: 40px;
               z-index: 11;
           }
           .box3{
               background-color: aqua;
               left: 60px;
               top: 60px;
           }
           .box4{
               background-color:cadetblue;
               left: 80px;
               top: 80px;
           }
           .con{
               width: 100px;
               height: 100px;
               background-color: gold;
               margin: 50px auto 0;
               position: relative;
               border-radius: 14px;
           }
           .a{
               width:28px;
               height: 28px;
               background-color: red;
               color: #fff;
               line-height: 28px;
               text-align: center;
               position: absolute;
               left: 86px;
               top: -14px;
               border-radius: 14px;/* 这是设置圆角,值一般是盒子大小的半径 */
           }
       </style>
   </head>
   <body>
       <div class="box">
           <div class="box1"></div>
           <div class="box2"></div>
           <div class="box3"></div>
           <div class="box4"></div>
       </div>
       <div class="con">
           <div class="a">5</div>
       </div>
   </body>
</html>