电影卡片

最新推荐文章于 2025-04-09 11:07:31 发布

原创最新推荐文章于 2025-04-09 11:07:31 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

布局练习专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>

<style>
    /*设置外层容器*/
    .outer{
        width: 240px;
        margin: 50px auto;
        box-shadow: 0 0 10px rgba(0,0,0,.3);
    }
    /*设置图片容器*/
    .img-wrapper{
        /*设置图片非基线对齐*/
        width: 100%;
        vertical-align: center;
    }

    .info{
        padding: 0 18px;
        color: #acaaaa;
    }

    .info .tittle{
        color: #717171;
        font-size: 18px;
        margin: 13px 0 15px 0;
    }
    .info .category{
        font-size: 14px;
    }
    .info .category i{
        padding-left: 3px;
        padding-right: 7px;
    }
    .info .intro{
        padding-top: 20px;
        padding-left: 3px;
        margin-bottom: 18px;
        line-height: 21px;
        font-size: 14px;
    }

    .star-wrapper{
        height: 46px;
        border-top: 1px #e9e9e9 solid;
    }
    .star-wrapper .star{
        margin-left: 16px;
    }

    .star .fa-star{
        float: left;
        line-height: 46px;
        margin-right: 1px;
        color: #dddddd;
    }
    .star .fa-star:hover{
       color: yellow;
    }
    .github .fa-github{
        float: right;
        line-height: 46px;
        margin-right: 33px;
    }

</style>

<body>
<!--创建外层容器-->
<div class="outer">
    <!--创建图片容器-->
    <div class="img-wrapper">
        <img src="https://img-blog.csdnimg.cn/20200624152414212.jpg" alt="">
    </div>
    <!--创建内容区容器-->
    <div class="info">
        <h2 class="tittle">Animation films</h2>
        <h3 class="category">
            <i class="fa fa-map-marker"></i>Animations
        </h3>
        <p class="intro">Lorem Ipsum is simply dummy text of the printing typesetting industry.</p>
    </div>
    <!--创建评分容器-->
    <div class="star-wrapper">
        <ul class="star">
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
        </ul>
        <ul class="github">
            <li><span class="fa fa-github"></span></li>
        </ul>
    </div>
</div>
</body>



</html>