Card实现

最新推荐文章于 2024-03-20 15:15:56 发布

_洋

最新推荐文章于 2024-03-20 15:15:56 发布

阅读量211

点赞数

分类专栏： HTML+CSS 文章标签：迪士尼动画电影视觉效果评分电影简介

本文链接：https://blog.csdn.net/mantou_riji/article/details/124181750

版权

HTML+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./font/css/all.css">
  <style>
      .outer{
          width: 200px;
          margin: 100px auto;
          /* 阴影 */
          box-shadow: 0 0 10px rgba(0,0,0,0.3);
      }
      .img-wrapper img{
          width: 100%;
          /* 取消基线对准 */
          vertical-align: bottom;
      }
      .info{
          padding: 0px 18px;
           color:#717171;
           font-size: 14px;
      }
      .info .title{
          font-size: 18px;
          margin:13px 0 15px 0;
      }
      .info .category{
          margin-left: 4px;
          margin-right: 7px;
      }
      .info .intro{
          margin: 18px 4px;
          line-height: 20px;
      }
      .star-wrapper{
          height: 45px;
          line-height: 45px;
          border-top: 1px solid #e9e9e9;
          color: #ddd;
          margin: 0px 16px;
      }
      .star-wrapper .star{
          float: left;
      }
      .star-wrapper .light{
          color: rgb(204, 204, 88);
      }
      .star-wrapper .weibo{
          float: right;
      }

  </style>
</head>
<body>
    <div class="outer">
        <div class="img-wrapper">
             <img src="./IMG/9.png" alt="">
        </div>
        <div class="info">
            <h2 class="title">
                动画电影
            </h2>
            <h3 class="category">
                <i class="fas fa-map-marker-alt"></i>
                动画
            </h3>
            <p class="intro">这是一部迪士尼的动画电影，很好看</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>

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Card实现

效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="./reset.css"> <link rel="stylesheet" href="./font/css/all.css"> <style> .outer{ width:
复制链接

扫一扫

专栏目录