用1个 2个3个 5个div实现 十字架
2024-08-22 16:55:25
<!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>
最新文章
- Netty 实现聊天功能
- alarm
- solr 范围查询
- 浅谈HTTP中Get、Post、Put与Delete的区别
- nginx笔记---http配置
- linux执行文件命令
- Vijos 1006 晴天小猪历险记之Hill 单源单汇最短路
- 基于注解的Spring MVC的简单入门——简略版
- PS+HTML测试
- OI暑假集训游记
- python里如何获取当前日期前后N天或N月的日期
- 如何快速REPAIR TABLE
- (zhuan) 126 篇殿堂级深度学习论文分类整理 从入门到应用
- 数组方法indexOf & lastIndexOf
- gcc编译时对’xxxx’未定义的引用问题
- nutch 存储到数据库
- AVAudioFoundation(5)：音视频导出
- vue 过滤器filters的使用以及常见报错小坑（Failed to resolve filter）
- 【DP】BZOJ1564- [NOI2009]二叉查找树(!!)
- SQL Server 2008 R2 使用 PIVOT 错误