html综合案例-简单的详情页

吉米的编程日记

于 2024-03-11 11:01:03 发布

阅读量373

点赞数 10

文章标签： css html

本文链接：https://blog.csdn.net/m0_62211222/article/details/136617870

版权

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>0311</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        body{
            background-color:#ebe2eb;
        }
        .box {
            height:415px;
            width: 298px;
            margin: 100px auto; /*让块级的盒子居中对齐*/
            background-color: #808080;
        }
        .box img{
            width:100%;
        }
        .review{
            height:70px;
            font-size:14px;
            padding:0 28px;
            margin-top:30px;


        }
        .pinglun {
            font-size: 12px;
            padding: 0 28px;
            margin-top:15px;
            color:antiquewhite;
        }
        div.info {
            font-size: 14px;
            padding: 0 28px;
            margin-top: 15px;
            color: black;
            text-decoration:none;
        }
        .price{
            color:orangered;
        }

        em{
            color:antiquewhite;
            padding:0 7px 0 15px;
            font-style:normal;
        }
        a{
            font-style:normal;
            text-decoration:none;
            color:black;
        }
    </style>

</head>
<body>
   
    <div class="box">
        <img src="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/bi001/2023/0815/73/ias_010054834578eff7dfcce58d18dcf92e_1135x545_85.jpg" class="brand-img" data-original="https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/bi001/2023/0815/73/ias_010054834578eff7dfcce58d18dcf92e_1135x545_85.jpg" alt="施华洛世奇专场">
        <p class="review"> <a href="#">  这是一段文字文字。。。。。</a></p>
        <span class="pinglun"> 这是一条评论评论。。。</span>
        <div class="info"> <a href="#">这是一段详情文字。。。</a>
        <em>|</em>
        <span class="price">99.9元</span></div>
    </div>
</body>
</html>