代码:
<!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>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } a{ display: block; text-decoration: none; } body{ background-color: #f4f5f9; } .box{ width: 228px; height: 271px; background-color: #fff; margin-top: 100px; margin-left: 100px; } img{ width: 100%; } .info{ margin: 25px 24px 0; font-size: 14px; color: #000; } .info p:last-child{ margin-top: 19px; } .info span{ color: orange; } </style> </head> <body> <a href="#"> <div class="box"> <img src="./images/product.png" alt=""> <div class="info"> <p>Android网络图片加载框架详解</p> <p><span>高级</span> · 1125人在学习</p> </div> </div> </a> </body> </html>
效果图:
CSS3-综合案例-卡片
最新推荐文章于 2024-07-12 16:31:27 发布