最新小米商城（html+css）

最新推荐文章于 2024-07-25 02:11:29 发布

zhenryx

最新推荐文章于 2024-07-25 02:11:29 发布

阅读量618

点赞数 9

分类专栏： web前端文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_63324578/article/details/139888577

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

小米官网链接：小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站

注：仿设计小米商城是我学习html和css的练习并且用于js训练，有很多错误请多担待，代码仅实现基础的html和css 例如动画过渡效果不过于实现。需要整套源码的可以dd我~

首先我们先实现header和nav部分：

header部分：

html:

    <header>
        <div class="centerdiv">
            <ul class="header-l">
                <li><a href="#">小米商城</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">loT</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">天星科技</a></li>
                <li><a href="#">有品</a></li>
                <li><a href="#">小爱开放平台</a></li>
                <li><a href="#">企业团购</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li><a href="#">下载app</a></li>
                <li><a href="#">智能生活</a></li>
                <li><a href="#">Select Loca</a></li>
            </ul>
            <ul class="header-r">
                <li><a href="#">登陆</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
                <li class="cart"><a href="#"><i class="iconfont">&#xf0179;</i>购物车（0）</a>      
                    <div class="cart-list">
                        购物车中还没有商品，赶紧选购吧！
                    </div>
                </li>
            </ul>
          
        </div>
    </header>

css:

/* header开始 */
header{
    height: 40px;
    background-color: #333;
    line-height: 40px;
    width: 100%;
}
header li{
 float: left;
}
header a{
    color: #b0b0b0;
    font-size: 12px;
}
.header-l{
    float: left;
}
.header-r{
    float: right;
}
/* 给li标签前添加分隔“|”效果渲染 */
header li+li::before{
    content: "|";
    margin: 0px 6px;
    color: #424242;
}
/* 取消购物车（即最后一个li元素的伪元素效果） */
.header-r li:last-child::before{
    display: none;
}
header li:hover>a{
    color: #fff;
}
.cart{
    position: relative;
    width: 120px;
    height: 40px;
 background: #424242;
 margin-left: 20px; 
}
.cart:hover{
    background-color: #fff;
}
.cart:hover>a{
    color: #ff6700;
}
.cart-list{
    display: none;
    width: 316px;
    height: 100px;
    position: absolute;
    right: 0px;
    top: 40px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    background-color: #fff;
    line-height: 100px;
    font-size: 12px;
    z-index=10;
}
/* z-index=10 */
.cart:hover .cart-list{
    display: block;

}
/* header结束 */

问题说明1：

很多时候在设计中我们需要“|”进行分割样式，没有实际的意义，例如对li元素，而他所在的li元素仅是为了装饰，本是不应该被创建在文档内的。

这时候我们则可以利用::after和::before，这两个伪元素相当于是对当前元素的装潢，他们并不是节点，不会出现在dom树中，但是在显示上具备节点的效果。

nav部分：

html:

    <nav>
        <div class="centerdiv">
        <div class="milogo"></div>
       <div class="nav-bar">
        <ul>
            <li><a href="#">Xiaomi手机</a>
            <div class="nav-bar-list">
                <div class="centerdiv">
                    <ul>
                        <li>
                            <a href="#">
                           <img src="miimage/phone1.png" alt="">
                            </a>
                           <a href="">Xiaomi Civi2</a>
                           <p>2399元起</p>
                        </li>
                        <li> 
                            <a href="#">
                           <img src="miimage/phone2.png" alt="">
                            </a>
                            <a href="">Xiaomi Civi2</a>
                           <p>8999元起</p>
                        </li>
                        <li> 
                            <a href="#">
                           <img src="miimage/phone3.png" alt="">
                            </a>
                            <a href="">Xiaomi Civi2</a>
                           <p>5999元起</p>
                        </li>
                        <li> 
                            <a href="#">
                           <img src="miimage/phone4.png" alt="">
                            </a>
                            <a href="">Xiaomi Civi2</a>
                           <p>4699元起</p>
                        </li>
                        <li> 
                            <a href="#">
                           <img src="miimage/phone5.png" alt="">
                            </a>
                            <a href="">Xiaomi Civi2</a>
                           <p>3399元起</p>
                        </li>
                        <li> 
                            <a href="#">
                           <img src="miimage/phone6.png" alt="">
                            </a>
                            <a href="">Xiaomi Civi2</a>
                           <p>3999元起</p>
                        </li>
                    </ul>
                </div>
            </div></li>
            <li><a href="#">Redmi红米</a>
                <div class="nav-bar-list">
                    <div class="centerdiv">
                        <ul>
                            <li>
                                <a href="#">
                               <img src="miimage/rphone1.png" alt="">
                                </a>
                               <a href="">Redmi Note 12 5G</a>
                               <p>1199元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/rphone2.png" alt="">
                                </a>
                                <a href="">Redmi Note 12 Pro</a>
                               <p>1699元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/rphone3.png" alt="">
                                </a>
                                <a href="">Redmi Note 12 Pro+</a>
                               <p>2199元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/rphone4.png" alt="">
                                </a>
                                <a href="">Redmi K50 至尊版</a>
                               <p>2999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/rphone5.png" alt="">
                                </a>
                                <a href="">Redmi Note 11T Pro+</a>
                               <p>2099元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/rphone6.png" alt="">
                                </a>
                                <a href="">Redmi Note 11T Pro</a>
                               <p>1799元起</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a href="#">电视</a>
                <div class="nav-bar-list">
                    <div class="centerdiv">
                        <ul>
                            <li>
                                <a href="#">
                               <img src="miimage/tv1.png" alt="">
                                </a>
                               <a href="">Redmi智能电视X55 2022</a>
                               <p>2999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/tv2.png" alt="">
                                </a>
                                <a href="">Redmi智能电视X65 2022</a>
                               <p>2999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/tv3.png" alt="">
                                </a>
                                <a href="">小米电视6 65” OLED</a>
                               <p>6999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/tv4.png" alt="">
                                </a>
                                <a href="">小米电视 大师 77” OLED</a>
                               <p>19999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/tv5.png" alt="">
                                </a>
                                <a href="">小米透明电视</a>
                               <p>49999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/tv6.png" alt="">
                                </a>
                                <a href="">小米电视 大师 65英寸OLED</a>
                               <p>9999元起</p>
                            </li>
                        </ul>
                    </div>
                </div></li>
            <li><a href="#">笔记本</a>
                <div class="nav-bar-list">
                    <div class="centerdiv">
                        <ul>
                            <li>
                                <a href="#">
                               <img src="miimage/computer1.png" alt="">
                                </a>
                               <a href="">Xiaomi Book Air 13</a>
                               <p>5999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G 游戏本 锐龙版 R5</a>
                               <p>7299元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G Pro 游戏本 2022</a>
                               <p>8999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G Pro 游戏本 锐龙版 R7</a>
                               <p>8799元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer3.png" alt="">
                                </a>
                                <a href="">Xiaomi Book Pro 14 锐龙版</a>
                               <p>6399元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G 游戏本 2022</a>
                               <p>7499元起</p>
                            </li>
                        </ul>
                    </div>
                </div></li>
            <li><a href="#">平板</a>
                <div class="nav-bar-list">
                    <div class="centerdiv">
                        <ul>
                            <li>
                                <a href="#">
                               <img src="miimage/computer1.png" alt="">
                                </a>
                               <a href="">Xiaomi Book Air 13</a>
                               <p>5999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G 游戏本 锐龙版 R5</a>
                               <p>7299元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G Pro 游戏本 2022</a>
                               <p>8999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G Pro 游戏本 锐龙版 R7</a>
                               <p>8799元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer3.png" alt="">
                                </a>
                                <a href="">Xiaomi Book Pro 14 锐龙版</a>
                               <p>6399元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G 游戏本 2022</a>
                               <p>7499元起</p>
                            </li>
                        </ul>
                    </div>
                </div></li>
            <li><a href="#">家电</a>
                <div class="nav-bar-list">
                    <div class="centerdiv">
                        <ul>
                            <li>
                                <a href="#">
                               <img src="miimage/computer1.png" alt="">
                                </a>
                               <a href="">Xiaomi Book Air 13</a>
                               <p>5999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G 游戏本 锐龙版 R5</a>
                               <p>7299元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G Pro 游戏本 2022</a>
                               <p>8999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G Pro 游戏本 锐龙版 R7</a>
                               <p>8799元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer3.png" alt="">
                                </a>
                                <a href="">Xiaomi Book Pro 14 锐龙版</a>
                               <p>6399元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G 游戏本 2022</a>
                               <p>7499元起</p>
                            </li>
                        </ul>
                    </div>
                </div></li>
            <li><a href="#">路由器</a>
                <div class="nav-bar-list">
                    <div class="centerdiv">
                        <ul>
                            <li>
                                <a href="#">
                               <img src="miimage/computer1.png" alt="">
                                </a>
                               <a href="">Xiaomi Book Air 13</a>
                               <p>5999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G 游戏本 锐龙版 R5</a>
                               <p>7299元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G Pro 游戏本 2022</a>
                               <p>8999元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G Pro 游戏本 锐龙版 R7</a>
                               <p>8799元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer3.png" alt="">
                                </a>
                                <a href="">Xiaomi Book Pro 14 锐龙版</a>
                               <p>6399元起</p>
                            </li>
                            <li> 
                                <a href="#">
                               <img src="miimage/computer2.png" alt="">
                                </a>
                                <a href="">Redmi G 游戏本 2022</a>
                               <p>7499元起</p>
                            </li>
                        </ul>
                    </div>
                </div></li>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">社区</a></li>
        </ul>
       </div>
        <div class="search">
            <form action="">
                <input type="text" placeholder="电视">
                <button class="iconfont">&#xe62d;</button>
                <div class="hot-list">
                        <a href="#">手机换新</a>
                        <a href="#">空调</a>
                        <a href="#">Redmi K70 Pro</a>
                        <a href="#">洗衣机</a>
                        <a href="#">电视</a>
                        <a href="#">净水器</a>
                        <a href="#">扫地机器人</a>
                        <a href="#">笔记本电脑</a>
                    
                </div>
            </form>
        </div>
        </div>
    </nav>

css:

/* nav开始 */
 nav{
    width: 100%;
    height: 100px;
    position: relative;
}
.milogo{
    float: left;
    width: 56px;
    height: 56px;
    margin: 22px 142px 0px 0px;
    background-image: url(./images/logo-mi2.png);
    background-size: cover;
}
.nav-bar{
    float: left;
    width: 702px;
    height: 88px;
     padding: 12px 0px 0px 30px;
}
nav li{
    float: left;
}
.nav-bar>ul>li>a{
    padding: 26px 10px 38px;
    color: #333;
    display: block;
}
.nav-bar-list{
    display: none;
    position: absolute;
    width: 100%;
    height: 230px;
    box-shadow: 0 3px 4px rgba(0,0,0,0.18);
    left:0px;
    top:100px;
    background-color: #fff;
    z-index: 9;
    border-top: 1px solid #e0e0e0;
}
.nav-bar li:hover>.nav-bar-list{
    display: block;
}
nav img{
    width: 160px;
    height: 110px;
    margin-bottom: 15px;
}
.nav-bar-list li{
    width: 174px;
    height: 166px;
    padding: 35px 15px 0px;
    position: relative;
}
.nav-bar-list li+li::after{
    content: "";
    width: 1px;
    height: 100px;
    position: absolute;
    background-color:#e0e0e0;
    left: 0px;
    top:40px
}
.nav-bar-list a{
    color: #333;
    font-size: 12px;
    
}
.nav-bar-list p{
    color: #ff6700;
    font-size: 12px;
    margin-top: 5px;
}
.search{
    width: 296px;
    height: 50px;
    margin-top: 25px;
    float: left;
    position: relative;
}
.search input{
    float: left;
    width: 223px;
    height: 48px;
    padding: 0px 10px;
    border: 1px solid #e0e0e0;
    border-right: none;
    outline: none;
    transition: all .2s;
}
.search button{
    float: left;
    width: 52px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    transition: all .2s;
    position: absolute;
    right: 0px;
}
.search input:hover,.search input:hover+button{
    border-color:#b0b0b0;
}
.search input:focus,.search input:focus+button{
    border-color:#ff6700;
}
.search input:focus~.hot-list{
    display: block;

}
.search button:hover{
    background-color: #ff6700;
    border-color: #ff6700;
    color: #fff;
}
.hot-list{
    position: absolute;
    width:243px;
    height: 240px;
    border: 1px solid #ff6700;
    border-top: none;
    left: 0px;
    top:50px;
    display: none;
    background-color: #fff;
    z-index: 9;
}
.hot-list>a{
    display: block;
    color: #333;
    font-size: 12px;
    padding: 6px 15px;
    text-align: left;
    height: 18px;
}
.hot-list>a:hover{
    background-color: #e0e0e0;
}
/* nav结束 */

注意：在实现nav-bar-list我只是设置了前几个作为样例，后面为了方便设置为重复。

两部分结束，访设计效果展示如下：

first-plate部分：

html:

    <div class="first-plate centerdiv">
    <div class="centerdiv" id="banner">
<a href="#">
    <img src="miimage/change1.jpg" alt="">
</a>
    <div class="site-category">
        <ul>
            <li><a href="#">手机<i class="iconfont">&#xe646;
            </i></a>
            <div class="site-list">
              <ul>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
              </ul>
                <ul>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                </ul>
                <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
            </div></li>
            <li><a href="#">电视<i class="iconfont">&#xe646;
            </i></a><div class="site-list">
                <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                </ul>
                  <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
                    <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
              </div></li>
            <li><a href="#">家电<i class="iconfont">&#xe646;
            </i></a><div class="site-list">
                <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                </ul>
                  <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
                    <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
              </div></li>
            <li><a href="#">笔记本 平板<i class="iconfont">&#xe646;
            </i></a><div class="site-list">
                <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                </ul>
                  <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
                    <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
              </div></li>
            <li><a href="#">出行 穿戴<i class="iconfont">&#xe646;
            </i></a><div class="site-list">
                <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                </ul>
                  <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
                    <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
              </div></li>
            <li><a href="#">耳机 音响<i class="iconfont">&#xe646;
            </i></a><div class="site-list">
                <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                </ul>
                  <ul>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
                    <ul>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                      <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    </ul>
              </div></li>
            <li><a href="#">健康 儿童<i class="iconfont">&#xe646;
            </i></a>
            <div class="site-list">
              <ul>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
              </ul>
                <ul>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                </ul>
                <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
            </div></li>
            <li><a href="#">生活 箱包<i class="iconfont">&#xe646;
            </i></a><div class="site-list">
                <ul>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                </ul>
                <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
            </div></li>
            <li><a href="#">智能 路由器<i class="iconfont">&#xe646;
            </i></a><div class="site-list">

                <ul>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                </ul>
                <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
            </div></li>
            <li><a href="#">电源 配件<i class="iconfont">&#xe646;
            </i></a><div class="site-list">
                <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                    <li><a href="#"><img src="miimage/phone2.png"><span>Redmi红米 pro</span></a></li>
                  </ul>
            </div></li>
        </ul>
    </div>
    </div>
    <div class="centerdiv" >
        <div class="ad">
        <div class="span6">
            <ul>
                <li><a href=""><i class="iconfont">&#xe662;
                </i><p>小米秒杀</p></a></li>
                <li><a href=""><i class="iconfont">&#xe78e;
                </i><p>企业团购</p></a></li>
                <li><a href=""><i class="iconfont">&#xe503;
                </i><p>F码通道</p></a></li>
                <li><a href=""><i class="iconfont">&#xe505;
                </i><p>米粉卡</p></a></li>
                <li><a href=""><i class="iconfont">&#xe605;
                </i><p>以旧换新</p></a></li>
                <li><a href=""><i class="iconfont">&#xe502;
                </i><p>话费充值</p></a></li>
            </ul>
        </div>
        <div class="ad-img">
            <a href=""><img src="miimage/ad1.jpg" alt=""></a>
            <a href=""><img src="miimage/ad2.jpg" alt=""></a>
            <a href=""><img src="miimage/ad3.jpg" alt=""></a>
        </div>
    </div>
    </div>
    <h2>小米闪购</h2>
    <div class="iflashbuy">
        <ul>
            <li class="flash1">
                <div><img src="miimage/flashpurchase.png"><span>暂无闪购活动</span></div>
            </li>
            <li class="flash2">
                <div></div>
            </li>
            <li class="flash3">
                <div></div>
            </li>
            <li class="flash4">
                <div ></div>
            </li>
            <li class="flash5">
                <div></div>
            </li>
        </ul>
    </div>
    <a href=""><div class="last-ad">
    </div></a>
    </div>

css:

/* first-plate开始 */
/* banner开始 */
#banner{
    position: relative;
}
#banner img{
    background-size: cover;
    height: 460px;
}
.site-category{
    width: 234px;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: absolute;
    left: 0px;
    top: 0px;
}
.site-category>ul{
    padding: 20px 0px;
}
.site-category>ul>li{
    text-align: left;
}
.site-category>ul>li>a{
    display: block;
    padding-left: 30px;
    color:#fff;
    width: 204px;
    height: 42px;
    line-height: 42px;
}
.site-category>ul>li:hover{
    background-color: #ff6700;
}
.site-category i{
    position: absolute;
    right: 20px;
}
.site-list{
    height:458px;
    background-color:#fff;
    position: absolute;
    left: 234px;
    top: 0px;
    border: 1px solid #e0e0e0;
    border-left: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    padding-top: 2px;
    display: flex;
}
.site-category li:hover .site-list ul{
    display:block;
}
 .site-list ul{
    width: 248px;
    height:458px;
    display: none;
    
 }
 .site-list li{
    width: 100%;
    height: 76px;
 }
 .site-list>ul>li>a{
    padding: 18px 20px;
    line-height: 40px;
    display: block;
 }
 .site-list img{
    width: 40px;
    height: 40px !important;
    padding-right: 12px;
 }
 .site-list span{
font-size: 14px;
color: #333;
 }
/* banner结束*/
/* ad开始 */
.ad{
    margin-top: 14px;
    overflow: hidden;
}
.span6{
    width: 234px;
    float: left;
    height: 170px;
    background-color: #5f5750;
}
.span6 li{
  width: 70px;
  height: 82px;
  float: left;
  padding: 0px 3px;
  position: relative;
}
.span6 a{
    padding: 18px 0px 0px;
    width: 70px;
    height: 64px;
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}
.span6 i{
    margin-bottom: 4px;
    display: block;
    font-size: 24px;
}
.ad-img{
    display: flex;
    width: 980px;
    height: 170px;
}
.ad-img img{
    height: 170px;
    margin-left: 15px;
}
/* 前三个元素生效 */
.span6 li:nth-child(-n+3)::after,.span6 li::before{
    content: "";
    height: 1px;
    width: 64px;
    background-color:#665e57;
    display: block;
    position: absolute;
    left: 9px;
}
.span6 li::before{
    height:74px;
    width: 1px;
    top: 6px;
    left: 0px;
}
.span6 li:nth-child(1)::before,.span6 li:nth-child(4)::before{
    display: none;
}
/* ad结束 */
.first-plate{
    padding-bottom: 40px;
}
.first-plate h2{
    font-size: 22px;
    color: #333;
    font-weight: 200;
    line-height: 58px;
    text-align: left;
    margin-top: 20px;
}
.iflashbuy>ul{
    display: flex;
}
.iflashbuy li{
    margin-right: 14px;
    padding: 60px 0px 0px;
    border-top-width:1px;
    border-top-style: solid;
    background: #f1eded;
    text-align: center;
}
.iflashbuy div{
    width: 234px;
    height: 300px;
    background: rgba(0, 0, 0, 0.02);
}
.iflashbuy span{
    display: block;
    color: rgba(0, 0, 0, 0.54);
    font-size: 15px;
}
.flash1{
    border-color:#e53935;
}
.iflashbuy img{
    padding: 25px 0px;
}
.flash2{
    border-color:#3564e5;
}
.flash3{
    border-color:#3ee535;
}
.flash4{
    border-color:#ad35e5;
}
.flash5{
    border-color:#e5d635;
}
.last-ad{
    margin-top:40px;
    background-image: url(miimage/ad4.jpg);
    background-size: cover;
    width: 100%;
    height: 120px;
}
/* first-plate结束 */

问题1：

.span6 li:nth-child(-n+3)::after,.span6 li::before{

content: "";

height: 1px;

width: 64px;

background-color:#665e57;

display: block;

position: absolute;

left: 9px;

}

.span6 li::before{

height:74px;

width: 1px;

top: 6px;

left: 0px;

}

.span6 li:nth-child(1)::before,.span6 li:nth-child(4)::before{

display: none;

}

这一部分是因为有时候利用伪元素渲染效果需要选择性使用
nth-child(4){
第4个元素
}

偶数位置的元素
nth-child(2n){
偶数位置的元素
}

奇数位置的元素
nth-child(2n+1){
奇数位置的元素
}
nth-child(-n+3){ 选取前三个元素生效} 因为例如本实例有六个元素（0-5）选择第四个元素-3+3=0 无效选择

这一部分静态效果很简单直接上仿效果图：

second-plate部分：

html:

    <div class="second-plate">
        <div class="centerdiv">
            <div class="phone-part centerdiv">
         <h2 class="title">手机
            <a class="seek-more" href="">查看全部<i class="iconfont">&#xe658;</i></a></h2>
        <div class="box-aside">
            <a href="#">
                <img src="miimage/box-phone-aside.jpg">
            </a>
        </div>
        <div class="box-pright">
            <ul>
                <li>
                    <div class="new-good flag">新品</div>
                    <div class="pright-p"><a href=""><img src="miimage/box-p1.jpg" alt=""></a></div>
                    <h3 class=" title3"><a href="">小米9 6GB+128GB</a></h3>
                    <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="price"><span class="new-p">2599元</span> <span class="del-p">2999元</span></p>

                </li>
                <li>
                    <div class="pright-p"><a href=""><img src="miimage/box-p1.jpg" alt=""></a></div>
                    <h3 class=" title3"><a href="">小米9 6GB+128GB</a></h3>
                    <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="price"><span class="new-p">2599元</span> <span class="del-p">2999元</span></p>

                </li>
                <li>
        
                    <div class="pright-p"><a href=""><img src="miimage/box-p1.jpg" alt=""></a></div>
                    <h3 class=" title3"><a href="">小米9 6GB+128GB</a></h3>
                    <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="price"><span class="new-p">2599元</span> <span class="del-p">2999元</span></p>

                </li>
                <li>
                    <div class="pright-p"><a href=""><img src="miimage/box-p1.jpg" alt=""></a></div>
                    <h3 class=" title3"><a href="">小米9 6GB+128GB</a></h3>
                    <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="price"><span class="new-p">2599元</span> <span class="del-p">2999元</span></p>

                </li>
                <li>
                    <div class="pright-p"><a href=""><img src="miimage/box-p1.jpg" alt=""></a></div>
                    <h3 class=" title3"><a href="">小米9 6GB+128GB</a></h3>
                    <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="price"><span class="new-p">2599元</span> <span class="del-p">2999元</span></p>

                </li>
                <li>
                    <div class="cut-price flag">减200元</div>
                    <div class="pright-p"><a href=""><img src="miimage/box-p1.jpg" alt=""></a></div>
                    <h3 class=" title3"><a href="">小米9 6GB+128GB</a></h3>
                    <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="price"><span class="new-p">2599元</span> <span class="del-p">2999元</span></p>

                </li>
                <li>
                    <div class="pright-p"><a href=""><img src="miimage/box-p1.jpg" alt=""></a></div>
                    <h3 class=" title3"><a href="">小米9 6GB+128GB</a></h3>
                    <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="price"><span class="new-p">2599元</span> <span class="del-p">2999元</span></p>
                </li>
                <li>
                    <div class="pright-p"><a href=""><img src="miimage/box-p1.jpg" alt=""></a></div>
                    <h3 class=" title3"><a href="">小米9 6GB+128GB</a></h3>
                    <p class="desc">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="price"><span class="new-p">2599元</span> <span class="del-p">2999元</span></p>

                </li>
            </ul>
        </div>
             </div>
             <div class="last-ad">
                <a href=""><img src="miimage/ad5.jpg"></a>
             </div>
            </div>
</div>

css:

/* second-plate开始 */
.second-plate{
    background-color: #f5f5f5;
    padding-top: 22px;
}
.seek-more{
    float: right;
    font-size: 16px;
    color: #424242;
}
.seek-more i{
    padding: 4px;
    margin-left: 8px;
    font-size: 16px;
    color: #b0b0b0;
}
.seek-more:hover,.seek-more:hover i{
    color:#ff6700;
}
.phone-part{
    height: 686px;
    margin-bottom: 8px;
}
.box-aside{
    float: left;
    width: 234px;
    height: 614px;
}
.box-aside img{
   height: 614px;
}
.box-pright{
    width: 992px;
    height: 614px;
    float: left;
}
.box-pright li{
    margin-left: 14px;
    margin-bottom: 14px;
    height: 260px;
    padding: 20px 0;
    width: 234px;
    float: left;
    background-color: #fff;
    position: relative;
}
.flag{
    position: absolute;
    top: 0;
    left: 50%;
    width: 64px;
    height: 20px;
    margin-left: -32px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: #fff;
}
.new-good{
    background-color: #83c44e;
}
.cut-price{
    background-color: #e53935;
}
.pright-p{
    width: 160px;
    height: 160px;
    width: 234px;
    margin: 0 auto 18px;
}
.pright-p img{
    height: 160px;
}
.title3{
    margin: 0 10px 2px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}
.title3 a{
    color: #333;
}
.desc{
    margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    text-align: center;
    color: #b0b0b0;
}
.price{
    margin: 0 10px 14px;
    font-size: 14px;
}
.new-p{
    color: #ff6700;
}
.del-p{
    color: #b0b0b0;
   text-decoration: line-through;
}
.box-aside,.box-pright li{
    transition: all .2s linear;
}
.box-aside:hover,.box-pright li:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
/* second-plate结束 */

仿效果图:

其他部分的实现大差不差我就感兴趣的自己练手尝试吧这里我直接跳到视频部分

video-plate部分

html:

             <div class="video-plate">
                <h3 class="title">视频 <a class="seek-more" href="">查看全部
                    <i class="iconfont">&#xe658;</i></a></h3>
                <div class="video-list">
                    <ul>
                        <li>
                            <div><a href="miimage/video1.mp4"><img src="miimage/videoimg1.png">
                            <span class="play"><i class="iconfont">&#xed10;</i></span></a></div>
                        <h3 class="title3"><a href="miimage/video1.mp4">小米CC9</a></h3>
                        <p class="desc">深蓝星球</p>
                        </li>
                        <li>
                            <div><a href="miimage/video2.mp4"><img src="miimage/videoimg2.png">
                                <span class="play"><i class="iconfont">&#xed10;</i></span></a></div>
                                <h3 class="title3"><a href="miimage/video1.mp4">Redmi Note 7系列</a></h3>
                                <p class="desc">镜花水月</p>
                        </li>
                        <li>
                            <div><a href="miimage/video3.mp4"><img src="miimage/videoimg3.jpg" >
                                <span class="play"><i class="iconfont">&#xed10;</i></span></a></div>
                                <h3 class="title3"><a href="miimage/video1.mp4">黑鲨游戏手机2 Pro</a></h3>
                                <p class="desc">指尖主宰 新品发布会</p>
                        </li>
                        <li>
                            <div><a href="miimage/video1.mp4"><img src="miimage/videoimg4.jpg" >
                                <span class="play"><i class="iconfont">&#xed10;</i></span></a></div>
                                <h3 class="title3"><a href="miimage/video1.mp4">小米手环4</a></h3>
                                <p class="desc">改变从今开始</p>
                        </li>
                    </ul>
                </div>
            </div>

css:

/* video-plate开始 */
.video-list{
    width: 1240px;
    height: 285px;
}
.video-list li{
    position: relative;
    float: left;
    width: 296px;
    height: 285px;
    margin-right: 14px;
    margin-bottom: 14px;
    text-align: center;
    background: #fff;
    transition: all .1s linear;
}
.video-list li:hover{
    transform: translate3d(0,-2px,0);
    box-shadow: 0px 15px 30px rgba(0,0,0,.1);
}
.video-list div{
    position: relative;
    width: 296px;
    height: 180px;
    margin: 0 0 28px;
}
.video-list img{
    width: 296px;
    height: 180px;
}
.play{
    width: 32px;
    height: 20px;
    border: 2px solid #fff;
    position: absolute;
    left: 20px;
    bottom: 10px;
    border-radius: 12px;
}
.play i{
    color: #fff;
    line-height: 20px;
}
.play:hover{
    background-color: #ff6700;
    border: 2px solid #ff6700;
}
.video-list .title3{
    margin-bottom: 6px;
}
/* video-plate结束 */

footer开始：

html:

    <footer>
        <div class="centerdiv">
            <div class="service-tools">
                <ul>
                    <li><a href="#"><i class="iconfont">&#xe62e;</i>预约维修服务</a></li>
                    <li><a href="#"><i class="iconfont">&#xe67d;</i>七天无理由退货</a></li>
                    <li><a href="#"><i class="iconfont">&#xe501;</i>15天免费换货</a></li>
                    <li><a href="#"><i class="iconfont">&#xe78e;
                    </i>满69包邮</a></li>
                    <li><a href="#"><i class="iconfont">&#xe62f;
                    </i>520余家售后网点</a></li>
                </ul>
            </div>
            <hr/>
            <div class="footer-link">
                <dl>
                    <dt>帮助中心
                        <dd><a href="">账户管理</a></dd>
                        <dd><a href="">购物指南</a></dd>
                        <dd><a href="">订单操作</a></dd>
                    </dt>
                </dl>
                <dl>
                    <dt>服务支持
                        <dd><a href="">售后政策</a></dd>
                        <dd><a href="">自助服务</a></dd>
                        <dd><a href="">相关下载</a></dd>
                    </dt>
                </dl>
                <dl>
                    <dt>服务支持
                        <dd><a href="">售后政策</a></dd>
                        <dd><a href="">自助服务</a></dd>
                        <dd><a href="">相关下载</a></dd>
                    </dt>
                </dl>
                <dl>
                    <dt>服务支持
                        <dd><a href="">售后政策</a></dd>
                        <dd><a href="">自助服务</a></dd>
                        <dd><a href="">相关下载</a></dd>
                    </dt>
                </dl>
                <dl>
                    <dt>服务支持
                        <dd><a href="">售后政策</a></dd>
                        <dd><a href="">自助服务</a></dd>
                        <dd><a href="">相关下载</a></dd>
                        <dd><a href="">廉洁举报</a></dd>
                    </dt>
                </dl>
                <dl>
                    <dt>服务支持
                        <dd><a href="">售后政策</a></dd>
                        <dd><a href="">自助服务</a></dd>
                        <dd><a href="">相关下载</a></dd>
                    </dt>
                </dl>
                <div class="chat">
                    <p class="chat-phone">400-100-5678</p>
                    <p class="phone-time">9:00-18:00（仅收市话费）</p>
                    <a href=""><button class="man">人工客服</button></a>
                    <div class="follow">关注小米：
                        <a href=""><i class="iconfont">&#xf01af;</i></a> 
                         <a href="" class="wx-qrcode"><i class="iconfont">&#xf0106;</i></a>
                         <img src="miimage/wbqrocde-img.png">
                    </div>
                </div>
            </div>
        </div>
    </footer>

css:

/* footer开始 */
footer{
    width: 100%;
    margin-top: ;
}
.service-tools{
    height: 25px;
    padding: 27px 0px;
}
.service-tools li{
float: left;
    width: 19.8%;
    height: 25px;
    border-left: 1px solid #e0e0e0;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
}
.service-tools li:first-child{
        border-left: none;
    }
.service-tools i{
margin-right: 6px;
font-size: 24px;
    }
.service-tools a{
color: #616161;
text-align: center;
    }
footer hr{
border: 0px;
background-color: #e0e0e0;
height: 1px;
}
.footer-link{
    padding: 40px 0px;
}
.footer-link:after{
    content: "";
    display: block;
    clear: both;
}
.footer-link dl{
    width: 160px;
    height: 112px;
    float: left;
}
.footer-link dt{
    margin: -1px 0 26px;
    font-size: 14px;
    line-height: 1.25;
    color: #424242;
}
.footer-link dd{
    margin: 10px 0 0;
    font-size: 12px;
}
.footer-link dd>a{
    color: #757575;
}
.chat{
    float: right;
    width: 251px;
    height: 112px;
    border-left: 1px solid #e0e0e0;
    text-align: center;
    color: #616161;
}
.chat-phone{
    margin: 0 0 5px;
    font-size: 22px;
    color: #ff6700;
}
.phone-time{
    margin: 0 0 16px;
    font-size: 12px;
}
.man{
    width: 118px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    border: 1px solid #ff6700;
    background-color: #fff;
    color: #ff6700;
}
.man:hover{
    background-color: #ff6700;
    color: #fff;
}
.follow{
    font-size: 12px;
    margin-top: 10px;
    position: relative;
}
.follow a{
    width: 24px;
    height: 24px;
    color: #333;
    margin-right:5px;
}
.follow a:hover{
    color: #ff6700;
}
.follow img{
    display: none;
    width: 126px;
    height: 126px;
    position: absolute;
    top:17.6px;
    left:100px
}
.wx-qrcode:hover+img{
    display: block;
}
.footer-other{
    height: 187px;
    background-color: #fafafa;

}
/* footer结束 */

总结:css部分简单但是重复，设计之前应该做规划再实现。

zhenryx

关注

9
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
最新小米商城（html+css）

这时候我们则可以利用::after和::before，这两个伪元素相当于是对当前元素的装潢，他们并不是节点，不会出现在dom树中，但是在显示上具备节点的效果。很多时候在设计中我们需要“|”进行分割样式，没有实际的意义，例如对li元素，而他所在的li元素仅是为了装饰，本是不应该被创建在文档内的。nth-child(-n+3){ 选取前三个元素生效} 因为例如本实例有六个元素（0-5）选择第四个元素-3+3=0 无效选择。注意：在实现nav-bar-list我只是设置了前几个作为样例，后面为了方便设置为重复。
复制链接

扫一扫