- A+
非常简单的卡片，这个是今天没事刷抖音看见的就弄了一下！可以自己替换图片。
```<?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>卡片</title> </head> <body> <div class="center"> <div class="right-class"> <img class="img-class" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fa6%2F7b%2Fee%2Fa67beeeb22249e3d8ee99de38ae509d0.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650608335&t=bd8b1a6c84b9b2aef7d9b5a5b241d8a9"> </div> <p class="time-class">5.20</p> <p class="text-class">不悦儿童</p> <img class="avater-class" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fa6%2F7b%2Fee%2Fa67beeeb22249e3d8ee99de38ae509d0.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650608335&t=bd8b1a6c84b9b2aef7d9b5a5b241d8a9"> <div class="status-class"> <div></div> <div></div> <span>状态</span> </div> </body> <style> .img-class{ position: relative; width: 200px; height: 100%; bottom: 30px; } .right-class{ position: absolute; width: 200px; height: 200px; right: 3px; } .status-class span{ position: absolute; top: 0; font-size:1rem; right: 0%; transform: scale(0.58); line-height: 15px; } .status-class div:nth-child(2){ position: absolute; width:10px; height: 1px; top: 7px; background-color: #999; left: 11%; } .status-class div:nth-child(1){ position: relative; width: 1px; height: 10px; top: 2px; background-color: #999; left: 20%; } .status-class{ position: relative; width: 45px; color: #999; text-align: center; left: 23%; top: 8%; height: 15px; border-radius: 10px; border: 1px solid #999; } .text-class{ position: relative; font-size: 15px; left: 5%; } .time-class{ position: relative; font-size: 12px; font-weight: 600; left: 5%; } .avater-class{ position: relative; width: 15%; left: 5%; border-radius: 5px; } .center{ position: relative; margin: auto; box-shadow:0 0 6px 2px #999; top: 40%; width: 22%; height: 200px; min-width: 350px; max-width: 200px; border:1px solid rgb(192, 189, 189) } </style> </html>```
- 我的微信公众号
- 扫一扫关注
-
- 我的新浪微博号
- 扫一扫关注
-
