日 | 一 | 二 | 三 | 四 | 五 | 六 |
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
[复位日记]
网站统计
·今日访问 : 87
·页面点击 : 87
·当前在线 : 13
2024年6月17日 星期一[阅读 132]
<style>
#mydiv { margin: 20px auto; width: 600px; height: 300px; border: 1px solid plum; position: relative; }
#mydiv::before, #mydiv::after { position: absolute; right: 0; width: 100%; height: 100%; }
#mydiv::before { content: 'before'; background: pink; }
#mydiv::after { content: 'after'; background: lightblue; width: 60%; }
#son { position: absolute; bottom: 0; width: 100%; height: 60%; background: olive; }
</style>
<div id="mydiv">
<div id="son">son</div>
</div>
评论列表: [ 1 条 ]
1 # 悄然[2024-6-17 20:52] 这个是伪元素层级演示,:after 默认最上,:before最下。其余元素在中间。。。比如#son
发表评论: