电影卡片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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 filmsh2>
        <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>

你可能感兴趣的:(布局练习)