javascript数组去重最优解

js, 数组操作, 技术

javascript数组去重最优解

利用对象的属性来去重。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
	var arr = [1,3,5,5,1,2,77,4,32,2,3];
	var temp = [];     //规定一个新数组；用来保存最终输出的数组
	var obj = {};     //空对象 
	for(var i = 0; i < arr.length; i++){
		if(!obj[arr[i]]){
//取反 true 变false 不通过 重复的排除  obj.1=1 undefined;obj.3=1 undefined; obj.5=1 undefined		
			temp.push(arr[i]); 
			obj[arr[i]] = 1;
			console.log(obj)
		}
	}
	console.log(temp);
</script>

表格排序

表格排序

文章目录

    1.制作一个表格

    2.获取对象

    3.创建一个数组对象

    4.封装正序方法

    5.封装倒序方法

    6.遍历赋值

    7.绑定点击事件

效果图

表格排序

1.制作一个表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div id="table">
		<ul class="hh">
			<div class="dian" flag="0">名称</div>
			<div class="dian2" flag="0">修改日期</div>
			<div class="dian3" flag="0">类型</div>
			<div class="dian4" flag="0">大小</div>
		</ul>
		<ul class="one">
			<li >13</li>
			<li>3</li>
			<li>文件夹</li>
			<li>1KB</li>
		</ul>
		<ul class="one">
			<li >2.2</li>
			<li>4</li>
			<li>jpeg</li>
			<li>2KB</li>
		</ul>
		<ul class="one">
			<li >7</li>
			<li>1</li>
			<li>html</li>
			<li>1KB</li>
		</ul>
		<ul class="one">
			<li >5</li>
			<li>2</li>
			<li>ppt</li>
			<li>3KB</li>
		</ul>
		<ul class="one">
			<li >4.6</li>
			<li>9</li>
			<li>文件夹</li>
			<li>2KB</li>
		</ul>
		<ul class="one">
			<li >11</li>
			<li>6</li>
			<li>文件夹</li>
			<li>5KB</li>
		</ul>
		<ul class="one">
			<li >3</li>
			<li>5</li>
			<li>JS</li>
			<li>4KB</li>
		</ul>
	</div>

2.获取对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var big = document.getElementById("table");//获取表格
var title = document.getElementsByClassName("hh")[0].children;//获取表头的名称 修改日期  类型  大小
	console.log(title)
var main = document.getElementsByClassName("one");//获取表格内容的所有ul 
	console.log(main);
var lis = document.getElementsByTagName("li");//获取表格内容的所有li
	console.dir(lis);
var dian = document.getElementsByClassName("dian")[0];
	console.dir(dian);
var dian2 = document.getElementsByClassName("dian2")[0];
var dian3 = document.getElementsByClassName("dian3")[0];
var dian4 = document.getElementsByClassName("dian4")[0];
	console.dir(dian4);

3.创建一个数组对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var data = [
				{
					"name": parseFloat(main[0].children[0].innerHTML),
					"time": parseFloat(main[0].children[1].innerHTML),
					"type": main[0].children[2].innerHTML,
					"size": main[0].children[3].innerHTML,
				},
				{
					"name": parseFloat(main[1].children[0].innerHTML),
					"time": parseFloat(main[1].children[1].innerHTML),
					"type": main[1].children[2].innerHTML,
					"size": main[1].children[3].innerHTML,
				}, 
				{
					"name": parseFloat(main[2].children[0].innerHTML),
					"time": parseFloat(main[2].children[1].innerHTML),
					"type": main[2].children[2].innerHTML,
					"size": main[2].children[3].innerHTML,
				},
				{
					"name": parseFloat(main[3].children[0].innerHTML),
					"time": parseFloat(main[3].children[1].innerHTML),
					"type": main[3].children[2].innerHTML,
					"size": main[3].children[3].innerHTML,
				},
				{
					"name": parseFloat(main[4].children[0].innerHTML),
					"time": parseFloat(main[4].children[1].innerHTML),
					"type": main[4].children[2].innerHTML,
					"size": main[4].children[3].innerHTML,
				}, 
				{
					"name": parseFloat(main[5].children[0].innerHTML),
					"time": parseFloat(main[5].children[1].innerHTML),
					"type": main[5].children[2].innerHTML,
					"size": main[5].children[3].innerHTML,
				}, 
				{
					"name": parseFloat(main[6].children[0].innerHTML),
					"time": parseFloat(main[6].children[1].innerHTML),
					"type": main[6].children[2].innerHTML,
					"size": main[6].children[3].innerHTML,
				},
			]

data为一个数组 数组里面有7个对象 每个对象都有4个属性 name,time,type,size

4.封装正序方法

1
2
3
4
5
6
7
8
9
10
11
12
function zhengxu(name){
		 	for(var i = 0; i < data.length; i++) {
				for(var j = 0; j < data.length - i - 1; j++) {
					if(data[j][name] > data[j + 1][name]) {
						var x = data[j];
						data[j] = data[j + 1];
						data[j + 1] = x;
					}
				}
			}
			
		}

使用冒泡排序的原理 对每个属性正序排列

5.封装倒序方法

1
2
3
4
5
6
7
8
9
10
11
12
function daoxu(name){
		 	for(var i = 0; i < data.length; i++) {
				for(var j = 0; j < data.length - i - 1; j++) {
					if(data[j][name] < data[j + 1][name]) {
						var x = data[j];
						data[j] = data[j + 1];
						data[j + 1] = x;
					}
				}
			}
			
		}

6.遍历赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function show() {
				for (var i=0;i<main.length; i++){
					main[i].children[0].innerHTML=data[i].name;
				}
				for (var i=0;i<main.length; i++){
					main[i].children[1].innerHTML=data[i].time;
				}
				for (var i=0;i<main.length; i++){
					main[i].children[2].innerHTML=data[i].type;
				}
				for (var i=0;i<main.length; i++){
					main[i].children[3].innerHTML=data[i].size;
				}
			}

7.绑定点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
dian.onclick = function () {
		if(dian.flag=="0"){
			zhengxu("name");
			dian.flag=1;
		}else{
			daoxu("name");
			dian.flag=0;
		}
		
		show();
	}
dian2.onclick = function () {
		if(dian.flag=="0"){
			zhengxu("time");
			dian.flag=1;
		}else{
			daoxu("time");
			dian.flag=0;
		}
		show();
	}
	
dian3.onclick = function () {
		if(dian.flag=="0"){
		zhengxu("type");
		dian.flag=1;
		}else{
			daoxu("type");
			dian.flag=0;
		}
		show();
	}
	
dian4.onclick = function () {
		if(dian.flag=="0"){
		zhengxu("size");
		dian.flag=1;
		}else{
			daoxu("size");
			dian.flag=0;
		}
		show();
	}

February 5, 2017 By litteredhat

css实现多级下拉菜单

文章目录

  1. html框架

  2. css样式

本文介绍了使用纯css制作多级下拉菜单的方法。

完成效果：

多级下拉菜单的制作

二级菜单

1.html框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="menu">
  	  <ul>
        <li><a href="#">首页</a></li>
        <li class="second-menu">
          <a href="#">分类 <div class="arrow"></div></a>
          <ul>
            <li class="third-menu">
              <a href="#">服装 <div class="arrow"></div></a>
              <ul>
              	<li><a href="">女装</a></li>
              	<li><a href="">男装</a></li>
              	<li><a href="">箱包</a></li>
              </ul>
            </li>
            <li><a href="#">数码</a></li>
            <li><a href="#">家电</a></li>
          </ul>
        </li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
 </div>

2.css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
a{
  text-decoration: none;
  color: black;
  font-size: 18px;
}
a:hover{
  text-decoration: none;
  color: white;
  background-color: #000;
}
/*箭头图标*/
.arrow{
  position: absolute;
  display: inline-block;
  top: 15px;
  left: 92px;
  width: 0;
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid gray;
}
/*主要样式*/
.menu{
  margin: auto;
  height: 40px;
  line-height: 40px;
  background-color: #d5d5d5;
}
.menu ul{
  display: block;
  padding: 0;
  list-style: none;
}
.menu ul li{
  position: relative;
  float: left;
  text-align: center;
}
.menu ul li a{
  display: block;
  padding: 0 10px 0 10px;  
  width: 100px;
  border-left: 1px solid white;
}
.menu ul li:first-child a{
  border: none;
}
/*将多级菜单设置为隐藏*/
.menu .second-menu ul{
  display: none;
}
.menu .second-menu ul .third-menu ul{
  display: none;
}
/*二级菜单*/
.menu .second-menu:hover ul{
  display: block;
}
.menu .second-menu:hover ul li{
  float: none;
  margin: 3px 0 3px 0;
  background-color: #d5d5d5;
}
/*三级菜单*/
.menu .second-menu ul .third-menu:hover ul{
  display: block;
}
.menu .second-menu ul .third-menu:hover ul{
  position: absolute;
  z-index: 10;
  top: 0;
  left: 120px;
  float: none;
}
.menu .second-menu ul .third-menu:hover ul li:first-child{
  margin-top: 0;
}
.menu .second-menu ul .third-menu:hover ul li{
  margin-left: 3px;
}

箭头图标利用css中的border属性实现，通过以下语句可以得到各个方向的箭头：

1
2
3
4
5
6
7
8
9
 /*向下的箭头*/
> .arrow{
>   width: 0;
>   border-top: 5px solid transparent;
>   border-right: 5px solid transparent;
>   border-bottom: 5px solid transparent;
>   border-left: 5px solid #000;
> }
>

By litteredhat

移动HTML开发兼容性调整(meta篇)

HTML, 技术, 兼容性

移动HTML开发兼容性调整(meta篇)

[TOC]

控制视口

在 <head> 标签中添加

1
<meta name="viewpor" content="width=device-width, initial-scale=1, minimum-scale=1, maximun-scale=1, user-scalable=no">

达到控制视口和控制缩放的效果。

scale属性依次为：初始化缩放比例为1，最小缩放比例为1，最大缩放比例为1，是否允许用户缩放。

关闭手机号码检测

1
<meta name="format-detection" content="telephone=no">

关闭邮箱检测为email

京东商城导航栏的制作

HTML, bootstrap, jquery

文章目录

效果图

京东商城导航栏

1.头文件

1
2
3
4
5
6
7
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/jingdong.css"/>
	<link rel="stylesheet" type="text/css" href="./css/iconfont.css">
	<title>京东首页</title>
</head>

2.导航框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!--头部导航-->
		<div class="container-fluid nav-top">
		   	<div class="container nav-mid">
				<img src="img/topImg/logo.v2.png" class="jd"/>
				<!--选择地区-->
				<div class="area">
					<div class="areajshu">
						<i class="iconfont icon-houtaidiqufenbunew"></i>
						<span> 
							<span class="diqu">江苏</span>
							<ul id="area">
								<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>
							</ul>
						</span>
					</div>
				</div>
				<!--登陆账号-->
				<div class="zhuce">
					<ul>
						<li><a href="#">登陆</a></li>
						<li><a href="#">免费注册</a></li>
						<li><a href="#">我的订单</a></li>
						<li class="lis-myjd">
							<a href="#">我的京东</a>
							<img src="img/topImg/drop.png"/>
							<div class="myjd">
								<!--<div class="row">-->
								  <div class="col-md-4">
								  	<a href="#">
								  		待处理订单
								  	</a>
								  </div>
								  <div class="col-md-4 col-md-offset-1">
								  	<a href="#">
								  		消息
								  	</a>
								  </div>
								<!--</div>-->
								  <div class="col-md-4">
								  	<a href="#">
								  		返修退换货
								  	</a>
								  </div>
								  <div class="col-md-4 col-md-offset-1">
								  	<a href="#">
								  		我的问答
								  	</a>
								  </div>
								  <div class="col-md-4">
								  	<a href="#">								  	
								  		降价商品
								  	</a>
								  </div>
								  <div class="col-md-4 col-md-offset-1">
								  	<a href="#">
								  	  	我的关注
								  	</a>
								  </div>
								  <div class="col-md-4">
								  	<a href="#">
								  		我的京豆
								  	</a>
								  </div>
								  <div class="col-md-4 col-md-offset-1">
								  	<a href="#">
								  		我的优惠券
								  	</a>
								  </div>
								  <div class="col-md-4">
								  	<a href="#">
								  		京东白条
								  	</a>
								  </div>
								  <div class="col-md-4 col-md-offset-1">
								  	<a href="#">
								  		我的理财
								  	</a>
								  </div>
							</div>
						</li>
						<li><a href="#">京东会员</a></li>
						<li><a href="#">企业采购</a></li>
						<li class="kehufuwu">
							<a href="#">客户服务</a>
							<img src="img/topImg/drop.png"/>
							<div class="kefu">
								<div>
									<p><strong>特色主题</strong></p>
									<ul>
										<li><a href="#">品牌头条</a></li>
										<li><a href="#">发现好货</a></li>
										<li><a href="#">京东预售</a></li>
										<li><a href="#">尖er货</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="#">0元评测</a></li>
										<li><a href="#">In货推荐</a></li>
										<li><a href="#">北京老字号</a></li>
										<li><a href="#">买什么</a></li>
									</ul>
								</div>
								<div>
									<p><strong>行业频道</strong></p>
									<ul>
										<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><a href="#">农资频道</a></li>
										<li><a href="#">京东智能</a></li>
										<li><a href="#">玩3c</a></li>
										<!--<li><a></a></li>-->
										<!--<li><a>北京老字号</a></li>-->
										<!--<li><a>买什么</a></li>-->
									</ul>
								</div>
								<div>
									<p><strong>生活服务</strong></p>
									<ul>
										<li><a href="#">京东众筹</a></li>
										<li><a href="#">白条</a></li>
										<li><a href="#">京东金融APP</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><a href="#">京东众测</a></li>
										<!--<li><a>In货推荐</a></li>-->
										<!--<li><a>北京老字号</a></li>-->
										<!--<li><a>买什么</a></li>-->
									</ul>
								</div>
								<div>
									<p><strong>更多精选</strong></p>
									<ul>
										<li><a href="#">京东社区</a></li>
										<li><a href="#">京东通信</a></li>
										<li><a href="#">在线读书</a></li>
										<li><a href="#">京东E卡</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="#">English Site</a></li>
										<li><a href="#">服务市场</a></li>
										<li><a href="#">卖家入驻</a></li>
										<li><a href="#">企业采购</a></li>
										<!--<li><a>In货推荐</a></li>-->
										<!--<li><a>北京老字号</a></li>-->
										<!--<li><a>买什么</a></li>-->
									</ul>
								</div>
							</div>
						</li>
						<li><a href="#">网站导航</a></li>
						<li><a href="#">手机京东</a></li>
						
					</ul>	
				</div>
			</div>
		</div>

3.初始化样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body{
	background: #e3e4e5;
}
*{
	margin: 0;
	padding: 0;
	font-family: "微软雅黑";
}
a{
	text-decoration: none;
	
}
a:hover{
	text-decoration: none;
}
ul{
	margin: 0;
}
li{
	list-style: none;
}

4.导航的css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
/*头部导航栏*/
.nav-top{
	background: #ccc5c5;
}
.nav-mid{
	position: relative;
}
.jd{
	position: absolute;
	top: 0%;
	left: 0%;
	background: white;
	z-index: 888;
}
.nav-mid .area{
	width: 245px;
	height: 30px;
	/*display: inline-block;*/
	float: left;
	/*padding: 5px 5px;*/
	/*background: red;*/
}
.nav-mid .area .areajshu{
	position: relative;
	width: 60px;
	height: 100%;
	float: right;
	line-height: 30px;
}
.nav-mid .area .areajshu:hover{
	background: #fff;
}
/*.nav-mid .area i,span{*/
	/*float:right;*/
/*}*/
.nav-mid .area .areajshu i{
	/*margin-right: 5px;*/
	margin-left: 8px;
	color: red;
}
.nav-mid .area .areajshu span{
	color: #999;
	font-size: 12px;
}
.area .areajshu span #area{
	position: absolute;
	top: 30px;
	left: 0px;
	width: 180px;
	height: 138px;
	background: #fff;
	display: none;
	z-index: 999;
}
.area .areajshu span ul li{
	width: 30px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	float: left;
	margin:13px 0px 5px 12px;
}
.area .areajshu span ul li a{
	color: #999;
}
.area .areajshu span ul li:hover{
	background: #ccc5c5;
}
.area .areajshu span ul li:hover a{
	color: red;
	text-decoration: none;
}
.nav-mid .area .areajshu:hover{
	background: #fff;
}
.nav-mid .area .areajshu:hover #area{
	display: block;
}
/*登陆账号*/
.nav-mid .zhuce{
	width: 720px;
	height: 30px;
	float: right;
	/*background: red;*/
	/*padding: 5px 0px 5px 0px ;*/
	font-size: 12px;
	
}
.nav-mid .zhuce ul li{
	float: left;
	width: 80px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	/*border-right: 1px solid #e3e4e5;*/
}
.nav-mid .zhuce ul li a{
	color: #999;
}
.nav-mid .zhuce ul li a:hover{
	color: red;
}
.nav-mid .zhuce ul li>img{
	width: 10px;
}
.nav-mid .zhuce ul li.lis-myjd{
	position: relative;
}
.nav-mid .zhuce ul li.lis-myjd:hover{
	background: #fff;
}
.nav-mid .zhuce ul li.lis-myjd:hover .myjd{
	display: block;
	
}
.nav-mid .zhuce ul li .myjd{
	position: absolute;
	top: 30px;
	left: 0px;
	width: 280px;
	height: 160px;
	background: #fff;
	display: none;
	z-index: 999;
}
.nav-mid .zhuce ul li .myjd div{
	margin: 1px 20px;
	text-align: left;
}
.nav-mid .zhuce ul li .kefu{
	position: absolute;
	top: 30px;
	left: 0px;
	width: 1170px;
	height: 190px;
	background: #fff;
	padding: 10px 5px;
	display: none;
	z-index: 999;
}
.nav-mid .zhuce ul li .kefu div{
	width: 290px;
	height: 170px;
	/*background: red;*/
	float: left;
	border-right:1px solid #e7e7e7;
	padding-left: 18px;
}
.nav-mid .zhuce ul li .kefu div p{
	text-align: left;
	/*padding-left:4px ;*/
}
.nav-mid .zhuce ul li .kefu div ul li{
	margin: -11px 10px 4px 0px;
	text-align: left;
	/*padding-left:15px ;*/
}
.nav-mid .zhuce ul li.kehufuwu:hover{
	background: #fff;
}
.nav-mid .zhuce ul li.kehufuwu:hover .kefu{
	display: block;
}
/*搜索框部分*/
.search-out{
	position: relative;
	width: 100%;
	height: 140px;
	/*background: hotpink;*/
	text-align: center;
}
.search-out .search-int{
	display: inline-block;
	width: 50%;
	height: 43px;
	/*background: gold;*/
	margin:23px auto 0;
}
.search-out .search-int .text{
	width: 90%;
	height: 100%;
	float: left;
	padding-left:10px ;
	border: 1px solid red;
	border-right: none;
}
.search-out .search-int .button{
	width: 10%;
	height: 104%;
	background: red;
	float: right;
	margin: -2px 0px 0px 0px;
	
	
}
.search-out .search-int .button .sousuo{
	color: #fff;
	font-size: 20px;
}
/*购物车*/
.search-out .cart{
	position: absolute;
	right: 50px;
	top: 23px;
	width: 190px;
	height: 43px;
	background: #fff;
	line-height: 43px;
	/*display: inline-block;*/
	/*float: right;*/
}
.search-out .cart i{
	color:red;
}
.search-out .cart a{
	font-size: 12px;
	color:red;
}
.search-out .cart a:hover{
	color:red;
}
.search-out .cart span{
	position: absolute;
	top: 10px;
	right: 35px;
	display: inline-block;
	width: 15px;
	height: 15px;
	background: red;
	line-height: 15px;
	border-radius: 50%;
	color: #fff;
}
.search-out ul.youhui{
	width: 50%;
	height: 35px;
	margin: 0px auto 0;
}
.search-out ul.youhui li a{
	color: #999;
	/*font-size: 12px;*/
}
.search-out ul.youhui li{
	float: left;
	margin-right: 7px;
	line-height: 26px;
}
.search-out ul.youhui li:first-child a{
	color: red;
}
.search-out ul.miaosha{
	width: 63%;
	height: 35px;
	margin: 0 auto;
	/*background: red;*/
}
.search-out ul.miaosha li{
	float: left;
	line-height: 35px;
	margin-right: 34px;
}
.search-out ul.miaosha li a{
	color: #555;
	font-weight: 700;
	font-size: 16px;
}
.search-out ul.miaosha li a:hover{
	color: red;
}

December 5, 2016 By littleredhat