html+css设置静态购物商品页面

最新推荐文章于 2024-05-21 08:43:37 发布

m0_63448468

最新推荐文章于 2024-05-21 08:43:37 发布

阅读量738

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_63448468/article/details/133887253

版权

效果成图：

过程代码：

一，css代码

1.图片高度和div高度需要一样，宽度随意

2.一些样式属性

（1）div边框改圆角：border-radius: 5%;

（2）元素类型转换：行内块元素 -> display: inline-block;

<style>
    .one{
        width:300px ;
        height: 140px;
        background: rgb(255, 253, 238);
        border-radius: 5%;
        display: inline-block;
        margin-right: 30px;
        margin-bottom: 30px;
    }
    img{
        float: left;
        margin-right: 10px;
        width: 140ox;
        height: 140px;

    }
    .text{
        float: left;
        margin-top: 5px;
        font-size:10px;
    }
    .jiage{
        margin-top: 110px;
        color: #ff5000;
    }
    .shou{
        text-align: center;
        border-radius: 10%;
        border: 1px #ff5000 solid;
        width: 50px;
        margin-top: 10px;
        font-size:8px;
        color: #ff5000;
    }

</style>

二，html代码

1.只需要理解第一个div“one”，其他的都是复制粘贴

2.div“shou”嵌套在div“text”里

<body>
    <div class="all">
        <div class="one">
            <img src="图片2.png" >
            <div class="text">阴阳师萤草周边-绿箭xSP<br>联名礼盒-无糖薄荷糖
            <div class="shou">收藏上千</div>
            </div>
            
            <div class="jiage">￥69.9</div>
        </div>
        <div class="one">
            <img src="图片3.png" >
            <div class="text">阴阳师萤草周边-绿箭xSP<br>联名礼盒-无糖薄荷糖
                <div class="shou">收藏上千</div>
            </div>
            <div class="jiage">￥69.9</div>
        </div>
        <div class="one">
            <img src="图片4.png" >
            <div class="text">阴阳师萤草周边-绿箭xSP<br>联名礼盒-无糖薄荷糖
                <div class="shou">收藏上千</div>
            </div>
            <div class="jiage">￥69.9</div>
        </div>
        <div class="one">
            <img src="图片5.png" >
            <div class="text">阴阳师萤草周边-绿箭xSP<br>联名礼盒-无糖薄荷糖
                <div class="shou">收藏上千</div>
            </div>
            <div class="jiage">￥69.9</div>
        </div>
        <div class="one">
            <img src="图片6.png" >
            <div class="text">阴阳师萤草周边-绿箭xSP<br>联名礼盒-无糖薄荷糖
                <div class="shou">收藏上千</div>
            </div>
            <div class="jiage">￥69.9</div>
        </div>
        <div class="one">
            <img src="图片7.png" >
            <div class="text">阴阳师萤草周边-绿箭xSP<br>联名礼盒-无糖薄荷糖
                <div class="shou">收藏上千</div>
            </div>
            <div class="jiage">￥69.9</div>
        </div>
        <div class="one">
            <img src="图片8.png" >
            <div class="text">阴阳师萤草周边-绿箭xSP<br>联名礼盒-无糖薄荷糖
                <div class="shou">收藏上千</div>
            </div>
            <div class="jiage">￥69.9</div>
        </div>
        <div class="one">
            <img src="图片9.png" >
            <div class="text">阴阳师萤草周边-绿箭xSP<br>联名礼盒-无糖薄荷糖
                <div class="shou">收藏上千</div>
            </div>
            <div class="jiage">￥69.9</div>
        </div>
        <div class="one">
            <img src="图片10.png" >
            <div class="text">阴阳师萤草周边-绿箭xSP<br>联名礼盒-无糖薄荷糖
                <div class="shou">收藏上千</div>
            </div>
            <div class="jiage">￥69.9</div>
        </div>
    </div>
    
</body>