|
|
@@ -5,7 +5,7 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
- <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5060986_mzmp3egex0s.css">
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5060986_h8u3prxrggl.css">
|
|
|
<style>
|
|
|
/* css reset */
|
|
|
* {
|
|
|
@@ -166,6 +166,49 @@
|
|
|
color: #616161;
|
|
|
}
|
|
|
/* nav 区域 end */
|
|
|
+ /* 轮播图区域 start */
|
|
|
+ .swiper{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .swiper .swiper-img{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .swiper .swiper-img img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .swiper .swiper-nav{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: 234px;
|
|
|
+ height: 460px;
|
|
|
+ background-color: rgba(105,101,101,.6);
|
|
|
+ }
|
|
|
+ .swiper .swiper-nav ul{
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .swiper .swiper-nav li{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-left: 30px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ .swiper .swiper-nav li span{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .swiper .swiper-nav li i{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .swiper .swiper-nav li:hover{
|
|
|
+ background-color: #ff6700;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ /* 轮播图区域 end */
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -244,7 +287,55 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 轮播图区域 -->
|
|
|
- <div class="swiper"></div>
|
|
|
+ <div class="swiper main-width">
|
|
|
+ <div class="swiper-nav">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span>手机</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>电视</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>家电</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>笔记本 平板 显示器</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>出行 穿戴</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>耳机 音箱</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>健康 儿童</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>生活 箱包</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>智能 路由器</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>电源 配件</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-img">
|
|
|
+ <img src="./img/xiaomi/swiperimg.jpg" alt="swiper">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- bnner 区域 -->
|
|
|
<div class="banner"></div>
|
|
|
</body>
|
