(案例)综合案例2-卡片居中案例


    <style>
        div.a{
            margin: auto;
            width: 230px;
            height: 400px;
            /* border: sandybrown 5px solid; */
            background-color: #ffffff;
        }
        img{
            width: 200px;
            height: 270;
            margin: auto;
            position: relative;
            left: 12px;
        }
        p.a{
text-align: center;
position: relative;
bottom: 15px;
        }
        p.b{
            color: rgb(204, 204, 204);
            position: relative;
            bottom: 20px;
            text-align: center;
        }
        p.c{
            color: rgb(255, 165, 0);
            text-align: center;
            position: relative;
            bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="a">
        <img src="./img/car.jpg" >
        <p class="a">九号平衡车</p>
        <p class="b">成年人的玩具</p>
        <p class="c">1999元</p>
    </div>
</body>
</html>
74c105cdcd023c2f47f00b6d2bdba274.png
© 版权声明
THE END
喜欢就支持一下吧
点赞13赞赏 分享
评论 抢沙发

请登录后发表评论