HTML学习记录

最新推荐文章于 2024-07-14 10:34:53 发布

小蕊。

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量50

点赞数

文章标签： html 学习

本文链接：https://blog.csdn.net/weixin_74886866/article/details/133282421

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>

a{
    text-decoration: none;
}
.box {
    width: 720px;
    height: 720px;
    background-color:#fff;
    text-align: center;
}
.top,.bottom {
    width: 100%;
    height: 100%;
}
.top {
    background-color:#fff;
}
.bottom {
    background-color: #fff;
}
.item1{
    width: 25%;
    height: 50%;
    background-color: #fff;
    float: left;
}
.item {
    width: 50%;
    height: 600px;
    background-color: #fff;
    /* 块级元素水平显示 */
    float: left;
}
.right {
    background-color: #fff;
}

.img{
    width: 360px;
    height: 360px;
    background-color: #fff;
    float: left;
}

.name{
    font-size: 24px;
    color: #333;
    font-weight: 600;
}
.desc{
    color: #999;
    font-size: 14px;
}
.price{
    color: #c00;
    font-size: 22px;
}
.del{
    color: #666;
    font-size: 14px;
}
    </style>
</head>
<body>
    <div class="box" algin="center">
        <div class="top">
            <div class="item" >
                <a href="#" >
                <h2 class="name">魅族 20</h2>
                <p class="desc"> 第二代蛟龙 8 旗舰处理器|全新 Flyme 10</p>
                <p class="price">￥2799 <del class="del">￥2999</del></p>
                    <img  src="./images/Cgbj0WTaGg6ARWbNAAacoG9LsIY232.png" alt="" class="img">
                </a>
                

            </div>
            <div class="item right">
                <a href="#" >
                    <h2 class="name">魅族 20 PRO</h2>
                    <p class="desc"> 第二代蛟龙 8 旗舰处理器|全新 Flyme 10</p>
                    <p class="price">￥3599 <del class="del">￥3999</del></p>
                        <img  src="./images/Cgbj0GTaGkmAXlOQAAc-prtD54g772.png" alt="" class="img">
                    </a>
            </div>
        </div>
        <div class="bottom">
            <div class="item1">
                <a href="#">
                    <img src="" alt="" class="img">
                    <h3 class="name"></h3>
                    <p class="desc"></p>
                    <p class="price"></p>
                </a>
            </div>
            <div class="item1">2</div>
            <div class="item1">3</div>
            <div class="item1">4</div>
        </div>
        </div>


    </div>
</body>
</html>