【每日一练】139—CSS实现一款产品卡

最新推荐文章于 2024-03-06 14:42:16 发布

web前端开发V

最新推荐文章于 2024-03-06 14:42:16 发布

阅读量135

点赞数

文章标签： css html javascript 前端 css3

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649135704&idx=2&sn=e0dc4c8da7842842eb04dedaa746520c&chksm=be58bdf5892f34e38ff4d71998f542baeb6fd195d1f9d1a9d3bc66ffc975fb2b69702f7cedfb&scene=126&sessionid=0

版权

产品卡片的实现，我们在前面也分享过不少，今天我们再练习一个，这个自带评分系统的卡片效果，这样可以帮助客户在选购产品时，就能从评分中先做一轮筛选。现在，我们就一起来看一下今天练习的最终效果吧。

最终效果如下：

HTML代码：

<!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>【每日一练】139—CSS实现一款产品卡</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"  crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>


    <div class="box">
        <div class="card">
            <div class="image">
                <img src="image/shoes1.png">
            </div>
            <div class="text">
                <h2>￥ 199.90 </h2>
                <h3>跑步运动鞋</h3>
                <p>
                    跑步运动鞋，轻易舒适不伤脚
                </p>
                <div class="stra">
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-regular fa-star"></i>
                </div>
                <a href="http://www.webqdkf.com" class="btn">我要购买</a>
            </div>
        </div>


        <div class="card">
            <div class="image">
                <img src="image/shoes2.png">
            </div>
            <div class="text">
                <h2>￥ 199.90 </h2>
                <h3>跑步运动鞋</h3>
                <p>
                    跑步运动鞋，轻易舒适不伤脚
                </p>
                <div class="stra">
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-regular fa-star"></i>
                </div>
                <a href="http://www.webqdkf.com" class="btn">我要购买</a>
            </div>
        </div>


        <div class="card">
            <div class="image">
                <img src="image/shoes3.png">
            </div>
            <div class="text">
                <h2>￥ 199.90 </h2>
                <h3>跑步运动鞋</h3>
                <p>
                    跑步运动鞋，轻易舒适不伤脚
                </p>
                <div class="stra">
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-regular fa-star"></i>
                </div>
                
                <a href="http://www.webqdkf.com" class="btn">我要购买</a>
            </div>
        </div>


        <div class="card">
            <div class="image">
                <img src="image/shoes4.png">
            </div>
            <div class="text">
                <h2>￥ 199.90 </h2>
                <h3>跑步运动鞋</h3>
                <p>
                    跑步运动鞋，轻易舒适不伤脚
                </p>
                <div class="stra">
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-regular fa-star"></i>
                </div>
                <a href="http://www.webqdkf.com" class="btn">我要购买</a>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}


.box{
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);    
}


.box .card{
    width: 270px;
    height: 380px;
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
    padding: 5px 15px;
    margin: 0 15px;
    border-radius: 5px;
}


.box .card .image{
    display: flex;
    align-items: center;
    justify-content: center;
}


.box .card .image img{
    width: 150px;
    margin: 10px;
}


.box .card .text{
    text-align: center;
}


.box .card .text h3{
    margin-bottom: 7px;
}
.text h2{color:#cd0a0a;
    margin-bottom: 8px;


}
.box .card .text p{
    line-height: 20px;
    color: #919191;
    margin-bottom: 8px;
    margin-top:8px;
}


.box .card .text .stra{
    color: orange;
    margin-top: 8px;
    margin-bottom: 18px;
}


.box .card .text .btn{
    padding: 7px 20px;
    background: #ff6600;
    text-decoration: none;
    color: white;
    transition: 0.2s;
}


.box .card .text .btn:hover{
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】139—CSS实现一款产品卡

产品卡片的实现，我们在前面也分享过不少，今天我们再练习一个，这个自带评分系统的卡片效果，这样可以帮助客户在选购产品时，就能从评分中先做一轮筛选。现在，我们就一起来看一下今天练习的最终效果吧。最终效果如下：HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫