|
|
@@ -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_4974983_5en83d04csd.css">
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_eksisevw5uf.css">
|
|
|
<style>
|
|
|
/* css reset 样式重置 把浏览器自带的标签样式去掉 */
|
|
|
* {
|
|
|
@@ -185,30 +185,34 @@
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
- .search-content .center-nav{
|
|
|
+ .search-content .center-nav {
|
|
|
float: left;
|
|
|
margin-left: 180px;
|
|
|
padding-top: 12px;
|
|
|
}
|
|
|
- .search-content .center-nav li{
|
|
|
+
|
|
|
+ .search-content .center-nav li {
|
|
|
float: left;
|
|
|
font-size: 16px;
|
|
|
color: #333;
|
|
|
padding: 26px 10px 38px;
|
|
|
}
|
|
|
- .search-content .center-nav li:hover{
|
|
|
+
|
|
|
+ .search-content .center-nav li:hover {
|
|
|
color: #ff6700;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .search-content .search-box{
|
|
|
+
|
|
|
+ .search-content .search-box {
|
|
|
margin-top: 25px;
|
|
|
float: right;
|
|
|
font-size: 0;
|
|
|
position: relative;
|
|
|
width: 275px;
|
|
|
}
|
|
|
- .search-content .search-box input{
|
|
|
- border:1px solid #e0e0e0;
|
|
|
+
|
|
|
+ .search-content .search-box input {
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
width: 223px;
|
|
|
height: 48px;
|
|
|
outline: 0;
|
|
|
@@ -217,20 +221,49 @@
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
}
|
|
|
- .search-content .search-box button{
|
|
|
+
|
|
|
+ .search-content .search-box button {
|
|
|
width: 52px;
|
|
|
height: 50px;
|
|
|
- border:1px solid #e0e0e0;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
background-color: #fff;
|
|
|
position: absolute;
|
|
|
left: 222px;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .search-content .search-box button i{
|
|
|
+
|
|
|
+ .search-content .search-box button i {
|
|
|
font-size: 24px;
|
|
|
color: #616161;
|
|
|
}
|
|
|
+
|
|
|
/* 顶部搜索框 结束 */
|
|
|
+ /* 轮播图区域 开始 */
|
|
|
+ .swiper-content{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .swiper-content .swiper-nav{
|
|
|
+ position: absolute;
|
|
|
+ width: 234px;
|
|
|
+ height: 460px;
|
|
|
+ background-color: rgba(105, 101, 101, .6);
|
|
|
+ padding:30px 20px;
|
|
|
+ /* 改为怪异盒模型 */
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .swiper-content .swiper-img img{
|
|
|
+ width: 1226px;
|
|
|
+ height: 460px;
|
|
|
+ }
|
|
|
+ .swiper-content .swiper-nav li{
|
|
|
+ height: 42px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .swiper-content .swiper-nav i{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ /* 轮播图区域 结束 */
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -292,7 +325,7 @@
|
|
|
</div>
|
|
|
<!-- 头部导航 开始 -->
|
|
|
<!--顶部搜索框 开始 -->
|
|
|
- <div class="search-content main-width">
|
|
|
+ <div class="search-content clearfix main-width">
|
|
|
<div class="logo">
|
|
|
<img src="./image/logo.png" alt="logo">
|
|
|
</div>
|
|
|
@@ -316,6 +349,27 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 顶部搜索框 结束 -->
|
|
|
+ <!--轮播图区域 开始 -->
|
|
|
+ <div class="swiper-content main-width">
|
|
|
+ <div class="swiper-nav">
|
|
|
+ <ul>
|
|
|
+ <li>手机 <i class="iconfont icon-arrow"></i> </li>
|
|
|
+ <li>电视 <i class="iconfont icon-arrow"></i> </li>
|
|
|
+ <li>家电 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>笔记本 平板 显示器 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>出行 穿戴 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>耳机 音箱 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>健康 儿童 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>生活 箱包 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>智能 路由器 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>电源 配件 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-img">
|
|
|
+ <img src="./image/bg.jpg" alt="bg">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 轮播图区域 结束 -->
|
|
|
</div>
|
|
|
</body>
|
|
|
|
