2021-08-10 电影卡片练习

最新推荐文章于 2024-07-10 10:14:49 发布

困顿小狗

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量167

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/neversleepy/article/details/119578398

版权

文章目录

电影卡片练习
- 自己写的
- other

电影卡片练习

自己写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影卡片</title>
    <link rel="stylesheet" href="./fontawesome-free-5.15.4-web/css/all.css">
    <style>
        .outer{
            width: 240px;
            height: 350px;
            border: 1px rgba(218, 218, 218, .4) solid;
            box-shadow: 1px 1px 5px rgb(218, 218, 218) ;
        }
        .pic{
            width: 240px;
            height: 160px;
        }
        .words{
            width: auto;
            height: 140px;
            font: 9px Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
            color: rgb(180,180,180);
            margin: auto 20px;
            display: inline-block;
        }
        .bottom{
            padding:17px;
            width: auto;
            height: 50px;
            font: 16px Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
            color: rgb(180,180,180);
            padding: auto 20px;
            border-top:1px rgb(233,233,233) solid;
            
        }
        .full{
            color: rgb(224,232,172);
        }
        .fb{
            font-size: 20px;
            float: right;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="pic">
            <img src="1.jpg">
        </div>
        <div class="words">
            <h2>Animation films</h2>
            <i class="fas fa-map-marker-alt"></i>
            <span>Animation films</span>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="bottom">
            <i class=" full fas fa-star"></i>
            <i class="full fas fa-star "></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
            <i class="fb fab fa-facebook"></i>
        </div>
    </div>
</body>
</html>

other

1.真的用列表用得很少（。基本想不起来用，检查别人写的页面的时候经常能看到。感觉还是用蛮多的。
2.图片跟文字一样是沿着基线对齐的，所以会有一点空隙，be like
在这里插入图片描述

在这里插入图片描述

困顿小狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-10 电影卡片练习

文章目录电影卡片练习自己写的other电影卡片练习自己写的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫