简易商品展示HTML+CSS

效果展示图<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-wid

Shar豪

2671人浏览 · 2022-03-17 18:52:36

Shar豪 · 2022-03-17 18:52:36 发布

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAU2hhcuixqg==,size_20,color_FFFFFF,t_70,g_se,x_16

效果展示图

<!DOCTYPE html>
<html lang="zh-CN">

<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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
        color: black;
    }

    body {
        background-color: #f5f5f5;
    }

    .box {
        width: 280px;
        height: 360px;
        background-color: #fff;
        margin: 200px auto;
        border-radius: 14px;
    }

    .box img {
        width: 100%;
        border-radius: 14px 14px 0 0;
    }

    .box p{
        height: 100px;
        font-size: 14px;
        padding: 0 16px;
        margin-top: 20px;
    }

    .text {
        font-size: 14px;
        color: #cdcdcd;
        padding: 0 16px;
        margin-top: 10px;
    }

    .box_a {
        padding: 0 16px;
        margin-top: 20px;
    }

    .box_a h4 {
        display: inline-block;
        font-weight: 400;
        width: 130px;
        text-align: center;
    }

    .box_a h4 a:hover {
        color: #6594ff;
    }

    .box_a em {
        font-style: normal;
        margin: 0 16px 0 20px;
    }

    .box_a span {
        color: orange;
    }
</style>

<body>
   <div class="box">
        <img src="images/main1.jpg" alt="">
        <p>双座款式，防爆轮胎，踏板设计。踏板造型款式，骑行的时候给双脚落脚点。加上防爆轮胎的配置，经久耐骑，彰显出优质质感。搭配上双座的款式，方便了载人，适合家庭出行的时候选择。</p>
        <div class="text">共同推进绿色环保建设</div>
        <div class="box_a"><h4><a href="#">新风创新型电动车</a></h4><em>|</em><span>99元</span></div>
   </div>
</body>

</html>

初步了解盒子用法，适用于入门简单练习。