效果展示：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
//清除默认·样式，不是必须 <link rel="stylesheet" href="./html&css_code/exercise/css/reset.css">
//图标字体css,无法上传，得自行下载 <link rel="stylesheet" href="./html&css_code/exercise/fa/css/all.css"> <title>电影卡片</title> <style> .outer{ width: 240px; margin: 100px auto; box-shadow: 0 0 10px rgba(0, 0, 0, .3); } .img-wraper img{ width: 100%; vertical-align: bottom; } .info ,.star-warper{ padding: 0 18px; color: #acaaaa; font-size: 14px; } .info .title{ color: #717171; font-size: 18px; margin: 13px 0 15px 0; } .info .category{ color:#acaaaa; font-size: 14px; } .info .category i{ margin-left: 4px; margin-right: 7px; } .info .briefintro{ margin-top: 18px; margin-left: 4px; line-height: 20px; margin-bottom: 18px; } .star-warper{ height: 46px; border-top: 1px solid #e9e9e9; line-height: 46px; } .star{ float: left; } .fa-weibo{ float: right; line-height: 46px; } .light{ color: green; } </style> </head> <body> <div class="outer"> <div class="img-wraper"> <img src="./img/10/1.jpg" alt=""> </div> <div class="info"> <h2 class="title"> 动画电影 </h2> <h3 class="category"> <i class="fas fa-map-marker-alt"></i> 动画 </h3> <p class="briefintro"> 这是一部迪士尼的电影，非常非常的好看！！！ </p> </div> <div class="star-warper"> <ul class="star"> <li class="fas fa-star light"></li> <li class="fas fa-star light"></li> <li class="fas fa-star"></li> <li class="fas fa-star"></li> </ul> <span class="fab fa-weibo"> </span> </div> </div> </body> </html>
图片：
