|
|
@@ -25,8 +25,9 @@
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
+
|
|
|
/* 清除浮动 */
|
|
|
- .clearfix::after{
|
|
|
+ .clearfix::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
clear: both;
|
|
|
@@ -45,32 +46,38 @@
|
|
|
/* 字体样式 比如斜体 */
|
|
|
/* font-style: normal; */
|
|
|
/* 取消下划线 */
|
|
|
- text-decoration:none ;
|
|
|
+ text-decoration: none;
|
|
|
font-size: 12px;
|
|
|
display: inline-block;
|
|
|
height: 40px;
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
- .top-nav a:hover{
|
|
|
+
|
|
|
+ .top-nav a:hover {
|
|
|
color: #fff;
|
|
|
}
|
|
|
- .top-nav .sep{
|
|
|
+
|
|
|
+ .top-nav .sep {
|
|
|
font-size: 12px;
|
|
|
color: #424242;
|
|
|
margin: 0 3px;
|
|
|
}
|
|
|
- .top-nav .top-nav-left{
|
|
|
+
|
|
|
+ .top-nav .top-nav-left {
|
|
|
float: left;
|
|
|
height: 40px;
|
|
|
}
|
|
|
- .top-nav .top-nav-right{
|
|
|
+
|
|
|
+ .top-nav .top-nav-right {
|
|
|
float: right;
|
|
|
}
|
|
|
- .top-nav .top-nav-right .tnr-link{
|
|
|
+
|
|
|
+ .top-nav .top-nav-right .tnr-link {
|
|
|
float: left;
|
|
|
height: 40px;
|
|
|
}
|
|
|
- .top-nav .top-nav-right .tnr-car{
|
|
|
+
|
|
|
+ .top-nav .top-nav-right .tnr-car {
|
|
|
float: left;
|
|
|
width: 120px;
|
|
|
height: 40px;
|
|
|
@@ -80,13 +87,16 @@
|
|
|
text-align: center;
|
|
|
margin-left: 15px;
|
|
|
}
|
|
|
- .top-nav .download-app-link{
|
|
|
+
|
|
|
+ .top-nav .download-app-link {
|
|
|
position: relative;
|
|
|
}
|
|
|
- .top-nav .download-app-link:hover .download-app{
|
|
|
+
|
|
|
+ .top-nav .download-app-link:hover .download-app {
|
|
|
display: block;
|
|
|
}
|
|
|
- .top-nav .download-app-link .download-app{
|
|
|
+
|
|
|
+ .top-nav .download-app-link .download-app {
|
|
|
width: 124px;
|
|
|
position: absolute;
|
|
|
top: 40px;
|
|
|
@@ -99,7 +109,8 @@
|
|
|
padding-bottom: 10px;
|
|
|
display: none;
|
|
|
}
|
|
|
- .top-nav .download-app-link .download-app::before{
|
|
|
+
|
|
|
+ .top-nav .download-app-link .download-app::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 0;
|
|
|
@@ -110,50 +121,59 @@
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
margin-left: -10px;
|
|
|
- top:-10px;
|
|
|
+ top: -10px;
|
|
|
}
|
|
|
- .top-nav .download-app-link .download-app img{
|
|
|
+
|
|
|
+ .top-nav .download-app-link .download-app img {
|
|
|
width: 104px;
|
|
|
}
|
|
|
- .top-nav .download-app-link .download-app p{
|
|
|
+
|
|
|
+ .top-nav .download-app-link .download-app p {
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
}
|
|
|
+
|
|
|
/* 顶部导航栏 end */
|
|
|
/* nav 区域 start */
|
|
|
- .nav .nav-logo{
|
|
|
+ .nav .nav-logo {
|
|
|
float: left;
|
|
|
margin-top: 22px;
|
|
|
}
|
|
|
- .nav .nav-logo img{
|
|
|
+
|
|
|
+ .nav .nav-logo img {
|
|
|
width: 56px;
|
|
|
height: 56px;
|
|
|
}
|
|
|
- .nav .nav-list{
|
|
|
+
|
|
|
+ .nav .nav-list {
|
|
|
float: left;
|
|
|
margin-left: 160px;
|
|
|
}
|
|
|
- .nav .nav-list li{
|
|
|
+
|
|
|
+ .nav .nav-list li {
|
|
|
float: left;
|
|
|
height: 100px;
|
|
|
line-height: 100px;
|
|
|
- margin:0 10px;
|
|
|
+ margin: 0 10px;
|
|
|
}
|
|
|
- .nav .nav-search{
|
|
|
+
|
|
|
+ .nav .nav-search {
|
|
|
float: right;
|
|
|
width: 296px;
|
|
|
height: 50px;
|
|
|
- border:1px solid #e0e0e0;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
margin-top: 25px;
|
|
|
}
|
|
|
- .nav .nav-search input{
|
|
|
+
|
|
|
+ .nav .nav-search input {
|
|
|
float: left;
|
|
|
height: 50px;
|
|
|
border: none;
|
|
|
outline: none;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
- .nav .nav-search .search-btn{
|
|
|
+
|
|
|
+ .nav .nav-search .search-btn {
|
|
|
float: right;
|
|
|
height: 50px;
|
|
|
width: 50px;
|
|
|
@@ -161,37 +181,44 @@
|
|
|
text-align: center;
|
|
|
line-height: 50px;
|
|
|
}
|
|
|
- .nav .nav-search .search-btn i{
|
|
|
+
|
|
|
+ .nav .nav-search .search-btn i {
|
|
|
font-size: 25px;
|
|
|
color: #616161;
|
|
|
}
|
|
|
+
|
|
|
/* nav 区域 end */
|
|
|
/* 轮播图区域 start */
|
|
|
- .swiper{
|
|
|
+ .swiper {
|
|
|
position: relative;
|
|
|
height: 460px;
|
|
|
}
|
|
|
- .swiper .swiper-img{
|
|
|
+
|
|
|
+ .swiper .swiper-img {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
- .swiper .swiper-img img{
|
|
|
+
|
|
|
+ .swiper .swiper-img img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .swiper .swiper-nav{
|
|
|
+
|
|
|
+ .swiper .swiper-nav {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 1;
|
|
|
width: 234px;
|
|
|
height: 460px;
|
|
|
- background-color: rgba(105,101,101,.6);
|
|
|
+ background-color: rgba(105, 101, 101, .6);
|
|
|
}
|
|
|
- .swiper .swiper-nav ul{
|
|
|
+
|
|
|
+ .swiper .swiper-nav ul {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
- .swiper .swiper-nav li{
|
|
|
+
|
|
|
+ .swiper .swiper-nav li {
|
|
|
color: #fff;
|
|
|
font-size: 14px;
|
|
|
padding-left: 30px;
|
|
|
@@ -199,17 +226,21 @@
|
|
|
line-height: 42px;
|
|
|
padding-right: 20px;
|
|
|
}
|
|
|
- .swiper .swiper-nav li span{
|
|
|
+
|
|
|
+ .swiper .swiper-nav li span {
|
|
|
float: left;
|
|
|
}
|
|
|
- .swiper .swiper-nav li i{
|
|
|
+
|
|
|
+ .swiper .swiper-nav li i {
|
|
|
float: right;
|
|
|
}
|
|
|
- .swiper .swiper-nav li:hover{
|
|
|
+
|
|
|
+ .swiper .swiper-nav li:hover {
|
|
|
background-color: #ff6700;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .swiper .swiper-btn-left{
|
|
|
+
|
|
|
+ .swiper .swiper-btn-left {
|
|
|
width: 41px;
|
|
|
height: 69px;
|
|
|
background-image: url("./img/xiaomi/icon-slides.png");
|
|
|
@@ -219,11 +250,13 @@
|
|
|
margin-top: -34px;
|
|
|
background-position: -84px 0;
|
|
|
}
|
|
|
- .swiper .swiper-btn-left:hover{
|
|
|
+
|
|
|
+ .swiper .swiper-btn-left:hover {
|
|
|
background-position: 0 0;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .swiper .swiper-btn-right{
|
|
|
+
|
|
|
+ .swiper .swiper-btn-right {
|
|
|
width: 41px;
|
|
|
height: 69px;
|
|
|
background-image: url("./img/xiaomi/icon-slides.png");
|
|
|
@@ -233,30 +266,105 @@
|
|
|
margin-top: -34px;
|
|
|
background-position: -125px 0;
|
|
|
}
|
|
|
- .swiper .swiper-btn-right:hover{
|
|
|
+
|
|
|
+ .swiper .swiper-btn-right:hover {
|
|
|
background-position: -42px 0;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .swiper .swiper-btn-dot{
|
|
|
+
|
|
|
+ .swiper .swiper-btn-dot {
|
|
|
position: absolute;
|
|
|
right: 30px;
|
|
|
bottom: 30px;
|
|
|
}
|
|
|
- .swiper .swiper-btn-dot li{
|
|
|
+
|
|
|
+ .swiper .swiper-btn-dot li {
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
- border:2px solid hsla(0,0%,100%,.3);
|
|
|
- background-color: rgba(0,0,0,.4);
|
|
|
+ border: 2px solid hsla(0, 0%, 100%, .3);
|
|
|
+ background-color: rgba(0, 0, 0, .4);
|
|
|
float: left;
|
|
|
border-radius: 50%;
|
|
|
margin: 0 4px;
|
|
|
}
|
|
|
- .swiper .swiper-btn-dot li:hover{
|
|
|
- border: 2px solid rgba(0,0,0,.4);
|
|
|
- background-color: hsla(0,0%,100%,.3);
|
|
|
+
|
|
|
+ .swiper .swiper-btn-dot li:hover {
|
|
|
+ border: 2px solid rgba(0, 0, 0, .4);
|
|
|
+ background-color: hsla(0, 0%, 100%, .3);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
/* 轮播图区域 end */
|
|
|
+ /* banner 区域 start */
|
|
|
+ .banner {
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner .banner-right {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner .banner-right li {
|
|
|
+ float: left;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner .banner-right li:first-child {
|
|
|
+ margin-left: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner .banner-right img {
|
|
|
+ width: 316px;
|
|
|
+ height: 170px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner .banner-left {
|
|
|
+ float: left;
|
|
|
+ width: 234px;
|
|
|
+ height: 170px;
|
|
|
+ background-color: #5f5750;
|
|
|
+ }
|
|
|
+ .banner .banner-left ul{
|
|
|
+ padding: 3px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .banner .banner-left li{
|
|
|
+ height: 82px;
|
|
|
+ width: 70px;
|
|
|
+ float: left;
|
|
|
+ padding: 0 3px;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .banner .banner-left li img{
|
|
|
+ margin-top: 18px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ .banner .banner-left li::before{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 63px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #665e57;
|
|
|
+ position: absolute;
|
|
|
+ top: -1px;
|
|
|
+ left: 6px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .banner .banner-left li::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 1px;
|
|
|
+ height: 70px;
|
|
|
+ background-color: #665e57;
|
|
|
+ position: absolute;
|
|
|
+ top: 6px;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ /* banner 区域 end */
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -310,7 +418,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 导航栏 -->
|
|
|
- <div class="nav main-width clearfix" >
|
|
|
+ <div class="nav main-width clearfix">
|
|
|
<div class="nav-logo">
|
|
|
<img src="./img/xiaomi/logo-mi2.png" alt="logo">
|
|
|
</div>
|
|
|
@@ -399,7 +507,49 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- bnner 区域 -->
|
|
|
- <div class="banner"></div>
|
|
|
+ <div class="banner main-width clearfix">
|
|
|
+ <div class="banner-left">
|
|
|
+ <ul class="clearfix">
|
|
|
+ <li>
|
|
|
+ <img src="./img/xiaomi/a1.png" alt="a1">
|
|
|
+ <p>保障服务</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/xiaomi/a1.png" alt="a1">
|
|
|
+ <p>保障服务</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/xiaomi/a1.png" alt="a1">
|
|
|
+ <p>保障服务</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/xiaomi/a1.png" alt="a1">
|
|
|
+ <p>保障服务</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/xiaomi/a1.png" alt="a1">
|
|
|
+ <p>保障服务</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/xiaomi/a1.png" alt="a1">
|
|
|
+ <p>保障服务</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="banner-right">
|
|
|
+ <ul class="clearfix">
|
|
|
+ <li>
|
|
|
+ <img src="./img/xiaomi/img1.png" alt="banner1">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/xiaomi/img2.png" alt="banner2">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/xiaomi/img3.png" alt="banner3">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
