HTML5+CSS实现商品展示

最新推荐文章于 2024-06-10 16:21:16 发布

XiYang-DING

最新推荐文章于 2024-06-10 16:21:16 发布

阅读量3.1k

点赞数 1

分类专栏： # HTML5/CSS 文章标签： css html5 css3

本文链接：https://blog.csdn.net/m0_51350326/article/details/122524400

版权

HTML5/CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

代码

<!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>Document</title>
    <style>
        body
        {
            background-color: #f5f5f5;
        }
        .goods{
            width: 234px;
            height: 300px;
            background-color: #ffff;
            /* div标签居中 */
            margin: 0 auto;
            /* 内容居中 */
            text-align: center;
        }
        img
        {
            width: 160px;
        }
        .title{
            font-size: 14px;
            line-height: 25px;
        }
        .info{
            font-size: 12px;
            line-height: 30px;
            color: #cccccc;
        }
        .money{
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <div class="goods">
        <img src="1.png" alt="">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="money">1999元</div>
    </div>
</body>
</html>

XiYang-DING

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML5+CSS实现商品展示

效果：代码<!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"> <titl
复制链接

扫一扫