CSS/HTML制作电影网站中的电影卡片

Etui۹(･༥･´)و ̑̑

已于 2023-04-08 18:02:39 修改

阅读量5.5k

点赞数 6

分类专栏： CSS3 HTML5 文章标签： css html

于 2021-01-27 11:04:56 首次发布

本文链接：https://blog.csdn.net/m0_47015897/article/details/113243572

版权

CSS3 同时被 2 个专栏收录

38 篇文章 16 订阅

订阅专栏

HTML5

37 篇文章 8 订阅

订阅专栏

简介：
本案例宽度固、底部评分栏宽高固定，总体高度可根据文量和图片的大小自动调整
效果图（通过不同文字和图片呈现效果）：
在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影卡片</title>
    <link rel="stylesheet" href="../02CSS/reset.css">
    <link rel="stylesheet" href="./icon/电影卡片/iconfont.css">
    <style>
        /* 主体 */
        .auter{
            color: #B2B0B0;
            width: 240px;
            margin: 50px;
            box-shadow: 0px 0px 10px;
            position: relative;
        }
        /* 图片 */
        .picture{
            width: 240px;
            height: auto;
            position: relative;
        }
        /* 电影名称 */
        .name{
            font-size: 19px;
            margin: 15px 20px 10px 20px;
            width: auto;
            color: #717171;
        }
        /* 电影类型前的图标 */
        .type::before{
            content: '\e624';
            font-family: iconfont;
        }
        /* 电影类型 */
        .type{
            margin: 10px 20px 15px 20px;
            width: auto; 
        }
        /* 电影介绍 */
        .introduce{
            margin: 20px 20px 15px 20px;
            width: auto;
            line-height: 20px;
        }


        /* 底栏 */
        .bottombar{
            width: auto;
            height: 48px;
            border-top: 1px #dddddd solid;
        }
        /* 前两个绿色星星 */
        .star1{
            display: inline-block;
            line-height: 48px;
            font-size: 22px;
            margin: 0px auto 0px 18px;
            color: #B9CB41;
        }
        /* 后两个灰色星星 */
        .star2{
            display: inline-block;
            line-height: 48px;
            font-size: 22px;
            width: auto;
            color: #D6D6D6;
        }
        /* Facebook图标 */
        .facebook{
            display: inline-block;
            line-height: 48px;
            font-size: 22px;
            margin-left: 80px;
            color: #D6D6D6;
        }
    </style>
</head>
<body>
    <div class="auter">
        <div class="picture">
            <img src="./img/10/2.jpg" alt="">
        </div>
        <h1 class="name">冰雪奇缘</h1>
        <h2 class="type"> 3D电影</h2>
        <p class="introduce">这是一步非常好看的电影，好看的不得了来来来范德萨发发送到发了lorem</p>
        <div class="bottombar">
            <span class="star1 iconfont">&#xe66f;&#xe66f;</span><span class="star2 iconfont">&#xe66f;&#xe66f;</span>
            <span class="facebook iconfont">&#xeb8d;</span>
        </div>
    </div>

</body>
</html>