html5+css3初学练手小米商城

发布于：2023-01-19 ⋅ 阅读:(396) ⋅ 点赞:(0)

html5源码：

<!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>小米商城</title>

    <link rel="stylesheet" href="./xiaomi.css">

</head>

<body>

    <div class="daohang">

        <div class="container">

            <div class="topbar-nav">

                <p>小米官网</p>

                <span class="sep">|</span>

                <p>小米商城</p>

                <span class="sep">|</span>

                <p>IoT</p>

                <span class="sep">|</span>

                <p>云服务</p>

                <span class="sep">|</span>

                <p>天星数科</p>

                <span class="sep">|</span>

                <p>有品</p>

                <span class="sep">|</span>

                <p>小爱开放平台</p>

                <span class="sep">|</span>

                <p>企业团购</p>

                <span class="sep">|</span>

                <p>协议规则</p>

                <span class="sep">|</span>

                <p>资质证照</p>

                <span class="sep">|</span>

                <p>下载app</p>

                <span class="sep">|</span>

                <p>Select Location</p>

                <span class="sep">|</span>

            </div>

            <div class="topbar-cart">

                <p>购物车（0）</p>

            </div>

            <div class="topbar-info">

                <p>登录</p>

                <p>注册</p>

                <p>消息通知</p>

            </div>

        </div>

    </div>

    <div class="shang">

        <div class="site-header">

            <div class="container">

                <div class="header-logo">

                    <img src="./img/PA}7QW4PY2S(ME%A}]E(3P1.png" alt="">

                </div>

   

                <div class="header-nav ">

                    <ul class="nav-list">

                        <li class="nav-item">Xiaomi手机</li>

                        <li class="nav-item">Redmi手机</li>

                        <li class="nav-item">电视</li>

                        <li class="nav-item">笔记本</li>

                        <li class="nav-item">平板</li>

                        <li class="nav-item">家电</li>

                        <li class="nav-item">路由器</li>

                        <li class="nav-item">服务中心</li>

                        <li class="nav-item">社区</li>

                    </ul>

                </div>

   

                <div class="header-search ">

                    <div class="sousuo">黑鲨5</div>

                    <div class="sousuo1"><img src="./img/3{29921LFYRX156YOYO_8~F.png" alt=""></div>

                </div>

            </div>

        </div>

   

        <div class="neirong">

            <div class="left">

                <ul class="left-list">

                    <li class="left-item">手机 <img src="./img/sanjiao.png" alt=""></li>

                    <li class="left-item">电视 <img src="./img/sanjiao.png" alt=""></li>

                    <li class="left-item">笔记本 平板 <img src="./img/sanjiao.png" alt=""></li>

                    <li class="left-item">出行 穿戴 <img src="./img/sanjiao.png" alt=""></li>

                    <li class="left-item">耳机 音箱 <img src="./img/sanjiao.png" alt=""></li>

                    <li class="left-item">家电 <img src="./img/sanjiao.png" alt=""></li>

                    <li class="left-item">智能 路由器 <img src="./img/sanjiao.png" alt=""></li>

                    <li class="left-item">电源 配件 <img src="./img/sanjiao.png" alt=""></li>

                    <li class="left-item">健康 儿童 <img src="./img/sanjiao.png" alt=""></li>

                    <li class="left-item">生活 箱包 <img src="./img/sanjiao.png" alt=""></li>

                </ul>

            </div>

            <img src="  https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6cdd149cb0fc40637a84b1fc5971f662.jpg?w=2452&h=920" alt="">

        </div>

   

        <div class="home-hero-sub">

            <div class="left">

                <img src="./img/A970`}0%OEZ1O3VR0KGBM)O.png" alt="">

            </div>

   

            <div class="right">

                <ul class="rightul">

                    <li class="rightli" style="margin-right: 15px;"><img src="  https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/290270b6fc499fc5fcb653417e99fe91.jpg?w=632&h=340" alt=""></li>

                    <li class="rightli"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d1892854c8bb165e755d68bde287d71.jpg?w=632&h=340" alt=""></li>

                    <li class="rightli" style="float: right;"><img src="    https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340" alt=""></li>

                </ul>

            </div>

        </div>

    </div>

    <div class="xia">

        <div class="banner-boox">

            <img src="./img/banner.png" alt="">

         </div>

         <div class="box-hd">

            <h2>手机</h2>

            <div class="more">

                <i class="i1">查看更多</i>

                <i class="i2"><img src="./img/ckgd.png" alt=""></i>

            </div>

         </div>

         <div class="row">

            <div class="left">

                <img src="./img/WIREHMGXW(AGE]TKSYV98ZU.png" alt="">

            </div>

            <div class="right">

                <ul class="xmsjul">

                    <li class="xmsjli">

                        <div class="nqqq">

                            <div class="figure">

                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                            </div>

                            <h3>Xiaomi 12S Ultra</h3>

                            <p class="desc">这真徕卡｜专业徕卡影像</p>

                            <p class="price" style="color:#ff6700 ;">5999元起</p>

                        </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012000_0b9df066c110f201154013ac373df1d9.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>Xiaomi 12S Pro</h3>

                        <p class="desc">骁龙8+ 旗舰处理器 | 徕卡影像</p>

                        <p class="price" style="color:#ff6700 ;">4699元起</p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>Xiaomi 12S </h3>

                        <p class="desc">小尺寸性能旗舰 | 徕卡影像</p>

                        <p class="price" style="color:#ff6700 ;">3999元起</p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/211bb83776a8e0c8358732c3f3aa2864.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                            Redmi Note 11T Pro+

                        </h3>

                        <p class="desc">天玑8100｜真旗舰芯</p>

                        <p class="price" style="color:#ff6700 ;">1999元起</p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>Xiaomi 12 Pro 天玑版</h3>

                        <p class="desc">全球首发天玑9000+｜叶脉冷泵散热系统｜2K AMOLED 超视感屏 ｜5000万疾速影像</p>

                        <p class="price" style="color:#ff6700 ;">5999元起</p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5713971c4bb6512743dfd06023080268.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                            Redmi Note 11T Pro

                        </h3>

                        <p class="desc">天玑8100｜真旗舰芯</p>

                        <p class="price" style="color:#ff6700 ;">1599元起</p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7fccce9e65aff2d7c913e40f4bee1b0b.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                            Redmi Note 11SE

                        </h3>

                        <p class="desc">双卡双5G｜疾速登陆</p>

                        <p class="price" style="color:#ff6700 ;">999元起</p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bcd64f412dfb5e15695fa96d21ecb23.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>                                        Xiaomi Civi 1S                        </h3>

                        <p class="desc">原生美肌人像｜奇迹阳光动人新色｜骁龙778G Plus</p>

                        <p class="price" style="color:#ff6700 ;">5999元起</p>

                    </div>

                    </li>

                </ul>

            </div>

         </div>


 

         <div class="box-hd1">

            <h2>智能穿戴</h2>

            <div class="more1">

                <i class="i3">热门</i>

                <i class="i4">穿戴</i>

            </div>

         </div>

       

         <div class="row">

            <div class="left">

                <img src="./img/JHY]@@I[XURIDNCNR_2T631.png" alt="">

            </div>

            <div class="right">

                <ul class="xmsjul">

                    <li class="xmsjli">

                        <div class="nqqq">

                            <div class="figure">

                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b8259e8fb355acf168c66f75d375c6af.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                            </div>

                            <h3>Xiaomi Watch S1</h3>

                            <p class="desc">蓝宝石玻璃镜面 | 不锈钢中框 | 1.43”AMOLED大屏幕</p>

                            <p class="price"> <span>1049元</span><del>1099元</del></p>

                        </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0b271a074e087848357aa61ae665b214.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                            Xiaomi真无线降噪耳机3

                         </h3>

                        <p class="desc">40dB宽频主动降噪 | HiFi高保真音质 | HRTF专业调音骁龙8+ 旗舰处理器 | 徕卡影像</p>

                        <p class="price"> <span>319元</span><del>499元</del></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https:cdn.cnbj1.fds.api.mi-img.com/mi-mall/f84503dbf5adbdf17111c61d4a7cf893.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                            Redmi 手表 2

                        </h3>

                        <p class="desc">1.6"AMOLED大屏 | 117种运动模式 | 24小时心率监测</p>

                        <p class="price"><span>399元</span></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b28153b80cb2c67564608e56d5c2f3f3.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            小米手环6 NFC版

                                           

                        </h3>

                        <p class="desc">1.56" 跑道全面彩屏 | 30种运动模式 | 24小时心率监测</p>

                        <p class="price"> <span>229元</span><del>279元</del></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                            Xiaomi 真无线降噪耳机 3 Pro

                        </h3>

                        <p class="desc">40dB自适应降噪 ｜空间音频 ｜ HiFi高保真音质</p>

                        <p class="price"> <span>599元</span><del>699元</del></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11570d5371f16d2d9b19f504e09d01f0.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            Redmi Buds 3半入耳真无线蓝牙耳机

                                           

                        </h3>

                        <p class="desc">轻巧半入耳 | 通话降噪 | 20小时长续航</p>

                        <p class="price"> <span>169元</span><del>199元</del></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https:cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fcf24e40ff09a254857ac8b4ace25b8.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            Redmi Buds 3 青春版

                                           

                        </h3>

                        <p class="desc">轻巧真无线 | 猫耳状稳固设计 | 18小时长续航</p>

                        <p class="price" style="color:#ff6700 ;">99元</p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https:cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fcf24e40ff09a254857ac8b4ace25b8.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            Redmi Buds 3 青春版

                                           

                        </h3>

                        <p class="desc">轻巧真无线 | 猫耳状稳固设计 | 18小时长续航</p>

                        <p class="price" style="color:#ff6700 ;">99元</p>

                    </div>

                    </li>

                </ul>

            </div>

         </div>


 

         <div class="box-hd1">

            <h2>笔记本 | 平板</h2>

            <div class="more1">

                <!-- <i class="i3">热门</i> -->

                <i class="i4" style="color: #ff6700;">热门</i>

            </div>

         </div>

         <div class="row">

            <div class="left">

                <img src="https:cdn.cnbj1.fds.api.mi-img.com/mi-mall/e9896934bb657c3dd0c548952eb27481.jpg?thumb=1&w=234&h=614&f=webp&q=90" alt="">

            </div>

            <div class="right">

                <ul class="xmsjul">

                    <li class="xmsjli">

                        <div class="nqqq">

                            <div class="figure">

                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0f8abb2bc3947c4679e3f1b2aafc28c0.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                            </div>

                            <h3>

                                Redmi Book Pro 15 2022

                            </h3>

                            <p class="desc">全新12代英特尔处理器</p>

                            <p class="price" style="color: #ff6700;">5599元起</p>

                        </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/68637deb3ab9cecdc7805c7154e79683.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            Redmi G 2021 R7/RTX3050Ti/16G/51

                                           

                         </h3>

                        <p class="desc">有光追，才是高性能游戏本</p>

                        <p class="price"> <span>5799元</span><del>6299  元</del></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            Pro 14 增强版 i5 独显 - Win11

                                           

                        </h3>

                        <p class="desc">2.5K超视网膜全面屏</p>

                        <p class="price"> <span>4799元</span><del>5599元</del></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b28153b80cb2c67564608e56d5c2f3f3.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            小米手环6 NFC版

                                           

                        </h3>

                        <p class="desc">1.56" 跑道全面彩屏 | 30种运动模式 | 24小时心率监测</p>

                        <p class="price"> <span>229元</span><del>279元</del></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                            Xiaomi 真无线降噪耳机 3 Pro

                        </h3>

                        <p class="desc">40dB自适应降噪 ｜空间音频 ｜ HiFi高保真音质</p>

                        <p class="price"> <span>599元</span><del>699元</del></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11570d5371f16d2d9b19f504e09d01f0.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            Redmi Buds 3半入耳真无线蓝牙耳机

                                           

                        </h3>

                        <p class="desc">轻巧半入耳 | 通话降噪 | 20小时长续航</p>

                        <p class="price"> <span>169元</span><del>199元</del></p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https:cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fcf24e40ff09a254857ac8b4ace25b8.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            Redmi Buds 3 青春版

                                           

                        </h3>

                        <p class="desc">轻巧真无线 | 猫耳状稳固设计 | 18小时长续航</p>

                        <p class="price" style="color:#ff6700 ;">99元</p>

                    </div>

                    </li>

                    <li class="xmsjli">

                        <div class="nqqq">

                        <div class="figure">

                            <img src="https:cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fcf24e40ff09a254857ac8b4ace25b8.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">

                        </div>

                        <h3>

                           

                            Redmi Buds 3 青春版

                                           

                        </h3>

                        <p class="desc">轻巧真无线 | 猫耳状稳固设计 | 18小时长续航</p>

                        <p class="price" style="color:#ff6700 ;">99元</p>

                    </div>

                    </li>

                </ul>

            </div>

         </div>

         

    </div>

</body>

</html>

css3源码：

*{

    margin: 0;

    padding: 0;

}

ul li {

    list-style: none;

}

i{

    font-style:normal

}

.shang{

    width: 100%;

    height: 780px;

    background-color: #fff;

}

.daohang{

    width: 100%;

    height: 40px;

    background-color: #333;

}

.container{

    width: 1226px;

    height: 40px;

    line-height: 40px;

    margin: auto;

}

.topbar-nav{

    float: left;

    height: 40px;

    line-height: 40px;

    font-size: 12px;

}

.topbar-nav p{

    color: #b0b0b0;

    line-height: 40px;

    display: inline-block

}

.topbar-nav span{

    margin: 0 0.3em;

    color: #424242;

}

.topbar-info{

    position: relative;

    float: right;

    height: 40px;

    line-height: 40px;

}

.topbar-info p{

    padding: 0 5px;

    text-align: center;

    font-size: 12px;

    color: #b0b0b0;

    display: inline-block;

}

.topbar-cart{

    position: relative;

    float: right;

    width: 120px;

    height: 40px;

    margin-left: 15px;

    -webkit-transition: all .2s;

    transition: all .2s;

    font-size: 12px;

}

.topbar-cart p{

    width: 120px;

    height: 40px;

    font-size: 12px;

    color: #b0b0b0;

    background-color: #424242;

    text-align: center;

}

.site-header  {

    width: 100%;

    height: 100px;

    /* border: 1px solid red; */

}

.site-header  .container{

    width: 1226px;

    height: 100px;

    margin: 0 auto;

    /* border: 1px solid blue; */

}

.header-logo{

    float: left;

    width: 62px;

    margin-top: 22px;

}

.header-logo img{

    width: 53px;

    height: 53px;

}

.header-nav {

    float: left;

    width: 850px;

}

.header-nav  .nav-list{

    height: 100px;

    line-height: 100px;

    padding-left: 122px;

}

.header-nav  .nav-list .nav-item{

    display: inline-block;  

    padding-left: 10px;

    color: #333;

    font-size: 16px;

}

.header-search {

    float: right;

    width: 300px;

    margin-top: 25px;

    border: 1px solid #b0b0b0;

    color: #333;

}

.header-search .sousuo{

    display: inline-block;

    height: 50px;

    line-height: 50px;

    padding-left: 10px;

}

.header-search .sousuo1{

    float: right;

    width: 50px;

    height: 50px;

    /* display: inline-block; */

    border-left: 1px solid #b0b0b0;

}

.header-search .sousuo1 img{

    width: 50px;

    height: 50px;

}

.neirong{

    width: 1226px;

    height: 460px;

    /* border: 1px solid red; */

    margin: 0 auto;

    position: relative;

}

.neirong .left{

    width: 234px;

    height: 460px;

    /* border: 1px solid red; */

    background: rgba(105,101,101,.6);

    position: absolute;

    left: 0;

    top: 0;

}

.neirong  img{

    width: 1226px;

    height: 460px;

}

.left .left-list{

    margin-top:20px;

}

.left .left-item{

    width: 234px;

    height: 40px;

    padding-left: 30px;

    color: #fff;

    font-size: 12px;

    line-height: 40px;

}

.left .left-item img{

    width: 29px;

    height: 29px;

    float: right;

    padding-top: 5px;

    padding-right: 40px;

}

.home-hero-sub{

    width: 1226px;

    height: 170px;

    /* border: 1px solid red; */

    margin:  30px auto;

}

.home-hero-sub .left{

    width: 234px;

    height: 170px;

    float: left;

}

.home-hero-sub .left img{

    width: 234px;

    height: 170px;

}

.home-hero-sub .right {

    width: 978px;

    height: 170px;

    float: right;

}

.home-hero-sub .right .rightul .rightli{

    width: 316px;

    height: 170px;

    float: left;

}

.home-hero-sub .right .rightul .rightli img{

    width: 316px;

    height: 170px;

}

.banner-boox{

    width: 1226px;

    height: 120px;

    margin: 0 auto;

    padding-top: 20px;

}

.banner-boox img{

    width: 1226px;

    height: 120px;

}

.xia{

    width: 100%;

    height: 2500px;

    background: rgba(0, 0, 0, 0.1) ;

}

.box-hd{

    width: 1226px;

    height: 58px;

    padding-top: 23px;

    margin: 0 auto;

    /* border: 1px solid red; */

    line-height: 58px;

}

.box-hd h2{

    font-size: 22px;

    font-weight: 200;

    line-height: 58px;

    color: #333;

    float: left;

}

.box-hd .more{

    width: 92px;

    height: 58px;

    /* border: 1px solid red; */

    float: right;

}

.box-hd .more .i1{

    font-size: 16px;

    line-height: 58px;

    color: #424242;

}

.box-hd .more .i2 img{

    width: 22px;

    height: 22px;

    float: right;

    padding-top: 18px;

}

.row{

    width: 1226px;

    height: 614px;

    margin: 0 auto;

    /* border: 1px solid red; */

}

.row .left{

    width: 234px;

    height: 614px;

    float: left;

}

.row .lfet .img{

    width: 234px;

    height: 614px;

}

.row .right{

    width: 990px;

    height: 614px;

    float: right;

    /* border: 1px solid red; */

}

.row .right .xmsjul .xmsjli{

    width: 234px;

    height: 300px;

    background-color: #fff;

    /* border: 1px solid red; */

    /* display: inline-block; */

    /* margin-right: calc(978px / 4 - 238px); */

    position: relative;

    z-index: 1;

    float: left;

    margin-left: 13px;

    margin-bottom: 12px;

    background: #fff;

}

/* .row .right .xmsjul .xmsjli:nth-child(4n){

    margin-right: 0;

} */

.row .right .xmsjul .xmsjli .nqqq{

    margin-top: 20px;

    /* border: 1px solid red; */

}

.row .right .xmsjul .xmsjli .figure{

    width: 160px;

    height: 160px;

    margin: 0 auto 18px;

}

.row .right .xmsjul .xmsjli .figure img{

    width: 160px;

    height: 160px;

}

.row .right .xmsjul .xmsjli h3{

    margin: 0 10px 2px;

    text-align: center;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

    font-size: 14px;

    font-weight: 400;

    color: #333;

}

.row .right .xmsjul .xmsjli .desc{

    margin: 0 10px 10px;

    height: 18px;

    font-size: 12px;

    color: #b0b0b0;

    text-align: center;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

}

.row .right .xmsjul .xmsjli .price{

    margin: 0 10px 14px;

    text-align: center;

    font-size: 14px;

}

.row .right .xmsjul .xmsjli .price span{

    color: #ff6700;

    font-size: 14px;

    padding-right: 10px;

}

.row .right .xmsjul .xmsjli .price del{

    color: #b0b0b0;

    font-size: 14px;

}

.box-hd1{

    width: 1226px;

    height: 58px;

    padding-top: 23px;

    margin: 0 auto;

    /* border: 1px solid red; */

    line-height: 58px;

}

.box-hd1 h2{

    font-size: 22px;

    font-weight: 200;

    line-height: 58px;

    color: #333;

    float: left;

}

.box-hd1 .more1{

    width: 90px;

    height: 58px;

    /* border: 1px solid red; */

    float: right;

}

.box-hd1 .more1 .i3{

    color: #ff6700;

}

.box-hd1 .more1 .i4{

    float: right;

}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布