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

简介:
本案例宽度固、底部评分栏宽高固定,总体高度可根据文量和图片的大小自动调整
效果图(通过不同文字和图片呈现效果):
CSS/HTML制作电影网站中的电影卡片_第1张图片
CSS/HTML制作电影网站中的电影卡片_第2张图片
源码:


<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">这是一步非常好看的电影,好看的不得了来来来范德萨发发送到发了loremp>
        <div class="bottombar">
            <span class="star1 iconfont">span><span class="star2 iconfont">span>
            <span class="facebook iconfont">span>
        div>
    div>

body>
html>

你可能感兴趣的:(CSS3,HTML5,css,html)