小米官网CSS样式书写

/* top-bar 顶部导航样式的书写 */
*{
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}
.top-bar-wrap{
    width: 100%;
    height: 40px;
    background-color: #333333;
    line-height: 38px;
}
.w{
    width: 1226px;
    margin: 0 auto;
}
.top-bar>ul{
    float: left;
}
.top-bar>ol{
    float: right;
}
.top-bar>ul>li{
    float: left;
}
.top-bar>ol>li{
    float: left;
}
.top-bar a{
    font-size: 12px;
    color: #A4A4A4;
}
.top-bar a:hover{
    color: white;
}
.top-bar .line{
    font-size: 12px;
    color: #424242;
    margin: 0 4px;
}
/* 小米商誉下拉二维码的样式书写 */
.downloadapp1{
    position: relative;
}
.QRcode1{
    position: absolute;
    width: 125px;
    height: 0;
    transition: all 300ms;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    text-align: center;
    left: -35px;
    top: 40px;
    z-index: 200;
}
.QRcode1>img{
    width: 86px;
    margin-top: 18px;
}
.downloadapp1>i{
    position: absolute;
    left: 18px;
    top: 17px;
    color: white;
    display: none;
}
.QRcode1 p{
    margin-top: -15px;
    font-size: 14px;
}
/* 二维码QRcode1设置缓慢下拉小效果 */
.downloadapp1:hover>.QRcode1{
    width: 125px;
    height: 148px;
    background-color: white;
}
.downloadapp1:hover>i{
    display: block;
}
/* 购物车背景大小样式的设置 */
.shopcar{
    width: 120px;
    height: 40px;
    background-color: #424242;
    text-align: center;
    margin-left: 20px;
    position: relative;
}
.shopcar>i{
    font-size: 16px;
    color: #AFB0B0;
}
.shopcar:hover{
    background-color: white;
}
.shopcar:hover>a,.shopcar:hover>i{
    color: #FF6700;
}
/* 购物车的下拉样式设置 */
.shoplist{
    width: 335px;
    height: 0;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 110px;
    font-size: 12px;
    overflow: hidden;
    transition: all 300ms;
}
.shoplist{
    position: absolute;
    right: 0;
    top: 39px;
    z-index: 200;
}
.shopcar:hover>.shoplist{
    width: 335px;
    height: 110px;
    background-color: white;
}
/* 快速导航区的样式设置 */
.fast-nav-wrap{
    width: 100%;
    height: 100px;
    /* background-color: pink; */
    line-height: 100px;
}
.fast-nav>h1{
    float: left;
}
.fast-nav>ul{
    float: left;
    padding-left: 30px;
}
.fast-nav>.search{
    float: right;
}
.fast-nav li{
    float: left;
    padding: 0px 10px;
}
.fast-nav img{
    width: 56px;
    height: 56px;
    vertical-align: middle;
}
.fast-nav li>a{
    font-size: 16px;
    color: #333333;
}
/* 全部商品分类的隐藏 */
.fast-nav li:first-child{
    visibility: hidden;
}
/* 搜索区的样式设置 */
.search>input{
    width: 223px;
    height: 48px;
    padding: 0 10px;
    border: 1px solid #E0E0E0;
    outline: none;
}
.search>button{
    width: 52px;
    height: 50px;
    padding: 1px 6px;
    border: 1px solid #E0E0E0;
}
.search i{
    font-size: 30px;
}
.search{
    position: relative;
}
.search>input{
    position: absolute;
    right: 52px;
    top: 19px;
}
.search>button:hover{
    background-color: #FF6700;
}
.search>button:hover>i{
    color: white;
}
.search>input:hover{
    border-color: #B0B0B0;
}
.search>input:hover+button{
    border-color: #B0B0B0;
    border-left: none;
}
.search>input:focus{
    border-color: #FF6700;
}
.search>input:focus+button{
    border-color: #FF6700;
    border-left: none;
}
/* 全部商品分类下拉框 */
.fast-nav>ul a:hover{
    color: #FF6752;
}
.xiala{
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all 300ms;
    left: 0;
    top: 140px;
}
li:hover>.xiala{
    width: 100%;
    height: 200px; 
    background-color: #FFFFFF;  
    /* border-bottom: 1px solid #E0E0E0; */
    border-top: 1px solid #E0E0E0;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
    z-index: 150;
}
/* 主体内容的书写 */
/* 侧边导航的书写 */
main{
    width: 100%;
}
.left-nav{
    width: 234px;
    height: 420px;
    background-color: #403E3E;
    padding: 20px 0px;
    position: absolute;
    z-index: 50;
}
.left-nav>li{
    width: 204px;
    height: 42px;
    line-height: 42px;
    padding-left: 30px;
    /* background: red; */
}
.left-nav>li>span{
    color: #F5F5F5;
    font-size: 14px;
}
.left-nav i{
    float: right;
    margin-right: 20px;
    color: #DDDDDD;
    font-size: 18px;
    font-weight: bold;
}
.left-nav>li:hover{
    background-color: #FF6700;
}
/* 侧拉框样式的书写 */
.cela{
    width: 992px;
    height: 460px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    position: absolute;
    left: 234px;
    top: 0;
    z-index: 100;
    display: none;
}
.left-nav>li:hover>.cela{
    display: block;
}
/* banner区轮播图样式的设置 */
.swiper img{
    width: 100%;
    height: 100%;
}
.swiper{
    overflow: hidden;
    position: relative;
    z-index: 1;
}
/* 选择器权重的问题 */
div.swiper-button-prev{
    left: 234px;
    width: 41px;
    height: 69px;
    margin: -35px 0 0;
    color: #CCCCCC;
}
div.swiper-button-prev:hover{
    background-color: #06090D;
    color: white;
}
div.swiper-button-next{
    right: 0;
    width: 41px;
    height: 69px;
    margin: -35px 0 0;
    color: #CCCCCC;
}
div.swiper-button-next:hover{
    background-color: #06090D;
    color: white;
}
.swiper-pagination{
    width: 10%;
    right: 30px;
    bottom: 30px;
}
/* AD广告区的样式设置 */
.AD>ul{
    width: 228px;
    height: 164px;
    padding: 3px;
    background-color: #5F5750;
    float: left;
}
.AD>ul>li{
    width: 70px;
    height: 82px;
    padding: 0px 3px;
    float: left;
    text-align: center;
    font-size: 12px;
    color: #7C7570;
    position: relative;
}
.AD>ul>li:hover>a{
    color: white;
}
/* 分界线的样式设置 */
.AD>ul>li::before {
    content: '';
    display: block;
    width: 1px;
    height: 60px;
    background-color: rgb(101,94,88);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 垂直方向居中 */
    margin: auto 0;
}

.AD>ul>li::after {
    content: '';
    display: block;
    height: 1px;
    width: 60px;
    background-color: rgb(101,94,88);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 水平方向居中 */
    margin: 0 auto;
}
/* 下三张广告图链接的样式设置 */
.AD>ul img{
    width: 24px;
    height: 24px;
    padding-top: 18px;
    padding-bottom: 8px;
}
.AD>div img{
    width: 315px;
    height: 170px;
    margin-left: 12px;
}
.AD>div img:hover{
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
/* footer大广告的设置 */
.footer-nav-wrap{
    width: 100%;
}
.footer-nav-wrap img{
    width: 1226px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    margin-top: 10px;
}
/* 工具栏样式的设置 */
.toolbar>ul{
    width: 70px;
    height: 420px;
    background-color: white;
    border: 1px solid #F5F5F5;
    font-size: 14px;
    position: fixed;
    right: 0;
    bottom: 15%;
    z-index: 201;
}
.toolbar li{
    width: 70px;
    height: 84px;
    text-align: center;
    border-bottom: 1px solid #F5F5F5;
    position: relative;
}
.toolbar li:last-child{
    border-bottom: none;
}
.toolbar li>a{
    position: absolute;
    left: 12px;
    top: 18px;
}
.toolbar li i{
    font-size: 30px;
}
.toolbar li:hover p,.toolbar li:hover i{
    color: #FF6700;
}
/* QRcode2二维码侧拉样式设置 */
.QRcode2>img{
    width: 86px;
    margin-top: 18px;
}
.QRcode2{
    width: 125px;
    height: 170px;
    background-color: white;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    text-align: center;
    position: absolute;
    left: -140px;
    top: 0;
    display: none;
}
.QRcode2>p{
    width: 80px;
    margin-left: 20px;
    margin-top: 18px;
}
.toolbar li:first-child:hover>.QRcode2{
    display: block;
}