华为手机促销模块部分

最新推荐文章于 2024-09-11 20:31:47 发布
滕沐泽
最新推荐文章于 2024-09-11 20:31:47 发布
阅读量346
点赞数
文章标签： css css3 html
本文链接：https://blog.csdn.net/weixin_48326292/article/details/127567828
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="22201010902滕欣宇的四级项目2a3">
    <title>四级项目2a3</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }/*全局属性,清除边距*/
        .best{
            position: relative;/*为盒子设置父元素定位属性,相对定位*/
            width: 414px;
            height: 212px;
            margin: auto;/*盒子在页面居中*/
            padding: 0%;
            
        }
        .one{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            /* margin: 0px 278px 0px 0px;? */
            width: 135px;
            height: 206px;
           
        }
        .two{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            /* margin: 0px 140px 0px 135px; */
            width: 135px;
            height: 206px;
            
        }
        .three{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            /* margin: 0px 0px 0px 275px; */
            width: 135px;
            height: 206px;
           
        }
        .xiaotu1{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            margin: 10px 370px 174px 8px;
            width: 32px;
            height: 32px;
            z-index: 10;/*改变垂直于屏幕的层级关系*/
            
        }
        .xiaotu2{
            position: absolute;
            margin: 10px 236px 168px 144px;
            width: 32px;
            height: 32px;
            z-index: 10;/*改变垂直于屏幕的层级关系*/
        }
        .phone1{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            margin: 13px 299px 89px 20px;
            width: 100px;
            height: 106px;
        }
        .phone2{
            position: absolute;
            margin: 13px 163px 89px 160px;
            width: 100px;
            height: 106px;
        }
        .phone3{
            position: absolute;
            margin: 13px 29px 89px 299px;
            width: 100px;
            height: 106px;
        }
        .word1{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            width: 97px;
            height: 20px;
            margin: 127px 307px 65px 24px;
            text-align: center;
            font-size: 16px;
            color: black;
        }
        .word11{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            width: 97px;
            height: 20px;
            margin: 127px 103px 65px 155px;
            text-align: center;
            font-size: 16px;
            color: black;
        }
        .word111{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            width: 97px;
            height: 20px;
            margin: 127px 20px 65px 292px;
            text-align: center;
            font-size: 16px;
            color: black;
        }
        .word2{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            width: 98px;
            height: 15px;
            font-size: 14px; 
            text-align: center;
            color: darkgray;
            margin: 151px 300px 44px 23px;
        }
        .word22{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            width: 98px;
            height: 15px;
            font-size: 14px; 
            text-align: center;
            color: darkgray;
            margin: 151px 160px 44px 157px;
        }
        .word222{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            width: 98px;
            height: 15px;
            font-size: 14px; 
            text-align: center;
            color: darkgray;
            margin: 151px 24px 44px 297px;
        }
        .price1{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            width: 56px;
            height: 18px;
            font-size: 14px;
            color: red;
            text-align: center;
            margin: 176px 322px 20px 34px;
        }
        .price11{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            width: 56px;
            height: 18px;
            font-size: 14px;
            color: red;
            text-align: center;
            margin: 176px 171px 20px 166px;
        }
        .price111{
            position: absolute;/*为盒子设置基于相对定位的绝对定位*/
            width: 56px;
            height: 18px;
            font-size: 14px;
            color: red;
            text-align: center;
            margin: 176px 43px 20px 310px;
        }
        img{
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <div class="best">
        <div class="one">
            <div class="xiaotu1">
                <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5puXU.87bFpTCAbHF7lUzHTzskDn7SYRWRyhDSzajG.dFa4V6RdAwvRT.A73QMXIeTW8SNgQB7iYGDrqLd*Wdt8!/b&bo=YABgAAAAAAADFzI!&rf=viewer_4&t=5" alt="">
            </div>
            <div  class="phone1">
                <img src="http://a1.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5tPXVD9aSf.MWfLtd7uoY8Jl8G247hpIzoD7lb7kPc9kWXZl9DgrDeNiCF2ckFwbfALboQANXJa7EuCiDUzZlF4!/m&ek=1&kp=1&pt=0&bo=IAEgAQAAAAABFzA!&tl=3&vuin=3028425292&tm=1666522800&dis_t=1666525825&dis_k=37d8b8a207cb4dc918a6c8c1d904879b&sce=60-4-3&rf=viewer_4&t=5" alt="">
            </div>
            <div class="word1">
                荣耀畅玩5
            </div>
            <div class="word2">
                惊艳小屏
            </div>
            <div class="price1">           
                 ¥599
            </div>
        </div>
        <div class="two">
            <div class="xiaotu2">
                <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5puXU.87bFpTCAbHF7lUzHQu7KfrdPolgHCOMtKmmfENI6ic6zCSyJV0H2XZDLkrCSG.fKlcrhAntaZwjrqHlXs!/b&bo=YABgAAAAAAADFzI!&rf=viewer_4" alt="">
            </div>
            <div  class="phone2">
                <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5tPXVD9aSf.MWfLtd7uoY8LrdH95BFSGsciADkkvkTzKzQUCvHM7OR7UDADJGgXFneBw6lpY7gPfaU4K2eb8Cso!/b&bo=4AHgAQAAAAABFzA!&rf=viewer_4&t=5" alt="">
            </div>
            <div class="word11">
                荣耀畅玩5C
            </div>
            <div class="word22">
                真芯长续航
            </div>
            <div class="price11">
                ¥1099
            </div>
        </div>
        <div class="three">
            <div  class="phone3">
                <img src="http://m.qpic.cn/psc?/V54IGTMu0hEcQc0Eq4X13hCFyo1sEfjt/ruAMsa53pVQWN7FLK88i5puXU.87bFpTCAbHF7lUzHQYXaJJ6PkTwe.cVjyKmQS8b4QUKS9PsQf0.fdqDYSpaH11qvwbyVAzJv7sCO05HVM!/b&bo=4AHgAQAAAAABFzA!&rf=viewer_4&t=5" alt="">
            </div>
            <div class="word111">
                华为畅享5s
            </div>
            <div class="word222">
                轻薄金属机身
            </div>
            <div class="price111">
                ¥1099
            </div>
        </div>
    </div>
</body>
</html>
下面是运行效果：