flexbox card的小例子

最新推荐文章于 2023-06-15 10:28:01 发布

三哥自尊心强

最新推荐文章于 2023-06-15 10:28:01 发布

阅读量219

点赞数

分类专栏：前端文章标签： css html5

本文链接：https://blog.csdn.net/yaoguoxing/article/details/113161543

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果如下：
在这里插入图片描述

代码如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        body{
            background-color: #000;
        }
        .container{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .card{
            background-color: white;
            width: 270px;
            height: 400px;
            margin: 1rem;
            border-radius: 15px;
            position: relative;
        }
        .card-image{
            background-color: aqua;
            height: 170px;
            margin-bottom: 15px;
            background-size: cover;
            border-radius: 15px 15px 0 0;
        }
        .car-1{
            background-image: url("images/4.jpg");
        }
        .car-2{
            background-image: url("images/5.jpg");
        }
        .car-3{
            background-image: url("images/6.jpg");
        }
        .card h2{
            padding: 10px;
        }
        .card p{
            padding: 10px;
        }
        .card a{
            background-color: black;
            position: absolute;
            bottom: 0;
            color: white;
            padding: 15px 20px;
            display: block;
            text-align: center;
        }

        .card:hover{
            background-color: rgb(62,62,62);
            color: white;
            cursor: pointer;
            transform: scale(1.05);
            transition: all 1.5s ease;
        }
    </style>
</head>
<body>
    <section class="container">
        <div class="card">
            <div class="card-image car-1"></div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, rem?</p>
            <a href="#">Read More</a>
        </div>
        <div class="card">
            <div class="card-image car-2"></div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet.</p>
            <a href="#">Read More</a>
        </div>
        <div class="card">
            <div class="card-image car-3"></div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet.</p>
            <a href="#">Read More</a>
        </div>
    </section>
</body>
</html>

三哥自尊心强

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flexbox card的小例子

效果如下：代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
复制链接

扫一扫