CSS基础综合案例2-平衡车

最新推荐文章于 2024-03-19 10:15:00 发布

Q _Q

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量452

点赞数 1

分类专栏： CSS3 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_54021642/article/details/124548119

版权

CSS3 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

效果图：

代码：

<!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 {
            /* 背景色#f5f5f5 */
            background-color: #f5f5f5;
        }
        
        .goods {
            /* 高度宽度背景，根据要求修改 */
            width: 234px;
            height: 300px;
            background-color: #ffffff;
            /* div大盒子居中 */
            margin: 0 auto;
            /* 文本居中 */
            text-align: center;
        }
        
        .pic {
            /* 图片宽度160px */
            width: 160px;
        }
        
        .name {
            /* 行高25px 字号14px */
            line-height: 25px;
            font-size: 14px;
        }
        
        .info {
            /* 行高30px 字号12px 颜色#cccccc */
            line-height: 30px;
            font-size: 12px;
            color: #cccccc;
        }
        
        .price {
            /* 字号14px 颜色#ffa500 */
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>

<body>
    <div class="goods">
        <img src="car.jpg" alt="九号平衡车" class="pic">
        <div class="name">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="price">1999元</div>

    </div>
</body>

</html>

以上是CSS基础知识的学习分享，下一阶段开始CSS进阶。