仿写小米案例过程中遇到的问题及解决方法

最新推荐文章于 2023-12-08 09:34:35 发布

pijrix

最新推荐文章于 2023-12-08 09:34:35 发布

阅读量342

点赞数

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

本文链接：https://blog.csdn.net/pijrix/article/details/126661692

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

成品

一、top-bar区域

1.要使元素水平布局且左右分布中间留下一部分空白

display:flex;
justify-content:space-between

2.外边距为margin 盒子与内容之间的距离为padding内边距

3.阴影样式的设置

box-shadow: 0 0 3px rgb(90, 90, 90, .6)

第一个参数：向右偏移
第二个参数：向下偏移 
第三个参数：羽化值 
最后写颜色 颜色rgb中  . 6 为透明度的设置 取值范围为0~1之间

4.如果有四个元素只想选中前3个元素

可以给最后一个元素添加class类名然后在选择器选择的时候使用not

.top-bar .container .right-nav li:not(.shop-car) a:hover

5.如果想隐藏一个div 例如案例中对于二维码的隐藏（或者是对于购物车样式的隐藏）

先在正常样式中写： height:0 将行高设置为0 就不显示

overflow:hodden

再使用hover当鼠标滑过的时候给出高度例如 height:100px

6.对于小三角的制作（例如在案例中展示下载二维码的上面有一个小三角指引）

①使用伪选择器

.top-bar .left-nav li .pos-r::after

②

    content: "";
    opacity: 0;
    position: absolute;
    border: 10px solid transparent;

content属性只能用在：：before和：：after上面

•       content可以包裹各种字符串：小箭头 各种编码等



•       content可以实现类似加载中的效果
            .demo:after{
            animation: dot 1.6s linear both;
                    }
            @keyframe dot{
            0%{ content: "." }
            33%{ content: ".." }
            66%{ content: "..." }
            100%{ content: "." }
                }
还可以插入图片 例如 content:url("这里放网址")

opacity指透明度 取值范围为0~1  在这里定为0

③设置边框

  border: 10px solid transparent;
  border-bottom-color: wheat;

④ 最后再使用hover把opacity改成1即可

7.鼠标滑过不能显示整块区域

是选择器的问题应改为 .....li.shop-car不能分开写

二、在site-header区域

1.插入一个背景图片如小米logo的插入在css样式中使用

background:url("这里放网址")no-repeat center/cover

no-repeat是指不平铺

center指居中

cover指图片比例不变，把背景图片放大到适合元素容器的尺寸，超出容器的部分可能会裁掉；

2.输入框input的使用

 <form>
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
 </form>

①为什么input要包裹form ？

把表单中的数据提交到服务器就需要<form>，form有action="数据提交到哪里(index.php)"，method="提交方法(get/post)"

不需要提交的数据可以不用form

②text-indent: 15px;

text-indent表示输入的文字与输入框左侧的距离避免文字紧贴输入框

③如何同时改变两个input的属性：使用~进行联动

.site-header .header-search form > input[name="keyword"]:hover~input[type="submit"]

3.focus用法：outline用法为去除浏览器默认样式

三、在banner区域

①先使用 <input type="radio" name="change" id="c2"> 设置c1, c2, c3, c4 实现单选要使用相同的name

②使用label <label for="c1"></label>进行捆绑（刚开始看不到具体内容可以先加入1234的数字确定其位置在后续的样式设定好之后删除）
.change-labels{
    position: absolute;
    bottom: 30px;
    right: 30px;
}放在右下角 
 
③使用
先给一个边框
border: 1px solid rgb(90, 90, 90)
再使用border-radius变成圆点

2.将四张图片放在一起进行堆叠

1.设置图片的大小以及position

.banner .banner-img img{
    position: absolute;
    width: 1226px;
    height: 460px;
    opacity: 0;
}


2.然后将四个点固定在右下角

.change-labels{
    position: absolute;
    bottom: 30px;
    right: 30px
}

.change-labels label{
    float: left;
    width: 12px;
    height: 12px;
    border: 2px solid rgb(90, 90, 90);
    margin: 5px 4px;
    border-radius: 6px;
}

3.将左上角的选择项隐藏

display:none;

4.实现点中每个按钮与图片的绑定

.banner input:nth-child(1):checked ~ .banner-img img:nth-child(1){
    opacity: 1;
}分别设置1234即可

5.实现点击按钮 按钮变色

.banner input:nth-child(1):checked ~.banner-img label:nth-child(1){
    background-color: rgb(69, 69, 69);
}

3.在菜单的显示中为了使排列整齐不出现乱序

需要在这些div外面加一个div进行包裹

4.滑过显示

隐藏可以使用 display:none到 display：flex

5.实现自动换行

例如案例中的下方左边导航栏 --保障服务

display: flex;

flex-wrap: wrap; wrap指自动换行

四、在main区域

1.如何实现...的显示

  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

2.如何解决不水平排列的问题

html框架问题左边图片和右边的图片列表是两个区域应分别包裹div

源码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
</head>

<link rel="stylesheet" href="new-style.css">
<link rel="stylesheet" href="site-header.css">
<link rel="stylesheet" href="top-bar.css">
<link rel="stylesheet" href="banner.css">
<link rel="stylesheet" href="publicx.css">
<link rel="stylesheet" href="main.css">

<body>
<!--上方的黑色条框-->
<div class="top-bar">
    <div class="container">
<!--        左边的导航栏-->
        <ul class="left-nav">
            <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="#">小米官网</a></li>
            <li><a href="#">小米官网</a></li>
            <li><a href="#">小米官网</a></li>
            <li><a href="#">小米官网</a></li>
            <li><a href="#">小米官网</a></li>
<!--            <li class="pos-r">-->
<!--                <a href="#">小惊喜</a>-->
<!--                <div class="download">-->
<!--                    <img src="9.png" alt="">-->
<!--                </div>-->
<!--            </li>-->
            <li class="pos-r">
                <a href="#">点开有惊喜</a>
                <div class="download">
                    <img src="9.png" alt="快去找本人付款吧~" >
                    <p>都点开了 怎么还不付款</p>
                </div>
            </li>

        </ul>
<!--        右边的导航栏-->
        <ul class="right-nav">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
            <li class="shop-car pos-r">
                <a href="#">购物车</a>
                <div class="show-details">
                    购物车中还没有商品，赶紧选购吧~
                </div>
            </li>
        </ul>


    </div>
</div>

<div class="site-header">
    <div class="container">
<!--        左边区域-->
        <h1 class="logo"></h1>

        <ul class="header-nav">
            <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="#">社区</a></li>
        </ul>


<!--        右边区域-->
        <div class="header-search">
            <form>
                <input type="text" name="keyword">
                <input type="submit" value="搜索">
            </form>
        </div>
    </div>
</div>

<div class="banner">
    <div class="container">
        <input type="radio" name="change" id="c1" checked>
        <input type="radio" name="change" id="c2">
        <input type="radio" name="change" id="c3">
        <input type="radio" name="change" id="c4">

        <div class="banner-img pos-r">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/71139db54251442981e61cb1064152fc.jpg?w=2452&amp;h=920" alt="" >
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fb9e3201ac236e7d93d98d80cd56f185.jpg?thumb=1&w=1839&h=690&f=webp&q=90" alt="加载失败">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d5bcaeb5b2c0d8853a1f26036951364c.jpg?thumb=1&w=1839&h=690&f=webp&q=90" alt="加载失败">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/485756314f3e3f870d298db61339b891.jpg?thumb=1&w=1839&h=690&f=webp&q=90" alt="加载失败">
<!--            绑定小圆点和1234-->
            <div class="change-labels">
                <label for="c1"></label>
                <label for="c2"></label>
                <label for="c3"></label>
                <label for="c4"></label>

        </div>
<!--               -->
            <ul class="banner-menu">
                <li>
                    <span>手机</span>
                    <div class="sub-menu pos-r">
                        <div><div class="sub-child-list">
                            <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>


                        </div>
                        <div class="sub-child-list">
                            <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>


                        </div>
                        <div class="sub-child-list">
                            <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>


                        </div>

                        <div class="sub-child-list">
                            <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>


                        </div>

                        <div class="sub-child-list">
                            <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>

                             <a href="#">
                                <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52ef2b0a20fdb016f11d717e63f460db.png?thumb=1&w=60&h=60&f=webp&q=90" alt="">
                                <span>小米手机</span>
                            </a>


                        </div>

                    </div>

                    </div>

                </li>
                <li><span>手机</span></li>
                <li><span>手机</span></li>
                <li><span>手机</span></li>
                <li><span>手机</span></li>
                <li><span>手机</span></li>
                <li><span>手机</span></li>
                <li><span>手机</span></li>
                <li><span>手机</span></li>

            </ul>
    </div>

        <div class="sub-banner-goods">
           <div class="banner-goods-nav">
                <a href="">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
                    <p>保障服务</p>
                </a>

                <a href="">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
                    <p>保障服务</p>
                </a>

                <a href="">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
                    <p>保障服务</p>
                </a>

                <a href="">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
                    <p>保障服务</p>
                </a>

                <a href="">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
                    <p>保障服务</p>
                </a>

                <a href="">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
                    <p>保障服务</p>
                </a>
            </div>

            <div class="banner-goods-pic">
                <ul>
                    <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32a62196b9af47752c96e7a50c86417c.jpg?w=632&h=340" alt="">
                        </a>
                    </li>
                     <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32a62196b9af47752c96e7a50c86417c.jpg?w=632&h=340" alt="">
                        </a>
                    </li>
                     <li>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32a62196b9af47752c96e7a50c86417c.jpg?w=632&h=340" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>





</div>

</div>


<div class="main">
    <div class="container">
        <div class="introduce-img">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/33973edd8c6c8177f8431daf679e8eb5.jpg?thumb=1&w=1839&h=180&f=webp&q=90" alt="">

        </div>
        
        <div class="introduce-title">
            <h3 class="left">
                手机
            </h3>
            <div class="right">
                <a href="#">
                    查看全部>>>
                </a>
            </div>
            
        </div>
                <div class="goods-img">
                    <div class="big-img">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fef86f3a976842446ec7c3f315cf253f.jpg?thumb=1&w=351&h=921&f=webp&q=90" alt="">
                        </a>
                     </div>
                        
                <ul class="img-list">
                    <li>

                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                        <h4>小米折叠手机</h4>
                        <p>
                            超轻薄折叠机身设计，小米自研微水滴形态转轴
                        </p>
                        <p class="price">8999元起</p>
                    </li>
                    <li>

                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                        <h4>小米折叠手机</h4>
                        <p>
                            超轻薄折叠机身设计，小米自研微水滴形态转轴
                        </p>
                        <p class="price">8999元起</p>
                    </li>
                    <li>

                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                        <h4>小米折叠手机</h4>
                        <p>
                            超轻薄折叠机身设计，小米自研微水滴形态转轴
                        </p>
                        <p class="price">8999元起</p>
                    </li>
                    <li>

                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                        <h4>小米折叠手机</h4>
                        <p>
                            超轻薄折叠机身设计，小米自研微水滴形态转轴
                        </p>
                        <p class="price">8999元起</p>
                    </li>
                    <li>

                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                        <h4>小米折叠手机</h4>
                        <p>
                            超轻薄折叠机身设计，小米自研微水滴形态转轴
                        </p>
                        <p class="price">8999元起</p>
                    </li>
                    <li>

                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                        <h4>小米折叠手机</h4>
                        <p>
                            超轻薄折叠机身设计，小米自研微水滴形态转轴
                        </p>
                        <p class="price">8999元起</p>
                    </li>
                    <li>

                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                        <h4>小米折叠手机</h4>
                        <p>
                            超轻薄折叠机身设计，小米自研微水滴形态转轴
                        </p>
                        <p class="price">8999元起</p>
                    </li>
                    <li>

                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
                        <h4>小米折叠手机</h4>
                        <p>
                            超轻薄折叠机身设计，小米自研微水滴形态转轴
                        </p>
                        <p class="price">8999元起</p>
                    </li>
                </ul>        
                    </div>
                </div>

</div>


</body>
</html>

css样式

top-bar区域

body{
    font-family: 隶书;
    bottom: 30px;
}
/*设置黑色背景条*/
.top-bar{
    height: 40px;
    line-height: 40px;
    background-color:#2d2828 ;
}
/*设置左右布局*/
.top-bar .container{
    display: flex;
    justify-content: space-between;
}


/*设置左边的布局*/
.top-bar .container .left-nav{
    display: flex;
}
/*设置字体颜色以及分隔开 以及边框*/
.top-bar .container .left-nav li a{
    font-size: 12px;
    color: #b0b0b0;
    padding: 0 8px;
    border-right: 1px solid #424242;
}
/*左边的第一个元素边距为0*/
.top-bar .container .left-nav li:first-child a{
    padding-left: 40px;
}
/*左边最后一个元素不设置边框 以及 右边距为0*/
.top-bar .container .left-nav li:last-child a{
    border: none;
    padding-right: 0;
}
/*当鼠标滑过时候 字体变色*/
.top-bar .left-nav li a:hover{
    color: white;
}


/*设置右边的布局*/
.top-bar .container .right-nav{
    display: flex;
}
/*设置右边导航栏的字体、颜色、内边距*/
.top-bar .container .right-nav li a{
    font-size: 12px;
    color: #b0b0b0;
    padding: 0 8px;
}
/*设置右边导航栏的第一个元素和第二个元素的边框*/
.top-bar .right-nav li:nth-child(1) a,
.top-bar .right-nav li:nth-child(2) a{
    border-right: 1px solid #424242;
}
/*设置右边导航栏的最后一个元素的边框以及内边距*/
.top-bar .container .right-nav li:last-child a{
    border: none;
    padding-right: 50px;
}
/*设置出了购物车的其他的元素 当鼠标滑过的时候的样式*/
.top-bar .container .right-nav li:not(.shop-car) a:hover{
    color: white;
}


.top-bar .right-nav li.shop-car a:hover{
    background-color:white;
    color: #ff6700;
    text-decoration: none;

}

.top-bar .right-nav li.shop-car > a{
    z-index: 5;
    display: inline-block;
    color: #b0b0b0;
    background-color: #424242;
    text-align: center;

}

.top-bar .right-nav li.shop-car .show-details{
    z-index: 3;
    position: absolute;
    top: 40px;
    right: 0;
    text-align: center;
    line-height: 100px;
    height: 0;
    width: 316px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 3px #CCCCCC;
}
.top-bar .right-nav li.shop-car:hover .show-details{

    height: 100px;
}

.download img{
    display: block;
    height: 300px;
    width: 200px;
    margin: 20px auto 0;
}

.download{
    position: absolute;
    width: 200px;
    height: 0;
    overflow: hidden;
    box-shadow:  0 0 3px #CCCCCC;
    background: #fff;
    text-align: center;
    top: 40px;
    left: -55px;
}

.top-bar .left-nav li.pos-r:hover .download{
    z-index: 5;
    height: 350px;
}
/*小三角的制作*/
.top-bar .left-nav > li.pos-r:after{
    content: "";
    opacity: 0;
    position: absolute;
    border: 10px solid transparent;
    border-bottom-color: wheat;
    top: 20px;
    left: 30px;
}

.top-bar .left-nav > li.pos-r:hover:after{
    opacity: 1;
}

site-header区域

.site-header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.site-header .logo{

    height: 56px;
    width: 56px;
    background: url("https://s02.mifile.cn/assets/static/image/logo-mi2.png") no-repeat center/cover;
    left: 100px;
}

.site-header .header-nav{
    display: flex;
}

.site-header .header-nav li{
    padding: 0 10px;
    font-size: 16px;
}
.site-header .header-nav li a{
    color: black;
}
.site-header .header-nav li a:hover{
    color: #ff6700;
}

.site-header .header-search form{
    display: flex;
    height: 50px;
    width: 296px;
}

.site-header .header-search form > input[name="keyword"]{
    width: 242px;
    height: 50px;
    border: 1px solid #e0e0e0;
    /*设置距离输入框左侧的边距*/
    text-indent: 15px;
}

.site-header .header-search form > input [type="submit"]{
    height: 50px;
    width: 52px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
}

.site-header .header-search form > input[name="keyword"]:hover{
     border: 1px solid #b0b0b0;
}
.site-header .header-search form > input[name="keyword"]:hover~input[type="submit"]{
    border: 1px solid #b0b0b0;
}

/*当聚焦的时候变色*/

.site-header .header-search form > input[name="keyword"]:focus{

    outline: none;
    border: 1px solid #ff6700;
}
.site-header .header-search form > input[ name="keyword"]:focus~input[type="submit"]{
       outline: none;
    border: 1px solid #ff6700;
}

banner区域


.banner > .container{
    height: 670px;
}

/*设置图片大小  将四张图片进行堆叠处理 并且隐藏*/
.banner .banner-img > img{
    position: absolute;
    width: 1226px;
    height: 460px;
    opacity: 0;
}


.banner .banner-img{
    width: 1226px;
    height: 460px;
}
/*设置圆点的位置*/
.change-labels{
    position: absolute;
    bottom: 30px;
    right: 30px
}
/*转换成圆的*/
.change-labels label{
    float: left;
    width: 12px;
    height: 12px;
    border: 2px solid rgb(90, 90, 90);
    margin: 5px 4px;
    border-radius: 6px;
}
/*将左上方的选择项进行隐藏*/
.banner input{
    display: none;
}
/*当选中第一个圆点显示第一张图片 进行联动 */
.banner input:nth-child(1):checked ~ .banner-img img:nth-child(1){
    opacity: 1;
}
.banner input:nth-child(2):checked ~ .banner-img img:nth-child(2){
    opacity: 1;
}
.banner input:nth-child(3):checked ~ .banner-img img:nth-child(3){
    opacity: 1;
}
.banner input:nth-child(4):checked ~ .banner-img img:nth-child(4){
    opacity: 1;
}

/*当选中第一个按钮的时候 按钮变色*/
.banner input:nth-child(1):checked ~.banner-img label:nth-child(1){
    background-color: rgb(69, 69, 69);
}

.banner input:nth-child(2):checked ~.banner-img label:nth-child(2){
    background-color: rgb(69, 69, 69);
}

.banner input:nth-child(3):checked ~.banner-img label:nth-child(3){
    background-color: rgb(69, 69, 69);
}

.banner input:nth-child(4):checked ~.banner-img label:nth-child(4){
    background-color: rgb(69, 69, 69);
}

/*左方菜单栏 */
.banner .banner-img .banner-menu{
    position: absolute;
    z-index: 3;
    width: 234px;
    height: 460px;
    background-color: rgb(105, 101, 101, .6);
    padding: 15px 0;
}


.banner .banner-img .banner-menu > li{
    display: flex;
    justify-content:space-between;
    padding: 0 50px;
    height: 42px;
    color: white;
    line-height: 42px;
}

.banner .banner-img .banner-menu li:hover{
    background-color: #ff6700;
}
/*设置隐藏*/
.banner .banner-img .banner-menu .sub-menu{
    display: none;
    top: 0;
    position: absolute;
    left: 234px;
    z-index: 3;
    width: 992px;
    height: 460px;
    background-color: rgb(240, 240, 240);
}


.banner .banner-img .banner-menu .sub-menu .sub-chile-list > a{

    display: block;
    height: 76px;
    width: 264px;
    color: black;
    padding: 18px 20px;
}

.banner .banner-img .banner-menu .sub-menu .sub-chile-list  a img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
/*.banner .banner-img .banner-menu .sub-menu .sub-chile-list  a span{*/
/*    padding-left: 45px;*/

/*}*/
/*设置显示*/
.banner .banner-img .banner-menu li:hover .sub-menu{
    display: flex;
}

/*整体左右布局*/
.banner .sub-banner-goods{
    display: flex;
    justify-content: space-between;
    height: 170px;
    width: 1226px;
    margin-top: 14px;
}

/*左边导航栏*/
.banner .sub-banner-goods .banner-goods-nav{
    display: flex;
    flex-wrap: wrap;
    width: 234px;
    height: 170px;
    background-color: rgb(95, 87, 80);
}

.banner .sub-banner-goods .banner-goods-pic ul{

    display: flex;
    justify-content: space-between;
    width: 992px;
    height: 170px;
}

.banner .sub-banner-goods .banner-goods-pic img{
    width: 316px;
    height: 170px;
}

.banner .sub-banner-goods .banner-goods-nav a{
    display: block;
    width: 76px;
    height: 62px;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    padding-top: 18px;
}

.banner .sub-banner-goods .banner-goods-nav a img{
    width: 24px;
    height: 24px;
}

.banner .sub-banner-goods .banner-goods-pic img:hover{
    box-shadow: 0 0 3px rgb(90, 87, 90, .8);
}

main区域

.main{
    background-color: #f5f5f5;
    padding-top: 32px;
}

.main .container .introduce-img img{
    width: 1226px;
}

.main .introduce-title {
    display: flex;
    justify-content: space-between;
    height: 58px;
    line-height: 58px;
}

.main .introduce-title .right a{
    font-size: 25px;
    display: block;
    color: black;
    opacity: 0.8;
}

.main .introduce-title .right a:hover{
    font-size: 30px;
    color: #ff6700;
}

.main .introduce-title h3{
    font-size:30px;
    color: black;
    opacity: 0.8;
}

.main .introduce-title h3:hover{
    font-size:35px;
    color: black;
    opacity: 1;
}

.main .goods-img{
    display: flex;
    justify-content: space-between;
    width:1226px;
    height: 628px;
}

.main .goods-img .big-img img{
    position: absolute;

    width: 234px;
    height: 615px;
}

.main .goods-img .img-list{
    /*position: absolute;*/
    /*left: 364px;*/
    /*top: 1038px;*/
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 978px;
    height: 628px;
}

.main .goods-img .img-list img{
    padding: 20px 0;
    width: 160px;
    height: 160px;
}

.main .goods-img .img-list li{
    text-align: center;
    width: 234px;
    height: 300px;
    background-color: #fff;

}

.main .goods-img .img-list li h4{
    font-size: 14px;
    font-weight: 450;
    color: black;
}

.main  .goods-img .img-list li p{
    font-size: 12px;  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    height: 18px;
    color: #b0b0b0;
}

.main .goods-img .img-list li p.price{
    color: #ff6700;
}