Html+Css小tips：电影小卡片练习

最新推荐文章于 2024-10-17 16:21:20 发布

嘀啦哒

最新推荐文章于 2024-10-17 16:21:20 发布

阅读量319

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_48451943/article/details/120324682

版权

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>电影卡片</title>
  <link rel="stylesheet" href="./css/reset.css">
  <!-- 导入图标字体 -->
  <link rel="stylesheet" href="./fontawesome/css/all.css">

  <style>
    /* 设置外层容器 */
    .outer {
      width: 240px;
      margin: 100px auto;
      /* 设置阴影 */
      box-shadow: 0 0 10px rgba(0, 0, 0, .8);
    }

    /* 设置图片 */
    .img-wrapper img {
      width: 100%;
      vertical-align: bottom;
    }

    /* 设置内容容器 */
    .info {
      padding: 0px 18px;
      color: #acaaaa;
      font-size: 14px;
    }

    .info .title {
      color: #717171;
      font-size: 18px;
      margin: 13px 0 15px 0;
    }

    .info .category i{
      margin-left: 4px;
      margin-right: 7px;
    }

    /* 设置简介的样式 */
    .info .intro {
      margin: 18px 4px;
      /* 设置行间距 */
      line-height: 20px;
    }

    /* 设置下边的内容 */
    .star-wrapper {
      height: 46px;
      line-height: 46px;
      border-top: 1px solid #e9e9e9;
      color: #ddd;
      padding: 0 16px;
    }

    /* 设置星星的样式 */
    .star-wrapper .star {
      float: left;
    }

    .star-wrapper .light {
      color: #b9cb41;
    }

    .star-wrapper .weibo {
      float: right;
    }
  </style>
</head>

<body>
  <!-- 创建一个外层容器 -->
  <div class="outer">
    <!-- 创建图片容器 -->
    <div class="img-wrapper">
      <img src="./1.jpg" alt="电影卡片">
    </div>
    <!-- 创建内容区容器 -->
    <div class="info">
      <h2 class="title">
        章子怡
      </h2>
      <h3 class="category">
        <!-- 使用图标字体 -->
        <i class="fas fa-map-marker-alt"></i>
        Call Me
      </h3>
      <p class="intro">
        Now the queen was the most beautiful woman in all the land,
        and very proud of her beauty. She had a mirror,
        which she stood in front of every morning
      </p>
    </div>
    <!-- 创建评分的容器 -->
    <div class="star-wrapper">
      <!-- 创建星星 -->
      <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>
      <!-- 分享 -->
      <ul class="weibo">
        <!-- 使用图标字体 -->
        <li class="fab fa-weibo"></li>
      </ul>
    </div>

  </div>
</body>

</html>

效果图