用1个 2个3个 5个div实现十字架

最新推荐文章于 2022-10-17 19:05:45 发布

weixin_30621959

最新推荐文章于 2022-10-17 19:05:45 发布

阅读量289

点赞数

原文链接：http://www.cnblogs.com/cart55free99/p/4189979.html

版权

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .que{
    position: relative;
    margin: 20px;
  }
  .que .h, .que .v, .que .s{
    background: pink;
  }
  .que1{
   height: 200px;
  }
  .que1 .h{
    position: absolute;
    top: 50px;
    width: 150px;
    height: 50px;
  }
  .que1 .v{
    position: absolute;
    width: 50px;
    height: 150px;
    left: 50px;
  }
  .que2{

  }
  .que2 .s, .que2 .h{
    position: relative;
    height: 50px;
  }
  .que2 .h{
    width: 150px
  }
  .que2 .s{
    width: 50px;
    margin-left: 50px;
  }
  .que3 .s{
    width: 50px;
    height: 50px;
  }
  .que3 .s:nth-child(1),.que3 .s:nth-child(5){
    margin: 0 50px;
  }
  .que3 .s:nth-child(2),.que3 .s:nth-child(3),.que3 .s:nth-child(4){
    display: inline-block;
    margin-right: -4px;
    margin-bottom: -4px;
  }
  .que4{
    position: relative;
  }
  .que4 .h{
    position: absolute;
    top: 50px;
    width: 150px;
    height: 50px;
  }
  .que4 .h:after{
    content: ' ';
    display:block;
    position: absolute;
    width: 50px;
    height: 150px;
    left: 50px;
    top:-50px;
    background-color: pink;
  }
  </style>
</head>
<body>
  <div class="que que1">
    <div class="h"></div>
    <div class="v"></div>
  </div>
  <div class="que que2">
    <div class="s s1"></div>
    <div class="h"></div>
    <div class="s s2"></div>
  </div>
  <div class="que que3">
    <div class="s"></div>
    <div class="s"></div>
    <div class="s"></div>
    <div class="s"></div>
    <div class="s"></div>
  </div>
  <div class="que que4">
    <div class="h"></div>
  </div>
<script>


</script>
</body>
</html>