html:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <link rel="stylesheet" href="../css/reset.css">
    8.     <link rel="stylesheet" href="../css/95电影卡片练习.css">
    9.     <link rel="stylesheet" href="../fa/css/all.css">
    11. </head>
    12. <body>
    13.     <div class="container">
    14.         <div class="header_container">
    15.             <img src="../img/12.jpg" alt="迪斯尼电影">
    16.         </div>
    18.         <div class="infor"></div>
    19.             <h2 class="film_title">卡通片</h2>
    21.             <span class="fas fa-map-marker-alt map"></span>
    22.             <h3 class="category">电影</h3>
    24.             <p>大鹏一日同风起，扶摇直上九万里。
    25.                 假令风歇时下来，犹能簸却沧溟水。
    26.                 世人见我恒殊调，闻余大言皆冷笑。
    27.                 宣父犹能畏后生，丈夫未可轻年少。</p>
    29.             <ul class="star">
    30.                 <li class="fas fa-star light"></li>
    31.                 <li class="fas fa-star light"></li>
    32.                 <li class="fas fa-star"></li>
    33.                 <li class="fas fa-star"></li>
    34.             </ul>
    36.             <ul class="brand">
    37.                 <li class="fab fa-weibo"></li>
    38.             </ul>
    39.     </div>
    40. </body>
    41. </html>

    css:
    （1)box-shadow;第三个值是指，阴影的宽度
    （2）更多的使用祖先 子孙类的css写法，避免起太多类
    （3）加油

    .container {
    width: 240px;
    margin: 100px auto;
    box-shadow: 0 0 2px rgba(218,217,217,0.6);
    border: 1px solid rgba(218,217,217,0.6);
}

.header_container {
    width: 240px;
    vertical-align: bottom;
}

.film_title {
    padding: 15px 19px;
    color: #717171;
    font:18px;
}
/* fa-map-marker-alt */


.map {
    float: left;
    position: relative;
    left: 21px;
    color: #b4b4b4;
}

.category {
    padding: 0 37px 24px 37px;
    font: 14px;
    color: #acaaaa;
}

p {
    font: 13px;
    color: #b7b5b5;
    padding-bottom: 18px;
    border-bottom: 1px solid #e9e9e9;
}

.star {
    padding-top: 14px;
    float: left;
    padding-left: 16px;
    color: #dddddd;
}

.light {
    color: #b9cb41;
}

.brand {
    float: right;
    padding-top: 13px;
    padding-right: 18px;
    color: #d6d6d6;
}

    image.png