首页 > 代码库 > 用1个 2个3个 5个div实现 十字架
用1个 2个3个 5个div实现 十字架
<!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>
用1个 2个3个 5个div实现 十字架
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。