devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小米商城html+css+js全代码_小米商城代码

作者：weixin_40725706 | 2024-04-02 19:58:24

赞

踩

小米商城代码

差不多完成页面就是这样的，这里只展出两页

一共需要这些文件，自己建完就行

 

 

 index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. 		<link rel="stylesheet" type="text/css" href="css/index.css">
  7. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. 		<title>Xiaomi</title>
  9. 	</head>
  10. 	<body>
  11. 		<a name="top"></a>
  12.  
  13. 		<!-- 右下侧广告 -->
  14. 		<!-- top start -->
  15. 		<div class="top-bar">
  16. 			<div class="container">
  17. 				<div class="container-nav">
  18. 					<a href="#" class="nav-1">小米商城</a>
  19. 					<span class="sep">|</span>
  20. 					<a href="#" class="nav-1">MIUI</a>
  21. 					<span class="sep">|</span>
  22. 					<a href="#" class="nav-1">loT</a>
  23. 					<span class="sep">|</span>
  24. 					<a href="#" class="nav-1">云服务</a>
  25. 					<span class="sep">|</span>
  26. 					<a href="#" class="nav-1">天星数科</a>
  27. 					<span class="sep">|</span>
  28. 					<a href="#" class="nav-1">有品</a>
  29. 					<span class="sep">|</span>
  30. 					<a href="#" class="nav-1">小爱开放平台</a>
  31. 					<span class="sep">|</span>
  32. 					<a href="#" class="nav-1">企业团购</a>
  33. 					<span class="sep">|</span>
  34. 					<a href="#" class="nav-1">资质证照</a>
  35. 					<span class="sep">|</span>
  36. 					<a href="#" class="nav-1">协议规则</a>
  37. 					<span class="sep">|</span>
  38. 					<a href="#" class="nav-1 down">下载app</a>
  39. 					<div class="download-app">
  40. 						<img src="./img/download.png" alt="">
  41. 						<p>小米商城app</p>
  42. 					</div>
  43. 					<div class="sj"></div>
  44. 					<span class="sep">|</span>
  45. 					<a href="#" class="nav-1">智能生活</a>
  46. 					<span class="sep">|</span>
  47. 					<a href="#" class="nav-1">Select Location</a>
  48. 					<span class="sep">|</span>
  49. 				</div>
  50. 				<div class="gwc">
  51. 					<img src="./img/购物车.png" alt="">
  52. 					<span>购物车(0)</span>
  53. 					<div class="gwc-list">
  54. 						购物车中还没有商品，赶紧选购吧！
  55. 					</div>
  56. 				</div>
  57. 				<div class="container-right">
  58. 					<a href="#" class="nav-1">登录</a>
  59. 					<span class="sep">|</span>
  60. 					<a href="#" class="nav-1">注册</a>
  61. 					<span class="sep">|</span>
  62. 					<a href="#" class="nav-1" style="margin-right: 20px;">消息通知</a>
  63. 				</div>
  64. 			</div>
  65. 		</div>
  66. 		<!-- top-end -->
  67. 		<!-- middle start -->
  68. 		<div class="middle-content">
  69. 			<div class="header-logo">
  70. 				<div class="logo">
  71. 					<img src="./img/mi.png" alt="">
  72. 				</div>
  73. 				<div class="header-nav">
  74. 					<ul>
  75. 						<li class="header-nav-li">Xiaomi手机</li>
  76. 						<div class="header-item">
  77. 							<div class="header-item-content">
  78. 								<img src="./img/head.webp" alt="">
  79. 								<p>Xiaomi &nbsp;Civi</p>
  80. 								<p>2599元起</p>
  81. 							</div>
  82. 							<div class="shu"></div>
  83. 							<div class="header-item-content">
  84. 								<img src="./img/head.webp" alt="">
  85. 								<p>Xiaomi &nbsp;Civi</p>
  86. 								<p>2599元起</p>
  87. 							</div>
  88. 							<div class="shu"></div>
  89. 							<div class="header-item-content">
  90. 								<img src="./img/head.webp" alt="">
  91. 								<p>Xiaomi &nbsp;Civi</p>
  92. 								<p>2599元起</p>
  93. 							</div>
  94. 							<div class="shu"></div>
  95. 							<div class="header-item-content">
  96. 								<img src="./img/head.webp" alt="">
  97. 								<p>Xiaomi &nbsp;Civi</p>
  98. 								<p>2599元起</p>
  99. 							</div>
  100. 							<div class="shu"></div>
  101. 							<div class="header-item-content">
  102. 								<img src="./img/head.webp" alt="">
  103. 								<p>Xiaomi &nbsp;Civi</p>
  104. 								<p>2599元起</p>
  105. 							</div>
  106. 							<div class="shu"></div>
  107. 							<div class="header-item-content">
  108. 								<img src="./img/head.webp" alt="">
  109. 								<p>Xiaomi &nbsp;Civi</p>
  110. 								<p>2599元起</p>
  111. 							</div>
  112. 						</div>
  113. 						<li class="header-nav-li">Redmi手机</li>
  114. 						<div class="header-item">
  115. 							<div class="header-item-content">
  116. 								<img src="./img/head.webp" alt="">
  117. 								<p>Xiaomi &nbsp;Civi</p>
  118. 								<p>2599元起</p>
  119. 							</div>
  120. 							<div class="shu"></div>
  121. 							<div class="header-item-content">
  122. 								<img src="./img/head.webp" alt="">
  123. 								<p>Xiaomi &nbsp;Civi</p>
  124. 								<p>2599元起</p>
  125. 							</div>
  126. 							<div class="shu"></div>
  127. 							<div class="header-item-content">
  128. 								<img src="./img/head.webp" alt="">
  129. 								<p>Xiaomi &nbsp;Civi</p>
  130. 								<p>2599元起</p>
  131. 							</div>
  132. 							<div class="shu"></div>
  133. 							<div class="header-item-content">
  134. 								<img src="./img/head.webp" alt="">
  135. 								<p>Xiaomi &nbsp;Civi</p>
  136. 								<p>2599元起</p>
  137. 							</div>
  138. 							<div class="shu"></div>
  139. 							<div class="header-item-content">
  140. 								<img src="./img/head.webp" alt="">
  141. 								<p>Xiaomi &nbsp;Civi</p>
  142. 								<p>2599元起</p>
  143. 							</div>
  144. 							<div class="shu"></div>
  145. 							<div class="header-item-content">
  146. 								<img src="./img/head.webp" alt="">
  147. 								<p>Xiaomi &nbsp;Civi</p>
  148. 								<p>2599元起</p>
  149. 							</div>
  150. 						</div>
  151. 						<li class="header-nav-li">电视</li>
  152. 						<div class="header-item">
  153. 							<div class="header-item-content">
  154. 								<img src="./img/head.webp" alt="">
  155. 								<p>Xiaomi &nbsp;Civi</p>
  156. 								<p>2599元起</p>
  157. 							</div>
  158. 							<div class="shu"></div>
  159. 							<div class="header-item-content">
  160. 								<img src="./img/head.webp" alt="">
  161. 								<p>Xiaomi &nbsp;Civi</p>
  162. 								<p>2599元起</p>
  163. 							</div>
  164. 							<div class="shu"></div>
  165. 							<div class="header-item-content">
  166. 								<img src="./img/head.webp" alt="">
  167. 								<p>Xiaomi &nbsp;Civi</p>
  168. 								<p>2599元起</p>
  169. 							</div>
  170. 							<div class="shu"></div>
  171. 							<div class="header-item-content">
  172. 								<img src="./img/head.webp" alt="">
  173. 								<p>Xiaomi &nbsp;Civi</p>
  174. 								<p>2599元起</p>
  175. 							</div>
  176. 							<div class="shu"></div>
  177. 							<div class="header-item-content">
  178. 								<img src="./img/head.webp" alt="">
  179. 								<p>Xiaomi &nbsp;Civi</p>
  180. 								<p>2599元起</p>
  181. 							</div>
  182. 							<div class="shu"></div>
  183. 							<div class="header-item-content">
  184. 								<img src="./img/head.webp" alt="">
  185. 								<p>Xiaomi &nbsp;Civi</p>
  186. 								<p>2599元起</p>
  187. 							</div>
  188. 						</div>
  189. 						<li class="header-nav-li">笔记本</li>
  190. 						<div class="header-item">
  191. 							<div class="header-item-content">
  192. 								<img src="./img/head.webp" alt="">
  193. 								<p>Xiaomi &nbsp;Civi</p>
  194. 								<p>2599元起</p>
  195. 							</div>
  196. 							<div class="shu"></div>
  197. 							<div class="header-item-content">
  198. 								<img src="./img/head.webp" alt="">
  199. 								<p>Xiaomi &nbsp;Civi</p>
  200. 								<p>2599元起</p>
  201. 							</div>
  202. 							<div class="shu"></div>
  203. 							<div class="header-item-content">
  204. 								<img src="./img/head.webp" alt="">
  205. 								<p>Xiaomi &nbsp;Civi</p>
  206. 								<p>2599元起</p>
  207. 							</div>
  208. 							<div class="shu"></div>
  209. 							<div class="header-item-content">
  210. 								<img src="./img/head.webp" alt="">
  211. 								<p>Xiaomi &nbsp;Civi</p>
  212. 								<p>2599元起</p>
  213. 							</div>
  214. 							<div class="shu"></div>
  215. 							<div class="header-item-content">
  216. 								<img src="./img/head.webp" alt="">
  217. 								<p>Xiaomi &nbsp;Civi</p>
  218. 								<p>2599元起</p>
  219. 							</div>
  220. 							<div class="shu"></div>
  221. 							<div class="header-item-content">
  222. 								<img src="./img/head.webp" alt="">
  223. 								<p>Xiaomi &nbsp;Civi</p>
  224. 								<p>2599元起</p>
  225. 							</div>
  226. 						</div>
  227. 						<li class="header-nav-li">平板</li>
  228. 						<div class="header-item">
  229. 							<div class="header-item-content">
  230. 								<img src="./img/head.webp" alt="">
  231. 								<p>Xiaomi &nbsp;Civi</p>
  232. 								<p>2599元起</p>
  233. 							</div>
  234. 							<div class="shu"></div>
  235. 							<div class="header-item-content">
  236. 								<img src="./img/head.webp" alt="">
  237. 								<p>Xiaomi &nbsp;Civi</p>
  238. 								<p>2599元起</p>
  239. 							</div>
  240. 							<div class="shu"></div>
  241. 							<div class="header-item-content">
  242. 								<img src="./img/head.webp" alt="">
  243. 								<p>Xiaomi &nbsp;Civi</p>
  244. 								<p>2599元起</p>
  245. 							</div>
  246. 							<div class="shu"></div>
  247. 							<div class="header-item-content">
  248. 								<img src="./img/head.webp" alt="">
  249. 								<p>Xiaomi &nbsp;Civi</p>
  250. 								<p>2599元起</p>
  251. 							</div>
  252. 							<div class="shu"></div>
  253. 							<div class="header-item-content">
  254. 								<img src="./img/head.webp" alt="">
  255. 								<p>Xiaomi &nbsp;Civi</p>
  256. 								<p>2599元起</p>
  257. 							</div>
  258. 							<div class="shu"></div>
  259. 							<div class="header-item-content">
  260. 								<img src="./img/head.webp" alt="">
  261. 								<p>Xiaomi &nbsp;Civi</p>
  262. 								<p>2599元起</p>
  263. 							</div>
  264. 						</div>
  265. 						<li class="header-nav-li">家电</li>
  266. 						<div class="header-item">
  267. 							<div class="header-item-content">
  268. 								<img src="./img/head.webp" alt="">
  269. 								<p>Xiaomi &nbsp;Civi</p>
  270. 								<p>2599元起</p>
  271. 							</div>
  272. 							<div class="shu"></div>
  273. 							<div class="header-item-content">
  274. 								<img src="./img/head.webp" alt="">
  275. 								<p>Xiaomi &nbsp;Civi</p>
  276. 								<p>2599元起</p>
  277. 							</div>
  278. 							<div class="shu"></div>
  279. 							<div class="header-item-content">
  280. 								<img src="./img/head.webp" alt="">
  281. 								<p>Xiaomi &nbsp;Civi</p>
  282. 								<p>2599元起</p>
  283. 							</div>
  284. 							<div class="shu"></div>
  285. 							<div class="header-item-content">
  286. 								<img src="./img/head.webp" alt="">
  287. 								<p>Xiaomi &nbsp;Civi</p>
  288. 								<p>2599元起</p>
  289. 							</div>
  290. 							<div class="shu"></div>
  291. 							<div class="header-item-content">
  292. 								<img src="./img/head.webp" alt="">
  293. 								<p>Xiaomi &nbsp;Civi</p>
  294. 								<p>2599元起</p>
  295. 							</div>
  296. 							<div class="shu"></div>
  297. 							<div class="header-item-content">
  298. 								<img src="./img/head.webp" alt="">
  299. 								<p>Xiaomi &nbsp;Civi</p>
  300. 								<p>2599元起</p>
  301. 							</div>
  302. 						</div>
  303. 						<li class="header-nav-li">路由器</li>
  304. 						<div class="header-item">
  305. 							<div class="header-item-content">
  306. 								<img src="./img/head.webp" alt="">
  307. 								<p>Xiaomi &nbsp;Civi</p>
  308. 								<p>2599元起</p>
  309. 							</div>
  310. 							<div class="shu"></div>
  311. 							<div class="header-item-content">
  312. 								<img src="./img/head.webp" alt="">
  313. 								<p>Xiaomi &nbsp;Civi</p>
  314. 								<p>2599元起</p>
  315. 							</div>
  316. 							<div class="shu"></div>
  317. 							<div class="header-item-content">
  318. 								<img src="./img/head.webp" alt="">
  319. 								<p>Xiaomi &nbsp;Civi</p>
  320. 								<p>2599元起</p>
  321. 							</div>
  322. 							<div class="shu"></div>
  323. 							<div class="header-item-content">
  324. 								<img src="./img/head.webp" alt="">
  325. 								<p>Xiaomi &nbsp;Civi</p>
  326. 								<p>2599元起</p>
  327. 							</div>
  328. 							<div class="shu"></div>
  329. 							<div class="header-item-content">
  330. 								<img src="./img/head.webp" alt="">
  331. 								<p>Xiaomi &nbsp;Civi</p>
  332. 								<p>2599元起</p>
  333. 							</div>
  334. 							<div class="shu"></div>
  335. 							<div class="header-item-content">
  336. 								<img src="./img/head.webp" alt="">
  337. 								<p>Xiaomi &nbsp;Civi</p>
  338. 								<p>2599元起</p>
  339. 							</div>
  340. 						</div>
  341. 						<li class="header-nav-li">智能硬件</li>
  342. 						<div class="header-item">
  343. 							<div class="header-item-content">
  344. 								<img src="./img/head.webp" alt="">
  345. 								<p>Xiaomi &nbsp;Civi</p>
  346. 								<p>2599元起</p>
  347. 							</div>
  348. 							<div class="shu"></div>
  349. 							<div class="header-item-content">
  350. 								<img src="./img/head.webp" alt="">
  351. 								<p>Xiaomi &nbsp;Civi</p>
  352. 								<p>2599元起</p>
  353. 							</div>
  354. 							<div class="shu"></div>
  355. 							<div class="header-item-content">
  356. 								<img src="./img/head.webp" alt="">
  357. 								<p>Xiaomi &nbsp;Civi</p>
  358. 								<p>2599元起</p>
  359. 							</div>
  360. 							<div class="shu"></div>
  361. 							<div class="header-item-content">
  362. 								<img src="./img/head.webp" alt="">
  363. 								<p>Xiaomi &nbsp;Civi</p>
  364. 								<p>2599元起</p>
  365. 							</div>
  366. 							<div class="shu"></div>
  367. 							<div class="header-item-content">
  368. 								<img src="./img/head.webp" alt="">
  369. 								<p>Xiaomi &nbsp;Civi</p>
  370. 								<p>2599元起</p>
  371. 							</div>
  372. 							<div class="shu"></div>
  373. 							<div class="header-item-content">
  374. 								<img src="./img/head.webp" alt="">
  375. 								<p>Xiaomi &nbsp;Civi</p>
  376. 								<p>2599元起</p>
  377. 							</div>
  378. 						</div>
  379. 						<li class="header-nav-li">服务</li>
  380. 						<li class="header-nav-li">社区</li>
  381. 					</ul>
  382. 					<div class="header-right">
  383. 						<input type="text" placeholder="笔记本" class="text-search">
  384. 						<div class="search">
  385. 							<img src="./img/搜索.png" alt="">
  386. 						</div>
  387. 						<div class="list-1">
  388. 							<div>全部商品</div>
  389. 							<div>手机</div>
  390. 							<div>耳机</div>
  391. 							<div>洗衣机</div>
  392. 							<div>红米</div>
  393. 							<div>充电宝</div>
  394. 							<div>空调</div>
  395. 						</div>
  396. 					</div>
  397. 				</div>
  398. 			</div>
  399. 			<div class="middle-item">
  400. 				<div class="banner-left">
  401. 					<ul class="banner-left-ul">
  402. 						<li>手机
  403. 							<div class="banner-left-box">
  404. 								<div class="banner-left-img">
  405. 									<img src="./img/dahai.jpg" alt="" srcset="">
  406. 									<p>Xiaomi&nbsp;Civi</p>
  407. 								</div>
  408. 								<div class="banner-left-img">
  409. 									<img src="./img/dahai.jpg" alt="" srcset="">
  410. 									<p>Xiaomi&nbsp;Civi</p>
  411. 								</div>
  412. 								<div class="banner-left-img">
  413. 									<img src="./img/dahai.jpg" alt="" srcset="">
  414. 									<p>Xiaomi&nbsp;Civi</p>
  415. 								</div>
  416. 								<div class="banner-left-img">
  417. 									<img src="./img/dahai.jpg" alt="" srcset="">
  418. 									<p>Xiaomi&nbsp;Civi</p>
  419. 								</div>
  420. 								<div class="banner-left-img">
  421. 									<img src="./img/dahai.jpg" alt="" srcset="">
  422. 									<p>Xiaomi&nbsp;Civi</p>
  423. 								</div>
  424. 								<div class="banner-left-img">
  425. 									<img src="./img/dahai.jpg" alt="" srcset="">
  426. 									<p>Xiaomi&nbsp;Civi</p>
  427. 								</div>
  428. 								<div class="banner-left-img">
  429. 									<img src="./img/dahai.jpg" alt="" srcset="">
  430. 									<p>Xiaomi&nbsp;Civi</p>
  431. 								</div>
  432. 								<div class="banner-left-img">
  433. 									<img src="./img/dahai.jpg" alt="" srcset="">
  434. 									<p>Xiaomi&nbsp;Civi</p>
  435. 								</div>
  436. 								<div class="banner-left-img">
  437. 									<img src="./img/dahai.jpg" alt="" srcset="">
  438. 									<p>Xiaomi&nbsp;Civi</p>
  439. 								</div>
  440. 								<div class="banner-left-img">
  441. 									<img src="./img/dahai.jpg" alt="" srcset="">
  442. 									<p>Xiaomi&nbsp;Civi</p>
  443. 								</div>
  444. 								<div class="banner-left-img">
  445. 									<img src="./img/dahai.jpg" alt="" srcset="">
  446. 									<p>Xiaomi&nbsp;Civi</p>
  447. 								</div>
  448. 								<div class="banner-left-img">
  449. 									<img src="./img/dahai.jpg" alt="" srcset="">
  450. 									<p>Xiaomi&nbsp;Civi</p>
  451. 								</div>
  452. 								<div class="banner-left-img">
  453. 									<img src="./img/dahai.jpg" alt="" srcset="">
  454. 									<p>Xiaomi&nbsp;Civi</p>
  455. 								</div>
  456. 								<div class="banner-left-img">
  457. 									<img src="./img/dahai.jpg" alt="" srcset="">
  458. 									<p>Xiaomi&nbsp;Civi</p>
  459. 								</div>
  460. 								<div class="banner-left-img">
  461. 									<img src="./img/dahai.jpg" alt="" srcset="">
  462. 									<p>Xiaomi&nbsp;Civi</p>
  463. 								</div>
  464. 								<div class="banner-left-img">
  465. 									<img src="./img/dahai.jpg" alt="" srcset="">
  466. 									<p>Xiaomi&nbsp;Civi</p>
  467. 								</div>
  468. 								<div class="banner-left-img">
  469. 									<img src="./img/dahai.jpg" alt="" srcset="">
  470. 									<p>Xiaomi&nbsp;Civi</p>
  471. 								</div>
  472. 								<div class="banner-left-img">
  473. 									<img src="./img/dahai.jpg" alt="" srcset="">
  474. 									<p>Xiaomi&nbsp;Civi</p>
  475. 								</div>
  476. 								<div class="banner-left-img">
  477. 									<img src="./img/dahai.jpg" alt="" srcset="">
  478. 									<p>Xiaomi&nbsp;Civi</p>
  479. 								</div>
  480. 								<div class="banner-left-img">
  481. 									<img src="./img/dahai.jpg" alt="" srcset="">
  482. 									<p>Xiaomi&nbsp;Civi</p>
  483. 								</div>
  484. 								<div class="banner-left-img">
  485. 									<img src="./img/dahai.jpg" alt="" srcset="">
  486. 									<p>Xiaomi&nbsp;Civi</p>
  487. 								</div>
  488. 								<div class="banner-left-img">
  489. 									<img src="./img/dahai.jpg" alt="" srcset="">
  490. 									<p>Xiaomi&nbsp;Civi</p>
  491. 								</div>
  492. 								<div class="banner-left-img">
  493. 									<img src="./img/dahai.jpg" alt="" srcset="">
  494. 									<p>Xiaomi&nbsp;Civi</p>
  495. 								</div>
  496. 								<div class="banner-left-img">
  497. 									<img src="./img/dahai.jpg" alt="" srcset="">
  498. 									<p>Xiaomi&nbsp;Civi</p>
  499. 								</div>
  500. 							</div>
  501. 						</li>
  502. 						<li>电视
  503. 							<div class="banner-left-box">
  504. 								<div class="banner-left-img">
  505. 									<img src="./img/dahai.jpg" alt="" srcset="">
  506. 									<p>Xiaomi&nbsp;Civi</p>
  507. 								</div>
  508. 								<div class="banner-left-img">
  509. 									<img src="./img/dahai.jpg" alt="" srcset="">
  510. 									<p>Xiaomi&nbsp;Civi</p>
  511. 								</div>
  512. 								<div class="banner-left-img">
  513. 									<img src="./img/dahai.jpg" alt="" srcset="">
  514. 									<p>Xiaomi&nbsp;Civi</p>
  515. 								</div>
  516. 								<div class="banner-left-img">
  517. 									<img src="./img/dahai.jpg" alt="" srcset="">
  518. 									<p>Xiaomi&nbsp;Civi</p>
  519. 								</div>
  520. 								<div class="banner-left-img">
  521. 									<img src="./img/dahai.jpg" alt="" srcset="">
  522. 									<p>Xiaomi&nbsp;Civi</p>
  523. 								</div>
  524. 								<div class="banner-left-img">
  525. 									<img src="./img/dahai.jpg" alt="" srcset="">
  526. 									<p>Xiaomi&nbsp;Civi</p>
  527. 								</div>
  528. 								<div class="banner-left-img">
  529. 									<img src="./img/dahai.jpg" alt="" srcset="">
  530. 									<p>Xiaomi&nbsp;Civi</p>
  531. 								</div>
  532. 								<div class="banner-left-img">
  533. 									<img src="./img/dahai.jpg" alt="" srcset="">
  534. 									<p>Xiaomi&nbsp;Civi</p>
  535. 								</div>
  536. 								<div class="banner-left-img">
  537. 									<img src="./img/dahai.jpg" alt="" srcset="">
  538. 									<p>Xiaomi&nbsp;Civi</p>
  539. 								</div>
  540. 								<div class="banner-left-img">
  541. 									<img src="./img/dahai.jpg" alt="" srcset="">
  542. 									<p>Xiaomi&nbsp;Civi</p>
  543. 								</div>
  544. 								<div class="banner-left-img">
  545. 									<img src="./img/dahai.jpg" alt="" srcset="">
  546. 									<p>Xiaomi&nbsp;Civi</p>
  547. 								</div>
  548. 								<div class="banner-left-img">
  549. 									<img src="./img/dahai.jpg" alt="" srcset="">
  550. 									<p>Xiaomi&nbsp;Civi</p>
  551. 								</div>
  552. 								<div class="banner-left-img">
  553. 									<img src="./img/dahai.jpg" alt="" srcset="">
  554. 									<p>Xiaomi&nbsp;Civi</p>
  555. 								</div>
  556. 								<div class="banner-left-img">
  557. 									<img src="./img/dahai.jpg" alt="" srcset="">
  558. 									<p>Xiaomi&nbsp;Civi</p>
  559. 								</div>
  560. 								<div class="banner-left-img">
  561. 									<img src="./img/dahai.jpg" alt="" srcset="">
  562. 									<p>Xiaomi&nbsp;Civi</p>
  563. 								</div>
  564. 								<div class="banner-left-img">
  565. 									<img src="./img/dahai.jpg" alt="" srcset="">
  566. 									<p>Xiaomi&nbsp;Civi</p>
  567. 								</div>
  568. 								<div class="banner-left-img">
  569. 									<img src="./img/dahai.jpg" alt="" srcset="">
  570. 									<p>Xiaomi&nbsp;Civi</p>
  571. 								</div>
  572. 								<div class="banner-left-img">
  573. 									<img src="./img/dahai.jpg" alt="" srcset="">
  574. 									<p>Xiaomi&nbsp;Civi</p>
  575. 								</div>
  576. 							</div>
  577. 						</li>
  578. 						<li>笔记本&nbsp;平板
  579. 							<div class="banner-left-box">
  580. 								<div class="banner-left-img">
  581. 									<img src="./img/dahai.jpg" alt="" srcset="">
  582. 									<p>Xiaomi&nbsp;Civi</p>
  583. 								</div>
  584. 								<div class="banner-left-img">
  585. 									<img src="./img/dahai.jpg" alt="" srcset="">
  586. 									<p>Xiaomi&nbsp;Civi</p>
  587. 								</div>
  588. 								<div class="banner-left-img">
  589. 									<img src="./img/dahai.jpg" alt="" srcset="">
  590. 									<p>Xiaomi&nbsp;Civi</p>
  591. 								</div>
  592. 								<div class="banner-left-img">
  593. 									<img src="./img/dahai.jpg" alt="" srcset="">
  594. 									<p>Xiaomi&nbsp;Civi</p>
  595. 								</div>
  596. 								<div class="banner-left-img">
  597. 									<img src="./img/dahai.jpg" alt="" srcset="">
  598. 									<p>Xiaomi&nbsp;Civi</p>
  599. 								</div>
  600. 								<div class="banner-left-img">
  601. 									<img src="./img/dahai.jpg" alt="" srcset="">
  602. 									<p>Xiaomi&nbsp;Civi</p>
  603. 								</div>
  604. 								<div class="banner-left-img">
  605. 									<img src="./img/dahai.jpg" alt="" srcset="">
  606. 									<p>Xiaomi&nbsp;Civi</p>
  607. 								</div>
  608. 								<div class="banner-left-img">
  609. 									<img src="./img/dahai.jpg" alt="" srcset="">
  610. 									<p>Xiaomi&nbsp;Civi</p>
  611. 								</div>
  612. 								<div class="banner-left-img">
  613. 									<img src="./img/dahai.jpg" alt="" srcset="">
  614. 									<p>Xiaomi&nbsp;Civi</p>
  615. 								</div>
  616. 								<div class="banner-left-img">
  617. 									<img src="./img/dahai.jpg" alt="" srcset="">
  618. 									<p>Xiaomi&nbsp;Civi</p>
  619. 								</div>
  620. 								<div class="banner-left-img">
  621. 									<img src="./img/dahai.jpg" alt="" srcset="">
  622. 									<p>Xiaomi&nbsp;Civi</p>
  623. 								</div>
  624. 								<div class="banner-left-img">
  625. 									<img src="./img/dahai.jpg" alt="" srcset="">
  626. 									<p>Xiaomi&nbsp;Civi</p>
  627. 								</div>
  628. 								<div class="banner-left-img">
  629. 									<img src="./img/dahai.jpg" alt="" srcset="">
  630. 									<p>Xiaomi&nbsp;Civi</p>
  631. 								</div>
  632. 								<div class="banner-left-img">
  633. 									<img src="./img/dahai.jpg" alt="" srcset="">
  634. 									<p>Xiaomi&nbsp;Civi</p>
  635. 								</div>
  636. 								<div class="banner-left-img">
  637. 									<img src="./img/dahai.jpg" alt="" srcset="">
  638. 									<p>Xiaomi&nbsp;Civi</p>
  639. 								</div>
  640. 								<div class="banner-left-img">
  641. 									<img src="./img/dahai.jpg" alt="" srcset="">
  642. 									<p>Xiaomi&nbsp;Civi</p>
  643. 								</div>
  644. 							</div>
  645. 						</li>
  646. 						<li>家电
  647. 							<div class="banner-left-box">
  648.  
  649. 								<div class="banner-left-img">
  650. 									<img src="./img/dahai.jpg" alt="" srcset="">
  651. 									<p>Xiaomi&nbsp;Civi</p>
  652. 								</div>
  653. 								<div class="banner-left-img">
  654. 									<img src="./img/dahai.jpg" alt="" srcset="">
  655. 									<p>Xiaomi&nbsp;Civi</p>
  656. 								</div>
  657. 								<div class="banner-left-img">
  658. 									<img src="./img/dahai.jpg" alt="" srcset="">
  659. 									<p>Xiaomi&nbsp;Civi</p>
  660. 								</div>
  661. 								<div class="banner-left-img">
  662. 									<img src="./img/dahai.jpg" alt="" srcset="">
  663. 									<p>Xiaomi&nbsp;Civi</p>
  664. 								</div>
  665. 								<div class="banner-left-img">
  666. 									<img src="./img/dahai.jpg" alt="" srcset="">
  667. 									<p>Xiaomi&nbsp;Civi</p>
  668. 								</div>
  669. 								<div class="banner-left-img">
  670. 									<img src="./img/dahai.jpg" alt="" srcset="">
  671. 									<p>Xiaomi&nbsp;Civi</p>
  672. 								</div>
  673. 								<div class="banner-left-img">
  674. 									<img src="./img/dahai.jpg" alt="" srcset="">
  675. 									<p>Xiaomi&nbsp;Civi</p>
  676. 								</div>
  677. 								<div class="banner-left-img">
  678. 									<img src="./img/dahai.jpg" alt="" srcset="">
  679. 									<p>Xiaomi&nbsp;Civi</p>
  680. 								</div>
  681. 								<div class="banner-left-img">
  682. 									<img src="./img/dahai.jpg" alt="" srcset="">
  683. 									<p>Xiaomi&nbsp;Civi</p>
  684. 								</div>
  685. 								<div class="banner-left-img">
  686. 									<img src="./img/dahai.jpg" alt="" srcset="">
  687. 									<p>Xiaomi&nbsp;Civi</p>
  688. 								</div>
  689. 								<div class="banner-left-img">
  690. 									<img src="./img/dahai.jpg" alt="" srcset="">
  691. 									<p>Xiaomi&nbsp;Civi</p>
  692. 								</div>
  693. 								<div class="banner-left-img">
  694. 									<img src="./img/dahai.jpg" alt="" srcset="">
  695. 									<p>Xiaomi&nbsp;Civi</p>
  696. 								</div>
  697. 								<div class="banner-left-img">
  698. 									<img src="./img/dahai.jpg" alt="" srcset="">
  699. 									<p>Xiaomi&nbsp;Civi</p>
  700. 								</div>
  701. 								<div class="banner-left-img">
  702. 									<img src="./img/dahai.jpg" alt="" srcset="">
  703. 									<p>Xiaomi&nbsp;Civi</p>
  704. 								</div>
  705. 								<div class="banner-left-img">
  706. 									<img src="./img/dahai.jpg" alt="" srcset="">
  707. 									<p>Xiaomi&nbsp;Civi</p>
  708. 								</div>
  709. 								<div class="banner-left-img">
  710. 									<img src="./img/dahai.jpg" alt="" srcset="">
  711. 									<p>Xiaomi&nbsp;Civi</p>
  712. 								</div>
  713. 								<div class="banner-left-img">
  714. 									<img src="./img/dahai.jpg" alt="" srcset="">
  715. 									<p>Xiaomi&nbsp;Civi</p>
  716. 								</div>
  717. 								<div class="banner-left-img">
  718. 									<img src="./img/dahai.jpg" alt="" srcset="">
  719. 									<p>Xiaomi&nbsp;Civi</p>
  720. 								</div>
  721. 								<div class="banner-left-img">
  722. 									<img src="./img/dahai.jpg" alt="" srcset="">
  723. 									<p>Xiaomi&nbsp;Civi</p>
  724. 								</div>
  725. 							</div>
  726. 						</li>
  727. 						<li>出行&nbsp;穿戴
  728. 							<div class="banner-left-box">
  729. 								<div class="banner-left-img">
  730. 									<img src="./img/dahai.jpg" alt="" srcset="">
  731. 									<p>Xiaomi&nbsp;Civi</p>
  732. 								</div>
  733. 								<div class="banner-left-img">
  734. 									<img src="./img/dahai.jpg" alt="" srcset="">
  735. 									<p>Xiaomi&nbsp;Civi</p>
  736. 								</div>
  737. 								<div class="banner-left-img">
  738. 									<img src="./img/dahai.jpg" alt="" srcset="">
  739. 									<p>Xiaomi&nbsp;Civi</p>
  740. 								</div>
  741. 								<div class="banner-left-img">
  742. 									<img src="./img/dahai.jpg" alt="" srcset="">
  743. 									<p>Xiaomi&nbsp;Civi</p>
  744. 								</div>
  745. 								<div class="banner-left-img">
  746. 									<img src="./img/dahai.jpg" alt="" srcset="">
  747. 									<p>Xiaomi&nbsp;Civi</p>
  748. 								</div>
  749. 								<div class="banner-left-img">
  750. 									<img src="./img/dahai.jpg" alt="" srcset="">
  751. 									<p>Xiaomi&nbsp;Civi</p>
  752. 								</div>
  753. 								<div class="banner-left-img">
  754. 									<img src="./img/dahai.jpg" alt="" srcset="">
  755. 									<p>Xiaomi&nbsp;Civi</p>
  756. 								</div>
  757. 								<div class="banner-left-img">
  758. 									<img src="./img/dahai.jpg" alt="" srcset="">
  759. 									<p>Xiaomi&nbsp;Civi</p>
  760. 								</div>
  761. 								<div class="banner-left-img">
  762. 									<img src="./img/dahai.jpg" alt="" srcset="">
  763. 									<p>Xiaomi&nbsp;Civi</p>
  764. 								</div>
  765. 								<div class="banner-left-img">
  766. 									<img src="./img/dahai.jpg" alt="" srcset="">
  767. 									<p>Xiaomi&nbsp;Civi</p>
  768. 								</div>
  769. 								<div class="banner-left-img">
  770. 									<img src="./img/dahai.jpg" alt="" srcset="">
  771. 									<p>Xiaomi&nbsp;Civi</p>
  772. 								</div>
  773. 								<div class="banner-left-img">
  774. 									<img src="./img/dahai.jpg" alt="" srcset="">
  775. 									<p>Xiaomi&nbsp;Civi</p>
  776. 								</div>
  777. 								<div class="banner-left-img">
  778. 									<img src="./img/dahai.jpg" alt="" srcset="">
  779. 									<p>Xiaomi&nbsp;Civi</p>
  780. 								</div>
  781. 								<div class="banner-left-img">
  782. 									<img src="./img/dahai.jpg" alt="" srcset="">
  783. 									<p>Xiaomi&nbsp;Civi</p>
  784. 								</div>
  785. 								<div class="banner-left-img">
  786. 									<img src="./img/dahai.jpg" alt="" srcset="">
  787. 									<p>Xiaomi&nbsp;Civi</p>
  788. 								</div>
  789. 								<div class="banner-left-img">
  790. 									<img src="./img/dahai.jpg" alt="" srcset="">
  791. 									<p>Xiaomi&nbsp;Civi</p>
  792. 								</div>
  793. 								<div class="banner-left-img">
  794. 									<img src="./img/dahai.jpg" alt="" srcset="">
  795. 									<p>Xiaomi&nbsp;Civi</p>
  796. 								</div>
  797. 								<div class="banner-left-img">
  798. 									<img src="./img/dahai.jpg" alt="" srcset="">
  799. 									<p>Xiaomi&nbsp;Civi</p>
  800. 								</div>
  801. 								<div class="banner-left-img">
  802. 									<img src="./img/dahai.jpg" alt="" srcset="">
  803. 									<p>Xiaomi&nbsp;Civi</p>
  804. 								</div>
  805. 								<div class="banner-left-img">
  806. 									<img src="./img/dahai.jpg" alt="" srcset="">
  807. 									<p>Xiaomi&nbsp;Civi</p>
  808. 								</div>
  809. 								<div class="banner-left-img">
  810. 									<img src="./img/dahai.jpg" alt="" srcset="">
  811. 									<p>Xiaomi&nbsp;Civi</p>
  812. 								</div>
  813. 								<div class="banner-left-img">
  814. 									<img src="./img/dahai.jpg" alt="" srcset="">
  815. 									<p>Xiaomi&nbsp;Civi</p>
  816. 								</div>
  817. 								<div class="banner-left-img">
  818. 									<img src="./img/dahai.jpg" alt="" srcset="">
  819. 									<p>Xiaomi&nbsp;Civi</p>
  820. 								</div>
  821. 								<div class="banner-left-img">
  822. 									<img src="./img/dahai.jpg" alt="" srcset="">
  823. 									<p>Xiaomi&nbsp;Civi</p>
  824. 								</div>
  825. 							</div>
  826. 						</li>
  827. 						<li>智能&nbsp;路由器
  828. 							<div class="banner-left-box">
  829. 								<div class="banner-left-img">
  830. 									<img src="./img/dahai.jpg" alt="" srcset="">
  831. 									<p>Xiaomi&nbsp;Civi</p>
  832. 								</div>
  833. 								<div class="banner-left-img">
  834. 									<img src="./img/dahai.jpg" alt="" srcset="">
  835. 									<p>Xiaomi&nbsp;Civi</p>
  836. 								</div>
  837. 								<div class="banner-left-img">
  838. 									<img src="./img/dahai.jpg" alt="" srcset="">
  839. 									<p>Xiaomi&nbsp;Civi</p>
  840. 								</div>
  841. 								<div class="banner-left-img">
  842. 									<img src="./img/dahai.jpg" alt="" srcset="">
  843. 									<p>Xiaomi&nbsp;Civi</p>
  844. 								</div>
  845. 								<div class="banner-left-img">
  846. 									<img src="./img/dahai.jpg" alt="" srcset="">
  847. 									<p>Xiaomi&nbsp;Civi</p>
  848. 								</div>
  849. 								<div class="banner-left-img">
  850. 									<img src="./img/dahai.jpg" alt="" srcset="">
  851. 									<p>Xiaomi&nbsp;Civi</p>
  852. 								</div>
  853. 								<div class="banner-left-img">
  854. 									<img src="./img/dahai.jpg" alt="" srcset="">
  855. 									<p>Xiaomi&nbsp;Civi</p>
  856. 								</div>
  857. 								<div class="banner-left-img">
  858. 									<img src="./img/dahai.jpg" alt="" srcset="">
  859. 									<p>Xiaomi&nbsp;Civi</p>
  860. 								</div>
  861. 								<div class="banner-left-img">
  862. 									<img src="./img/dahai.jpg" alt="" srcset="">
  863. 									<p>Xiaomi&nbsp;Civi</p>
  864. 								</div>
  865. 								<div class="banner-left-img">
  866. 									<img src="./img/dahai.jpg" alt="" srcset="">
  867. 									<p>Xiaomi&nbsp;Civi</p>
  868. 								</div>
  869. 								<div class="banner-left-img">
  870. 									<img src="./img/dahai.jpg" alt="" srcset="">
  871. 									<p>Xiaomi&nbsp;Civi</p>
  872. 								</div>
  873. 								<div class="banner-left-img">
  874. 									<img src="./img/dahai.jpg" alt="" srcset="">
  875. 									<p>Xiaomi&nbsp;Civi</p>
  876. 								</div>
  877. 								<div class="banner-left-img">
  878. 									<img src="./img/dahai.jpg" alt="" srcset="">
  879. 									<p>Xiaomi&nbsp;Civi</p>
  880. 								</div>
  881. 								<div class="banner-left-img">
  882. 									<img src="./img/dahai.jpg" alt="" srcset="">
  883. 									<p>Xiaomi&nbsp;Civi</p>
  884. 								</div>
  885. 								<div class="banner-left-img">
  886. 									<img src="./img/dahai.jpg" alt="" srcset="">
  887. 									<p>Xiaomi&nbsp;Civi</p>
  888. 								</div>
  889. 								<div class="banner-left-img">
  890. 									<img src="./img/dahai.jpg" alt="" srcset="">
  891. 									<p>Xiaomi&nbsp;Civi</p>
  892. 								</div>
  893. 								<div class="banner-left-img">
  894. 									<img src="./img/dahai.jpg" alt="" srcset="">
  895. 									<p>Xiaomi&nbsp;Civi</p>
  896. 								</div>
  897. 								<div class="banner-left-img">
  898. 									<img src="./img/dahai.jpg" alt="" srcset="">
  899. 									<p>Xiaomi&nbsp;Civi</p>
  900. 								</div>
  901. 								<div class="banner-left-img">
  902. 									<img src="./img/dahai.jpg" alt="" srcset="">
  903. 									<p>Xiaomi&nbsp;Civi</p>
  904. 								</div>
  905. 								<div class="banner-left-img">
  906. 									<img src="./img/dahai.jpg" alt="" srcset="">
  907. 									<p>Xiaomi&nbsp;Civi</p>
  908. 								</div>
  909. 								<div class="banner-left-img">
  910. 									<img src="./img/dahai.jpg" alt="" srcset="">
  911. 									<p>Xiaomi&nbsp;Civi</p>
  912. 								</div>
  913. 								<div class="banner-left-img">
  914. 									<img src="./img/dahai.jpg" alt="" srcset="">
  915. 									<p>Xiaomi&nbsp;Civi</p>
  916. 								</div>
  917. 								<div class="banner-left-img">
  918. 									<img src="./img/dahai.jpg" alt="" srcset="">
  919. 									<p>Xiaomi&nbsp;Civi</p>
  920. 								</div>
  921. 								<div class="banner-left-img">
  922. 									<img src="./img/dahai.jpg" alt="" srcset="">
  923. 									<p>Xiaomi&nbsp;Civi</p>
  924. 								</div>
  925. 							</div>
  926. 						</li>
  927. 						<li>电源&nbsp;配件
  928. 							<div class="banner-left-box">
  929. 								<div class="banner-left-img">
  930. 									<img src="./img/dahai.jpg" alt="" srcset="">
  931. 									<p>Xiaomi&nbsp;Civi</p>
  932. 								</div>
  933. 								<div class="banner-left-img">
  934. 									<img src="./img/dahai.jpg" alt="" srcset="">
  935. 									<p>Xiaomi&nbsp;Civi</p>
  936. 								</div>
  937. 								<div class="banner-left-img">
  938. 									<img src="./img/dahai.jpg" alt="" srcset="">
  939. 									<p>Xiaomi&nbsp;Civi</p>
  940. 								</div>
  941. 								<div class="banner-left-img">
  942. 									<img src="./img/dahai.jpg" alt="" srcset="">
  943. 									<p>Xiaomi&nbsp;Civi</p>
  944. 								</div>
  945. 								<div class="banner-left-img">
  946. 									<img src="./img/dahai.jpg" alt="" srcset="">
  947. 									<p>Xiaomi&nbsp;Civi</p>
  948. 								</div>
  949. 								<div class="banner-left-img">
  950. 									<img src="./img/dahai.jpg" alt="" srcset="">
  951. 									<p>Xiaomi&nbsp;Civi</p>
  952. 								</div>
  953. 								<div class="banner-left-img">
  954. 									<img src="./img/dahai.jpg" alt="" srcset="">
  955. 									<p>Xiaomi&nbsp;Civi</p>
  956. 								</div>
  957. 								<div class="banner-left-img">
  958. 									<img src="./img/dahai.jpg" alt="" srcset="">
  959. 									<p>Xiaomi&nbsp;Civi</p>
  960. 								</div>
  961. 								<div class="banner-left-img">
  962. 									<img src="./img/dahai.jpg" alt="" srcset="">
  963. 									<p>Xiaomi&nbsp;Civi</p>
  964. 								</div>
  965. 							</div>
  966. 						</li>
  967. 						<li>健康&nbsp;儿童
  968. 							<div class="banner-left-box">
  969.  
  970. 								<div class="banner-left-img">
  971. 									<img src="./img/dahai.jpg" alt="" srcset="">
  972. 									<p>Xiaomi&nbsp;Civi</p>
  973. 								</div>
  974. 								<div class="banner-left-img">
  975. 									<img src="./img/dahai.jpg" alt="" srcset="">
  976. 									<p>Xiaomi&nbsp;Civi</p>
  977. 								</div>
  978. 								<div class="banner-left-img">
  979. 									<img src="./img/dahai.jpg" alt="" srcset="">
  980. 									<p>Xiaomi&nbsp;Civi</p>
  981. 								</div>
  982. 								<div class="banner-left-img">
  983. 									<img src="./img/dahai.jpg" alt="" srcset="">
  984. 									<p>Xiaomi&nbsp;Civi</p>
  985. 								</div>
  986. 								<div class="banner-left-img">
  987. 									<img src="./img/dahai.jpg" alt="" srcset="">
  988. 									<p>Xiaomi&nbsp;Civi</p>
  989. 								</div>
  990. 								<div class="banner-left-img">
  991. 									<img src="./img/dahai.jpg" alt="" srcset="">
  992. 									<p>Xiaomi&nbsp;Civi</p>
  993. 								</div>
  994. 								<div class="banner-left-img">
  995. 									<img src="./img/dahai.jpg" alt="" srcset="">
  996. 									<p>Xiaomi&nbsp;Civi</p>
  997. 								</div>
  998. 								<div class="banner-left-img">
  999. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1000. 									<p>Xiaomi&nbsp;Civi</p>
  1001. 								</div>
  1002. 								<div class="banner-left-img">
  1003. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1004. 									<p>Xiaomi&nbsp;Civi</p>
  1005. 								</div>
  1006. 								<div class="banner-left-img">
  1007. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1008. 									<p>Xiaomi&nbsp;Civi</p>
  1009. 								</div>
  1010. 								<div class="banner-left-img">
  1011. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1012. 									<p>Xiaomi&nbsp;Civi</p>
  1013. 								</div>
  1014. 								<div class="banner-left-img">
  1015. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1016. 									<p>Xiaomi&nbsp;Civi</p>
  1017. 								</div>
  1018. 								<div class="banner-left-img">
  1019. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1020. 									<p>Xiaomi&nbsp;Civi</p>
  1021. 								</div>
  1022. 								<div class="banner-left-img">
  1023. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1024. 									<p>Xiaomi&nbsp;Civi</p>
  1025. 								</div>
  1026. 								<div class="banner-left-img">
  1027. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1028. 									<p>Xiaomi&nbsp;Civi</p>
  1029. 								</div>
  1030. 								<div class="banner-left-img">
  1031. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1032. 									<p>Xiaomi&nbsp;Civi</p>
  1033. 								</div>
  1034. 								<div class="banner-left-img">
  1035. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1036. 									<p>Xiaomi&nbsp;Civi</p>
  1037. 								</div>
  1038. 							</div>
  1039. 						</li>
  1040. 						<li>耳机&nbsp;音箱
  1041. 							<div class="banner-left-box">
  1042. 								<div class="banner-left-img">
  1043. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1044. 									<p>Xiaomi&nbsp;Civi</p>
  1045. 								</div>
  1046. 								<div class="banner-left-img">
  1047. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1048. 									<p>Xiaomi&nbsp;Civi</p>
  1049. 								</div>
  1050. 								<div class="banner-left-img">
  1051. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1052. 									<p>Xiaomi&nbsp;Civi</p>
  1053. 								</div>
  1054. 								<div class="banner-left-img">
  1055. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1056. 									<p>Xiaomi&nbsp;Civi</p>
  1057. 								</div>
  1058. 								<div class="banner-left-img">
  1059. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1060. 									<p>Xiaomi&nbsp;Civi</p>
  1061. 								</div>
  1062. 								<div class="banner-left-img">
  1063. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1064. 									<p>Xiaomi&nbsp;Civi</p>
  1065. 								</div>
  1066. 								<div class="banner-left-img">
  1067. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1068. 									<p>Xiaomi&nbsp;Civi</p>
  1069. 								</div>
  1070. 								<div class="banner-left-img">
  1071. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1072. 									<p>Xiaomi&nbsp;Civi</p>
  1073. 								</div>
  1074. 								<div class="banner-left-img">
  1075. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1076. 									<p>Xiaomi&nbsp;Civi</p>
  1077. 								</div>
  1078. 								<div class="banner-left-img">
  1079. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1080. 									<p>Xiaomi&nbsp;Civi</p>
  1081. 								</div>
  1082. 								<div class="banner-left-img">
  1083. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1084. 									<p>Xiaomi&nbsp;Civi</p>
  1085. 								</div>
  1086. 								<div class="banner-left-img">
  1087. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1088. 									<p>Xiaomi&nbsp;Civi</p>
  1089. 								</div>
  1090. 							</div>
  1091. 						</li>
  1092. 						<li>生活&nbsp;箱包
  1093. 							<div class="banner-left-box">
  1094. 								<div class="banner-left-img">
  1095. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1096. 									<p>Xiaomi&nbsp;Civi</p>
  1097. 								</div>
  1098. 								<div class="banner-left-img">
  1099. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1100. 									<p>Xiaomi&nbsp;Civi</p>
  1101. 								</div>
  1102. 								<div class="banner-left-img">
  1103. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1104. 									<p>Xiaomi&nbsp;Civi</p>
  1105. 								</div>
  1106. 								<div class="banner-left-img">
  1107. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1108. 									<p>Xiaomi&nbsp;Civi</p>
  1109. 								</div>
  1110. 								<div class="banner-left-img">
  1111. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1112. 									<p>Xiaomi&nbsp;Civi</p>
  1113. 								</div>
  1114. 								<div class="banner-left-img">
  1115. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1116. 									<p>Xiaomi&nbsp;Civi</p>
  1117. 								</div>
  1118. 								<div class="banner-left-img">
  1119. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1120. 									<p>Xiaomi&nbsp;Civi</p>
  1121. 								</div>
  1122. 								<div class="banner-left-img">
  1123. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1124. 									<p>Xiaomi&nbsp;Civi</p>
  1125. 								</div>
  1126. 								<div class="banner-left-img">
  1127. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1128. 									<p>Xiaomi&nbsp;Civi</p>
  1129. 								</div>
  1130. 								<div class="banner-left-img">
  1131. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1132. 									<p>Xiaomi&nbsp;Civi</p>
  1133. 								</div>
  1134. 								<div class="banner-left-img">
  1135. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1136. 									<p>Xiaomi&nbsp;Civi</p>
  1137. 								</div>
  1138. 								<div class="banner-left-img">
  1139. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1140. 									<p>Xiaomi&nbsp;Civi</p>
  1141. 								</div>
  1142. 								<div class="banner-left-img">
  1143. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1144. 									<p>Xiaomi&nbsp;Civi</p>
  1145. 								</div>
  1146. 								<div class="banner-left-img">
  1147. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1148. 									<p>Xiaomi&nbsp;Civi</p>
  1149. 								</div>
  1150. 								<div class="banner-left-img">
  1151. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1152. 									<p>Xiaomi&nbsp;Civi</p>
  1153. 								</div>
  1154. 								<div class="banner-left-img">
  1155. 									<img src="./img/dahai.jpg" alt="" srcset="">
  1156. 									<p>Xiaomi&nbsp;Civi</p>
  1157. 								</div>
  1158. 							</div>
  1159. 						</li>
  1160. 					</ul>
  1161. 				</div>
  1162. 				<img src="./img/1.jpg" alt="" class="banner-img">
  1163. 				<img src="./img/2.jpg" alt="" class="banner-img">
  1164. 				<img src="./img/3.jpg" alt="" class="banner-img">
  1165. 				<img src="./img/4.jpg" alt="" class="banner-img">
  1166. 				<img src="./img/5.jpg" alt="" class="banner-img">
  1167. 			</div>
  1168. 			<div class="middle-b-item">
  1169. 				<div class="channel">
  1170. 					<div class="channel-list">
  1171. 						<img src="./img/时间.png" alt="">
  1172. 						<p>保障服务</p>
  1173. 					</div>
  1174. 					<div class="channel-list">
  1175. 						<img src="./img/企业.png" alt="">
  1176. 						<p>企业团购</p>
  1177. 					</div>
  1178. 					<div class="channel-list">
  1179. 						<img src="./img/F码.png" alt="">
  1180. 						<p>F码通道</p>
  1181. 					</div>
  1182. 					<div class="channel-list">
  1183. 						<img src="./img/米粉卡.png" alt="">
  1184. 						<p>米粉卡</p>
  1185. 					</div>
  1186. 					<div class="channel-list">
  1187. 						<img src="./img/以旧换新.png" alt="">
  1188. 						<p>以旧换新</p>
  1189. 					</div>
  1190. 					<div class="channel-list">
  1191. 						<img src="./img/话费充值.png" alt="">
  1192. 						<p>话费充值</p>
  1193. 					</div>
  1194. 				</div>
  1195. 				<img src="./img/6.jpg" alt="" srcset="" class="middle-b-item-img">
  1196. 				<img src="./img/7.jpg" alt="" srcset="" class="middle-b-item-img">
  1197. 				<img src="./img/8.jpg" alt="" srcset="" class="middle-b-item-img">
  1198. 			</div>
  1199. 		</div>
  1200.  
  1201. 		<!-- bottom start -->
  1202. 		<div class="main-page">
  1203. 			<div class="main-page1">
  1204. 				<img src="./img/f334fbd05d5681bb838fefd1c815d88c.webp.jpg" alt="">
  1205. 				<div class="main-title1">
  1206. 					<span class="phone">手机</span><img src="./img/向右3-fill.png" alt=""> <span class="more-phone">查看更多</span>
  1207. 				</div>
  1208.  
  1209. 				<div class="main-phonepage">
  1210. 					<img class="zd page-all" src="./img/c583f2edc613f1be20fa415910b13ce3.webp.jpg" alt="">
  1211. 					<div class="main-phonepageright">
  1212. 						<div class="page1 page2 page-all">
  1213. 							<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1214. 							<h4 class="tit">黑鲨4S</h4>
  1215. 							<p class="tit1">磁动力升降肩键</p>
  1216. 							<span class="tit2">2699元起</span>
  1217. 						</div>
  1218. 						<div class="page1 page2 page-all">
  1219. 							<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1220. 							<h4 class="tit">黑鲨4S</h4>
  1221. 							<p class="tit1">磁动力升降肩键</p>
  1222. 							<span class="tit2">2699元起</span>
  1223. 						</div>
  1224. 						<div class="page1 page2 page-all">
  1225. 							<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1226. 							<h4 class="tit">黑鲨4S</h4>
  1227. 							<p class="tit1">磁动力升降肩键</p>
  1228. 							<span class="tit2">2699元起</span>
  1229. 						</div>
  1230. 						<div class="page1 page2 page-all">
  1231. 							<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1232. 							<h4 class="tit">黑鲨4S</h4>
  1233. 							<p class="tit1">磁动力升降肩键</p>
  1234. 							<span class="tit2">2699元起</span>
  1235. 						</div>
  1236. 						<div class="page1 page-all">
  1237. 							<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1238. 							<h4 class="tit">黑鲨4S</h4>
  1239. 							<p class="tit1">磁动力升降肩键</p>
  1240. 							<span class="tit2">2699元起</span>
  1241. 						</div>
  1242. 						<div class="page1 page-all">
  1243. 							<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1244. 							<h4 class="tit">黑鲨4S</h4>
  1245. 							<p class="tit1">磁动力升降肩键</p>
  1246. 							<span class="tit2">2699元起</span>
  1247. 						</div>
  1248. 						<div class="page1 page-all">
  1249. 							<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1250. 							<h4 class="tit">黑鲨4S</h4>
  1251. 							<p class="tit1">磁动力升降肩键</p>
  1252. 							<span class="tit2">2699元起</span>
  1253. 						</div>
  1254. 						<div class="page1 page-all">
  1255. 							<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1256. 							<h4 class="tit">黑鲨4S</h4>
  1257. 							<p class="tit1">磁动力升降肩键</p>
  1258. 							<span class="tit2">2699元起</span>
  1259. 						</div>
  1260. 					</div>
  1261. 				</div>
  1262. 				<div class="main-title1">
  1263. 					<span class="phone">家电</span> <span class="more-phone">热门</span><span class="more-phone">电视影音</span>
  1264. 				</div>
  1265. 				<div class="page1 page2 page-all">
  1266. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1267. 					<h4 class="tit">黑鲨4S</h4>
  1268. 					<p class="tit1">磁动力升降肩键</p>
  1269. 					<span class="tit2">2699元起</span>
  1270. 				</div>
  1271. 				<div class="page1 page2 page-all">
  1272. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1273. 					<h4 class="tit">黑鲨4S</h4>
  1274. 					<p class="tit1">磁动力升降肩键</p>
  1275. 					<span class="tit2">2699元起</span>
  1276. 				</div>
  1277. 				<div class="page1 page2 page-all">
  1278. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1279. 					<h4 class="tit">黑鲨4S</h4>
  1280. 					<p class="tit1">磁动力升降肩键</p>
  1281. 					<span class="tit2">2699元起</span>
  1282. 				</div>
  1283. 				<div class="page1 page2 page-all">
  1284. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1285. 					<h4 class="tit">黑鲨4S</h4>
  1286. 					<p class="tit1">磁动力升降肩键</p>
  1287. 					<span class="tit2">2699元起</span>
  1288. 				</div>
  1289. 				<div class="page1 page-all" style="margin-top: 0;padding-top: 0px;">
  1290. 					<img src="./img/ca83e0294e7d725690b0576a1a4681e2.webp.jpg" alt="">
  1291. 				</div>
  1292. 				<div class="page1" style="background-color:#f5f5f5;padding-top: 0;">
  1293. 					<div class="kaoxiang">
  1294. 						<p class="kaoxiang1">米家烤箱<br>
  1295. 							<span class="kaoxiang2">299元</span>
  1296. 						</p>
  1297. 						<img src="./img/1612c93ad4756215774a0dbec7a81bb2.webp.jpg" alt="">
  1298. 					</div>
  1299. 					<div class="gengduo">
  1300. 						<p class="kaoxiang1">浏览更多<br>
  1301. 							<span class="kaoxiang2">热门</span>
  1302. 						</p>
  1303. 						<img src="./img/向右2.png" alt="">
  1304. 					</div>
  1305. 				</div>
  1306. 				<div class="page1 page-all">
  1307. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1308. 					<h4 class="tit">黑鲨4S</h4>
  1309. 					<p class="tit1">磁动力升降肩键</p>
  1310. 					<span class="tit2">2699元起</span>
  1311. 				</div>
  1312. 				<div class="page1 page-all">
  1313. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1314. 					<h4 class="tit">黑鲨4S</h4>
  1315. 					<p class="tit1">磁动力升降肩键</p>
  1316. 					<span class="tit2">2699元起</span>
  1317. 				</div>
  1318. 				<div class="page1 page-all">
  1319. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1320. 					<h4 class="tit">黑鲨4S</h4>
  1321. 					<p class="tit1">磁动力升降肩键</p>
  1322. 					<span class="tit2">2699元起</span>
  1323. 				</div>
  1324. 				<div class="page1 page-all" style="margin-top: 10;padding-top: 0px;">
  1325. 					<img src="./img/3d47879ec183e25a36e67e0219636e60.webp.jpg" alt="">
  1326. 				</div>
  1327.  
  1328. 				<div class="main-title1">
  1329. 					<span class="phone">智能</span> <span class="more-phone">热门</span><span class="more-phone">安防</span><span class="more-phone">出行</span>
  1330. 				</div>
  1331. 				<div style="clear: both;"></div>
  1332. 				<div class="page1 page2 page-all">
  1333. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1334. 					<h4 class="tit">黑鲨4S</h4>
  1335. 					<p class="tit1">磁动力升降肩键</p>
  1336. 					<span class="tit2">2699元起</span>
  1337. 				</div>
  1338. 				<div class="page1 page2 page-all">
  1339. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1340. 					<h4 class="tit">黑鲨4S</h4>
  1341. 					<p class="tit1">磁动力升降肩键</p>
  1342. 					<span class="tit2">2699元起</span>
  1343. 				</div>
  1344. 				<div class="page1 page2 page-all">
  1345. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1346. 					<h4 class="tit">黑鲨4S</h4>
  1347. 					<p class="tit1">磁动力升降肩键</p>
  1348. 					<span class="tit2">2699元起</span>
  1349. 				</div>
  1350. 				<div class="page1 page2 page-all">
  1351. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1352. 					<h4 class="tit">黑鲨4S</h4>
  1353. 					<p class="tit1">磁动力升降肩键</p>
  1354. 					<span class="tit2">2699元起</span>
  1355. 				</div>
  1356. 				<div class="page1 page-all" style="margin-top: 0;padding-top: 0px;">
  1357. 					<img src="./img/807f30dc8d3aafcaf4ce34d1556a6f5a.webp.jpg" alt="">
  1358. 				</div>
  1359. 				<div class="page1" style="background-color:#f5f5f5;padding-top: 0;">
  1360. 					<div class="kaoxiang">
  1361. 						<p class="kaoxiang1">米家烤箱<br>
  1362. 							<span class="kaoxiang2">299元</span>
  1363. 						</p>
  1364. 						<img src="./img/1d26e13ea435223957d230ff7ca741af.webp.jpg" alt="">
  1365. 					</div>
  1366. 					<div class="gengduo">
  1367. 						<p class="kaoxiang1">浏览更多<br>
  1368. 							<span class="kaoxiang2">热门</span>
  1369. 						</p>
  1370. 						<img src="./img/向右2.png" alt="">
  1371. 					</div>
  1372. 				</div>
  1373. 				<div class="page1 page-all">
  1374. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1375. 					<h4 class="tit">黑鲨4S</h4>
  1376. 					<p class="tit1">磁动力升降肩键</p>
  1377. 					<span class="tit2">2699元起</span>
  1378. 				</div>
  1379. 				<div class="page1 page-all">
  1380. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1381. 					<h4 class="tit">黑鲨4S</h4>
  1382. 					<p class="tit1">磁动力升降肩键</p>
  1383. 					<span class="tit2">2699元起</span>
  1384. 				</div>
  1385. 				<div class="page1 page-all">
  1386. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1387. 					<h4 class="tit">黑鲨4S</h4>
  1388. 					<p class="tit1">磁动力升降肩键</p>
  1389. 					<span class="tit2">2699元起</span>
  1390. 				</div>
  1391. 				<div class="page1 page-all" style="margin-top: 10;padding-top: 0px;">
  1392. 					<img src="./img/ec383d223d9f38f442268df684c526f6.webp.jpg" alt="">
  1393. 				</div>
  1394. 				<img src="./img/d16933cff56865943bb6e8906efd9824.webp.jpg" alt="" style="margin-top:40px">
  1395. 				<div class="main-title1">
  1396. 					<span class="phone">搭配</span> <span class="more-phone">热门</span><span class="more-phone">耳机音箱</span>
  1397. 				</div>
  1398. 				<div style="clear: both;"></div>
  1399. 				<div class="page1 page2 page-all">
  1400. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1401. 					<h4 class="tit">黑鲨4S</h4>
  1402. 					<p class="tit1">磁动力升降肩键</p>
  1403. 					<span class="tit2">2699元起</span>
  1404. 				</div>
  1405. 				<div class="page1 page2 page-all">
  1406. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1407. 					<h4 class="tit">黑鲨4S</h4>
  1408. 					<p class="tit1">磁动力升降肩键</p>
  1409. 					<span class="tit2">2699元起</span>
  1410. 				</div>
  1411. 				<div class="page1 page2 page-all">
  1412. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1413. 					<h4 class="tit">黑鲨4S</h4>
  1414. 					<p class="tit1">磁动力升降肩键</p>
  1415. 					<span class="tit2">2699元起</span>
  1416. 				</div>
  1417. 				<div class="page1 page2 page-all">
  1418. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1419. 					<h4 class="tit">黑鲨4S</h4>
  1420. 					<p class="tit1">磁动力升降肩键</p>
  1421. 					<span class="tit2">2699元起</span>
  1422. 				</div>
  1423. 				<div class="page1 page-all" style="margin-top: 0;padding-top: 0px;">
  1424. 					<img src="./img/8bfc6ce0d4438dbb1623a7d1834413fb.webp.jpg" alt="">
  1425. 				</div>
  1426. 				<div class="page1" style="background-color:#f5f5f5;padding-top: 0;">
  1427. 					<div class="kaoxiang">
  1428. 						<p class="kaoxiang1">米家烤箱<br>
  1429. 							<span class="kaoxiang2">299元</span>
  1430. 						</p>
  1431. 						<img src="./img/1d26e13ea435223957d230ff7ca741af.webp.jpg" alt="">
  1432. 					</div>
  1433. 					<div class="gengduo">
  1434. 						<p class="kaoxiang1">浏览更多<br>
  1435. 							<span class="kaoxiang2">热门</span>
  1436. 						</p>
  1437. 						<img src="./img/向右2.png" alt="">
  1438. 					</div>
  1439. 				</div>
  1440. 				<div class="page1 page-all">
  1441. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1442. 					<h4 class="tit">黑鲨4S</h4>
  1443. 					<p class="tit1">磁动力升降肩键</p>
  1444. 					<span class="tit2">2699元起</span>
  1445. 				</div>
  1446. 				<div class="page1 page-all">
  1447. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1448. 					<h4 class="tit">黑鲨4S</h4>
  1449. 					<p class="tit1">磁动力升降肩键</p>
  1450. 					<span class="tit2">2699元起</span>
  1451. 				</div>
  1452. 				<div class="page1 page-all">
  1453. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1454. 					<h4 class="tit">黑鲨4S</h4>
  1455. 					<p class="tit1">磁动力升降肩键</p>
  1456. 					<span class="tit2">2699元起</span>
  1457. 				</div>
  1458. 				<div class="page1 page-all" style="margin-top: 10;padding-top: 0px;">
  1459. 					<img src="./img/601e51657711e0bafc1e394b7a0db08a.webp.jpg" alt="">
  1460. 				</div>
  1461. 				<div class="main-title1">
  1462. 					<span class="phone">周边</span> <span class="more-phone">热门</span><span class="more-phone">出行</span><span class="more-phone">出行</span>
  1463. 				</div>
  1464. 				<div style="clear: both;"></div>
  1465. 				<div class="page1 page2 page-all">
  1466. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1467. 					<h4 class="tit">黑鲨4S</h4>
  1468. 					<p class="tit1">磁动力升降肩键</p>
  1469. 					<span class="tit2">2699元起</span>
  1470. 				</div>
  1471. 				<div class="page1 page2 page-all">
  1472. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1473. 					<h4 class="tit">黑鲨4S</h4>
  1474. 					<p class="tit1">磁动力升降肩键</p>
  1475. 					<span class="tit2">2699元起</span>
  1476. 				</div>
  1477. 				<div class="page1 page2 page-all">
  1478. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1479. 					<h4 class="tit">黑鲨4S</h4>
  1480. 					<p class="tit1">磁动力升降肩键</p>
  1481. 					<span class="tit2">2699元起</span>
  1482. 				</div>
  1483. 				<div class="page1 page2 page-all">
  1484. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1485. 					<h4 class="tit">黑鲨4S</h4>
  1486. 					<p class="tit1">磁动力升降肩键</p>
  1487. 					<span class="tit2">2699元起</span>
  1488. 				</div>
  1489. 				<div class="page1 page-all" style="margin-top: 0;padding-top: 0px;">
  1490. 					<img src="./img/ca0940f052227d235e7de5678d106c89.webp.jpg" alt="">
  1491. 				</div>
  1492. 				<div class="page1" style="background-color:#f5f5f5;padding-top: 0;">
  1493. 					<div class="kaoxiang">
  1494. 						<p class="kaoxiang1">米家烤箱<br>
  1495. 							<span class="kaoxiang2">299元</span>
  1496. 						</p>
  1497. 						<img src="./img/1d26e13ea435223957d230ff7ca741af.webp.jpg" alt="">
  1498. 					</div>
  1499. 					<div class="gengduo">
  1500. 						<p class="kaoxiang1">浏览更多<br>
  1501. 							<span class="kaoxiang2">热门</span>
  1502. 						</p>
  1503. 						<img src="./img/向右2.png" alt="">
  1504. 					</div>
  1505. 				</div>
  1506. 				<div class="page1 page-all">
  1507. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1508. 					<h4 class="tit">黑鲨4S</h4>
  1509. 					<p class="tit1">磁动力升降肩键</p>
  1510. 					<span class="tit2">2699元起</span>
  1511. 				</div>
  1512. 				<div class="page1 page-all">
  1513. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1514. 					<h4 class="tit">黑鲨4S</h4>
  1515. 					<p class="tit1">磁动力升降肩键</p>
  1516. 					<span class="tit2">2699元起</span>
  1517. 				</div>
  1518. 				<div class="page1 page-all">
  1519. 					<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
  1520. 					<h4 class="tit">黑鲨4S</h4>
  1521. 					<p class="tit1">磁动力升降肩键</p>
  1522. 					<span class="tit2">2699元起</span>
  1523. 				</div>
  1524. 				<div class="page1 page-all" style="margin-top: 10;padding-top: 0px;">
  1525. 					<img src="./img/0497ba8520dc4aca9d55e6b841d42331.webp.jpg" alt="">
  1526. 				</div>
  1527. 				<img src="./img/88e35cffc82cd98cd53172460067af17.webp.jpg" alt="" style="margin-top:40px">
  1528. 				<div class="main-title1">
  1529. 					<span class="phone">视频</span><img src="./img/向右3-fill.png" alt=""> <span class="more-phone">查看更多</span>
  1530. 				</div>
  1531. 				<div class="shipin page-all">
  1532. 					<img src="./img/e74c4ff741bcdfc5b28a48a43e4edc6d.webp.jpg" alt="">
  1533. 					<p>2021年春季新品发布会第一场</p>
  1534. 				</div>
  1535. 				<div class="shipin page-all">
  1536. 					<img src="./img/e74c4ff741bcdfc5b28a48a43e4edc6d.webp.jpg" alt="">
  1537. 					<p>2021年春季新品发布会第一场</p>
  1538. 				</div>
  1539. 				<div class="shipin page-all">
  1540. 					<img src="./img/e74c4ff741bcdfc5b28a48a43e4edc6d.webp.jpg" alt="">
  1541. 					<p>2021年春季新品发布会第一场</p>
  1542. 				</div>
  1543. 				<div class="shipin page-all">
  1544. 					<img src="./img/e74c4ff741bcdfc5b28a48a43e4edc6d.webp.jpg" alt="">
  1545. 					<p>2021年春季新品发布会第一场</p>
  1546. 				</div>
  1547. 				<div style="clear: both;"></div>
  1548. 			</div>
  1549. 			<div class="footer-n">
  1550. 				<div class="footer-nn">
  1551. 					<div class="footer-s">
  1552. 						<ul>
  1553. 							<li><img src="./img/HTSCIT_设置1.png"><span class="fop">维修服务</span></li>
  1554. 							<li><img src="./img/七天无理由退换.png"><span class="fop">七天无理由退货</span< /li> <li><img src="./img/15天无理由退货.png"><span
  1555. 									 class="fop">15天免费换货</span< /li> <li><img src="./img/礼物 活动.png"><span class="fop">满69包邮</span< /li> <li><img
  1556. 											 src="./img/位置.png"><span class="fop">520余家售后网点</span< /li> </ul> <div style="clear: both;">
  1557. 					</div>
  1558. 					<hr>
  1559. 					<dl>
  1560. 						<dt>帮助中心</dt>
  1561. 						<dd>账号管理</dd>
  1562. 						<dd>购物指南</dd>
  1563. 						<dd>订单操作</dd>
  1564. 					</dl>
  1565. 					<dl>
  1566. 						<dt>服务支持</dt>
  1567. 						<dd>售后政策</dd>
  1568. 						<dd>自助服务</dd>
  1569. 						<dd>相关下载</dd>
  1570. 					</dl>
  1571. 					<dl>
  1572. 						<dt>线下门店</dt>
  1573. 						<dd>小米之家</dd>
  1574. 						<dd>服务网点</dd>
  1575. 						<dd>授权体验店/专区</dd>
  1576. 					</dl>
  1577. 					<dl>
  1578. 						<dt>关于小米</dt>
  1579. 						<dd>了解小米</dd>
  1580. 						<dd>加入小米</dd>
  1581. 						<dd>投资者关系</dd>
  1582. 						<dd>企业社会责任</dd>
  1583. 						<dd>廉洁举报</dd>
  1584. 					</dl>
  1585. 					<dl>
  1586. 						<dt>关注我们</dt>
  1587. 						<dd>新浪微博</dd>
  1588. 						<dd>官方微信</dd>
  1589. 						<dd>联系我们</dd>
  1590. 						<dd>公益基金会</dd>
  1591. 					</dl>
  1592. 					<dl>
  1593. 						<dt>特色服务</dt>
  1594. 						<dd>F码通道</dd>
  1595. 						<dd>礼物码</dd>
  1596. 						<dd>防伪查询</dd>
  1597. 					</dl>
  1598. 					<div class="footer-r">
  1599. 						<h2>400-100-5678</h2>
  1600. 						<p>8:00-18:00(仅收市话费)</p>
  1601. 						<div class="rgkf">
  1602. 							<span>人工客服</span>
  1603. 						</div>
  1604. 						<p>关注小米</p>
  1605. 					</div>
  1606. 				</div>
  1607. 			</div>
  1608. 		</div>
  1609. 		</div>
  1610. 		<!--bottom end -->
  1611. 		<!-- 右下侧广告 -->
  1612. 		<div class="advertising">
  1613. 			<div class="advertising-app">
  1614. 				<img src="./img/app.png" alt="" class="tpp">
  1615. 				<img src="./img/app-0.png" alt="" class="tpp1">
  1616. 				<p>手机APP</p>
  1617. 			</div>
  1618. 			<div class="advertising-app">
  1619. 				<img src="./img/app1.png" alt="" class="tpp">
  1620. 				<img src="./img/app-1.png" alt="" class="tpp1">
  1621. 				<p>个人中心</p>
  1622. 			</div>
  1623. 			<div class="advertising-app">
  1624. 				<img src="./img/app2.png" alt="" class="tpp">
  1625. 				<img src="./img/app-2.png" alt="" class="tpp1">
  1626. 				<p>售后服务</p>
  1627. 			</div>
  1628. 			<div class="advertising-app">
  1629. 				<img src="./img/app3.png" alt="" class="tpp">
  1630. 				<img src="./img/app-3.png" alt="" class="tpp1">
  1631. 				<p>人工客服</p>
  1632. 			</div>
  1633. 			<div class="advertising-app">
  1634. 				<img src="./img/app4.png" alt="" class="tpp">
  1635. 				<img src="./img/app-4.png" alt="" class="tpp1">
  1636. 				<p>购物车</p>
  1637. 			</div>
  1638. 			<div class="advertising-app">
  1639. 				<a href="javascript:returnTop();" class="cd-top">
  1640. 					<img src="./img/app5.png" alt="" class="tpp">
  1641. 					<p>返回顶部</p>
  1642. 				</a>
  1643. 			</div>
  1644. 		</div>
  1645. 		<!-- footer-start -->
  1646. 		<div class="footer-site">
  1647. 			<div class="site-info">
  1648. 				<img src="./img/mi.png" alt="" class="mimi">
  1649. 				<p>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 |
  1650. 					Select Location
  1651. 					<br>北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会
  1652. 				</p>
  1653. 				<p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
  1654. 				<p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
  1655. 				<p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</p>
  1656. 				<p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
  1657. 				<p><img src="./img/truste.png" alt=""><img src="./img/v-logo-2.png" alt=""><img src="./img/icon3.png"><img src="./img/ba10428a4f9495ac310fd0b5e0cf8370.png"
  1658. 					 alt=""><img src="./img/7d56be2921dd52757177a72f83247f46.png" alt=""></p>
  1659. 			</div>
  1660. 			<p class="beautiful-life"><img src="./img/slogan2020.png" alt=""></p>
  1661. 		</div>
  1662. 		<!-- footer-end -->
  1663. 		<!-- 返回顶部 -->
  1664. 		<script type="text/javascript" src="js/index.js">			
  1665. 		</script>
  1666. 	</body>
  1667. </html>

index.js

  1. var sdelay = 0;
  2. 			function returnTop() {
  3. 				window.scrollBy(0, -100); //Only for y vertical-axis
  4. 				if (document.body.scrollTop > 0) {
  5. 					sdelay = setTimeout('returnTop()', 50);
  6. 				}
  7. 			}

index.css

  1. * {
  2. 			margin: 0;
  3. 			padding: 0;
  4. 			box-sizing: border-box;
  5. 			list-style: none;
  6. 		}
  7.  
  8. 		body {
  9. 			background-color: #f5f5f5;
  10. 		}
  11.  
  12. 		.main-page {
  13. 			width: 100%;
  14. 		}
  15.  
  16. 		.main-page1 {
  17. 			width: 1226px;
  18. 			margin: 0 auto;
  19. 		}
  20.  
  21. 		.main-title1 {
  22. 			height: 58px;
  23. 		}
  24.  
  25. 		.phone {
  26. 			float: left;
  27. 			height: 58px;
  28. 			line-height: 58px;
  29. 			font-weight: 200;
  30. 			font-size: 22px;
  31. 			color: #333333;
  32. 		}
  33.  
  34. 		.more-phone {
  35. 			float: right;
  36. 			height: 58px;
  37. 			line-height: 58px;
  38. 			color: #424242;
  39. 			font-size: 16px;
  40. 			margin-right: 4px;
  41. 		}
  42.  
  43. 		.main-title1>img {
  44. 			float: right;
  45. 			margin-top: 18px;
  46. 		}
  47.  
  48. 		.main-phonepage {
  49. 			height: 614px;
  50. 		}
  51.  
  52. 		.zd {
  53. 			float: left;
  54. 		}
  55.  
  56. 		.page1 {
  57. 			width: 234px;
  58. 			height: 300px;
  59. 			background-color: white;
  60. 			float: right;
  61. 			text-align: center;
  62. 			padding-top: 10px;
  63. 			margin-right: 10px;
  64. 			margin-top: 14px;
  65. 		}
  66.  
  67. 		/* .page1:hover{
  68.         box-shadow: 2px 2px 2px 2px #999999;
  69.         border-radius: 2px;
  70.     } */
  71. 		.page2 {
  72. 			margin-top: 0px;
  73. 		}
  74.  
  75. 		.tit {
  76. 			font-size: 14px;
  77. 			font-weight: 400;
  78. 			color: #333;
  79. 		}
  80.  
  81. 		.tit1 {
  82. 			height: 18px;
  83. 			font-size: 12px;
  84. 			color: #b0b0b0;
  85. 		}
  86.  
  87. 		.tit2 {
  88. 			color: #ff6700;
  89. 			font-size: 12px;
  90. 		}
  91.  
  92. 		.kaoxiang {
  93. 			width: 234px;
  94. 			height: 143px;
  95. 			background-color: white;
  96.  
  97. 		}
  98.  
  99. 		.kaoxiang>img {
  100. 			margin-top: 20px;
  101. 		}
  102.  
  103. 		.kaoxiang1 {
  104. 			font-size: 14px;
  105. 			font-weight: 400;
  106. 			float: left;
  107. 			margin-top: 50px;
  108. 			margin-left: 40px;
  109. 		}
  110.  
  111. 		.kaoxiang2 {
  112. 			font-size: 12px;
  113. 			color: #333;
  114. 			margin-left: -14px;
  115. 			color: #ff6700;
  116. 		}
  117.  
  118. 		.gengduo {
  119. 			margin-top: 12px;
  120. 			width: 234px;
  121. 			height: 143px;
  122. 			background-color: white;
  123. 		}
  124.  
  125. 		.gengduo>img {
  126. 			margin-top: 50px;
  127. 		}
  128.  
  129. 		.shipin {
  130. 			width: 296px;
  131. 			height: 285px;
  132. 			background-color: white;
  133. 			font-size: 14px;
  134. 			text-align: center;
  135. 			color: #333;
  136. 			float: left;
  137. 			margin-right: 10px;
  138. 		}
  139.  
  140. 		.shipin>p {
  141. 			margin-top: 30px;
  142. 		}
  143.  
  144. 		.footer-s {
  145. 			margin-top: 20px;
  146. 			height: 80px;
  147. 			background-color: white;
  148. 			position: relative;
  149. 		}
  150.  
  151. 		.footer-s>ul li {
  152. 			float: left;
  153. 			height: 80px;
  154. 			line-height: 80px;
  155. 			width: 242.73px;
  156. 			font-size: 16px;
  157. 			text-align: center;
  158. 		}
  159.  
  160. 		.footer-s>ul li img {
  161. 			position: absolute;
  162. 			/* margin-right: 6px; */
  163. 			display: inline;
  164. 			top: 28px;
  165. 		}
  166.  
  167. 		.fop {
  168. 			margin-left: 30px;
  169. 		}
  170.  
  171. 		.footer-n {
  172. 			width: 100%;
  173. 			height: 300px;
  174. 			font-size: 12px;
  175. 			background-color: white;
  176. 			margin-top: 20px;
  177. 		}
  178.  
  179. 		.footer-n dl {
  180. 			margin-top: 30px;
  181. 			display: block;
  182. 			width: 162px;
  183. 			float: left;
  184. 		}
  185.  
  186. 		.footer-n dt {
  187. 			font-size: 14px;
  188. 			height: 50px;
  189. 		}
  190.  
  191. 		.footer-n dd {
  192. 			height: 25px;
  193. 			color: #999999;
  194. 		}
  195.  
  196. 		.footer-s dd:hover {
  197. 			color: #ff6700;
  198. 		}
  199.  
  200. 		.footer-r {
  201. 			margin-top: 50px;
  202. 			float: right;
  203. 			text-align: center;
  204. 			width: 251px;
  205. 			border-left: 1px solid #999999;
  206. 		}
  207.  
  208. 		.footer-r h2 {
  209. 			color: #ff6700;
  210. 			margin-bottom: 10px;
  211. 		}
  212.  
  213. 		.footer-r p {
  214. 			margin-top: 10px;
  215. 		}
  216.  
  217. 		.fop:hover {
  218. 			color: #ff6700;
  219. 		}
  220.  
  221. 		.rgkf {
  222. 			width: 120px;
  223. 			height: 30px;
  224. 			border: 1px solid #ff6700;
  225. 			text-align: center;
  226. 			display: inline-block;
  227. 			padding-top: 5px;
  228. 			color: #ff6700;
  229. 			margin-top: 10px;
  230. 		}
  231.  
  232. 		.rgkf:hover {
  233. 			background-color: #ff6700;
  234. 			color: white;
  235. 		}
  236.  
  237. 		.footer-nn {
  238. 			width: 1226px;
  239. 			margin: 0 auto;
  240. 		}
  241.  
  242. 		.site-info {
  243. 			margin-top: 30px;
  244. 			height: 170px;
  245. 			width: 1226px;
  246. 			margin: 0 auto;
  247. 			position: relative;
  248. 		}
  249.  
  250. 		.mimi {
  251. 			width: 56px;
  252. 			height: 56px;
  253. 			position: absolute;
  254. 		}
  255.  
  256. 		.site-info>p {
  257. 			margin-left: 66px;
  258. 			font-size: 12px;
  259. 			color: #b0b0b0;
  260. 		}
  261.  
  262. 		.footer-site {
  263. 			background-color: white;
  264. 		}
  265.  
  266. 		.site-info p img {
  267. 			width: 83px;
  268. 		}
  269.  
  270. 		.beautiful-life {
  271. 			text-align: center;
  272. 			padding-bottom: 30px;
  273. 		}
  274.  
  275. 		/* top */
  276.  
  277. 		.top-bar {
  278. 			width: 100%;
  279. 			height: 40px;
  280. 			background-color: #333333;
  281. 			color: #b0b0b0;
  282. 			font-size: 12px;
  283. 		}
  284.  
  285. 		.container {
  286. 			width: 1226px;
  287. 			height: 40px;
  288. 			margin: 0 auto;
  289. 		}
  290.  
  291. 		.container-nav {
  292. 			float: left;
  293. 			height: 40px;
  294. 			line-height: 40px;
  295. 			position: relative;
  296. 		}
  297.  
  298. 		.nav-1 {
  299. 			text-decoration: none;
  300. 			color: #b0b0b0;
  301. 			display: inline-block;
  302. 		}
  303.  
  304. 		.nav-1:hover {
  305. 			color: white;
  306. 		}
  307.  
  308. 		.sep {
  309. 			margin: 4px;
  310. 			color: #424242;
  311. 		}
  312.  
  313. 		.container-right {
  314. 			float: right;
  315. 			height: 40px;
  316. 			line-height: 40px;
  317. 		}
  318.  
  319. 		.gwc {
  320. 			float: right;
  321. 			width: 120px;
  322. 			height: 40px;
  323. 			background-color: #424242;
  324. 			position: relative;
  325. 		}
  326.  
  327. 		.gwc>img {
  328. 			margin-top: 10px;
  329. 			margin-left: 20px;
  330. 		}
  331.  
  332. 		.gwc>span {
  333. 			display: block;
  334. 			margin-top: -22px;
  335. 			margin-left: 45px;
  336. 		}
  337.  
  338. 		.gwc-list {
  339. 			width: 300px;
  340. 			height: 100px;
  341. 			top: 40px;
  342. 			right: 0px;
  343. 			background-color: white;
  344. 			color: black;
  345. 			position: absolute;
  346. 			text-align: center;
  347. 			padding-top: 43px;
  348. 			display: none;
  349. 			z-index: 10;
  350.  
  351. 		}
  352.  
  353. 		.gwc:hover .gwc-list {
  354. 			display: block;
  355. 		}
  356.  
  357. 		.sj {
  358. 			width: 0;
  359. 			height: 0;
  360. 			border: 8px solid transparent;
  361. 			border-bottom-color: #fff;
  362. 			position: absolute;
  363. 			right: 200px;
  364. 			top: 24px;
  365. 			display: none;
  366. 		}
  367.  
  368. 		.download-app {
  369. 			position: absolute;
  370. 			top: 40px;
  371. 			left: 50%;
  372. 			margin-left: 150px;
  373. 			width: 124px;
  374. 			height: 0px;
  375. 			background-color: #fff;
  376. 			box-shadow: 0 1px 5px #aaa;
  377. 			text-align: center;
  378. 			font-size: 12px;
  379. 			color: #333;
  380. 			overflow: hidden;
  381. 			transition: all .3s linear;
  382. 			z-index: 10;
  383. 		}
  384.  
  385. 		.download-app>img {
  386. 			width: 90px;
  387. 			height: 90px;
  388. 		}
  389.  
  390. 		.down:hover+.download-app {
  391. 			height: 148px;
  392. 			padding-top: 10px;
  393. 		}
  394.  
  395. 		.down:hover~.sj {
  396. 			display: block;
  397. 		}
  398.  
  399. 		.middle-content {
  400. 			width: 100%;
  401. 			height: 760px;
  402. 			background-color: white;
  403. 			position: relative;
  404. 		}
  405.  
  406. 		.header-logo {
  407. 			height: 100px;
  408. 			width: 1226px;
  409. 			margin: 0 auto;
  410.  
  411. 		}
  412.  
  413. 		.logo {
  414. 			width: 62px;
  415. 			height: 56px;
  416. 			margin-top: 22px;
  417. 			float: left;
  418. 		}
  419.  
  420. 		.logo>img {
  421. 			width: 56px;
  422. 			height: 56px;
  423. 		}
  424.  
  425. 		.header-nav {
  426. 			float: left;
  427. 			padding-left: 150px;
  428. 		}
  429.  
  430. 		.header-nav-li {
  431. 			float: left;
  432. 			height: 100px;
  433. 			line-height: 100px;
  434. 			padding: 0 10px;
  435. 			cursor: pointer;
  436. 		}
  437.  
  438. 		.header-nav-li:hover {
  439. 			color: #ff6700;
  440. 		}
  441.  
  442. 		.header-item {
  443. 			position: absolute;
  444. 			width: 100%;
  445. 			height: 0px;
  446. 			top: 100px;
  447. 			left: 0;
  448. 			padding-left: 300px;
  449. 			overflow: hidden;
  450. 			transition: height .2s linear;
  451. 			z-index: 12;
  452. 			background-color: white;
  453. 		}
  454.  
  455. 		.header-nav-li:hover+.header-item {
  456. 			height: 190px;
  457. 			border-top: 1px solid #999999;
  458. 		}
  459.  
  460. 		.header-item-content {
  461. 			font-size: 12px;
  462. 			width: 210px;
  463. 			height: 190px;
  464. 			padding-top: 20px;
  465. 			text-align: center;
  466. 			float: left;
  467. 		}
  468.  
  469. 		.shu {
  470. 			margin-top: 20px;
  471. 			width: 2px;
  472. 			height: 75px;
  473. 			float: left;
  474. 			border: 1px solid #999999;
  475. 		}
  476.  
  477. 		.header-item-content p:nth-child(3) {
  478. 			color: #ff6700;
  479. 		}
  480.  
  481. 		.header-right {
  482. 			box-sizing: border-box;
  483. 			display: flex;
  484. 			position: relative;
  485. 			margin-top: 25px;
  486. 			left: 20px;
  487. 		}
  488.  
  489. 		.text-search {
  490. 			width: 245px;
  491. 			height: 50px;
  492. 			outline: none;
  493. 			border: 1px solid #e0e0e0;
  494. 			border-right: none;
  495. 			padding: 0 10px;
  496. 			transition: all .3s;
  497. 		}
  498.  
  499. 		.search {
  500. 			padding: 10px;
  501. 			width: 50px;
  502. 			border: 1px solid #e0e0e0;
  503. 			display: flex;
  504. 			justify-content: center;
  505. 			align-items: center;
  506. 			transition: all .3s;
  507. 		}
  508.  
  509. 		.search>img {
  510. 			width: 50px;
  511. 		}
  512.  
  513. 		.header-right:hover .text-search,
  514. 		.header-right:hover .search {
  515. 			border-color: #b0b0b0;
  516. 		}
  517.  
  518. 		.search:hover {
  519. 			background-color: #ff6700;
  520. 			border-color: #ff6700 !important;
  521. 		}
  522.  
  523. 		.search:hover img {
  524. 			color: #fff !important;
  525. 		}
  526.  
  527. 		.text-search:focus,
  528. 		.text-search:focus+.search {
  529. 			border-color: #ff6700;
  530. 		}
  531.  
  532. 		.list-1 {
  533. 			width: 240px;
  534. 			border: 1px solid #ff6700;
  535. 			position: absolute;
  536. 			top: 49px;
  537. 			display: none;
  538. 			z-index: 12;
  539. 			background-color: white;
  540. 		}
  541.  
  542. 		.list-1 div {
  543. 			height: 30px;
  544. 			line-height: 30px;
  545. 			font-size: 14px;
  546. 			padding-left: 20px;
  547. 		}
  548.  
  549. 		.text-search:focus~.list-1 {
  550. 			display: block;
  551. 		}
  552.  
  553. 		.middle-item {
  554. 			width: 1226px;
  555. 			height: 460px;
  556. 			margin: 0 auto;
  557. 			position: relative;
  558. 		}
  559.  
  560. 		.banner-left {
  561. 			width: 234px;
  562. 			height: 460px;
  563. 			position: absolute;
  564. 			z-index: 10;
  565. 		}
  566.  
  567. 		.banner-left::before {
  568. 			content: "";
  569. 			width: 234px;
  570. 			height: 460px;
  571. 			position: absolute;
  572. 			background-color: #999999;
  573. 			opacity: .7;
  574.  
  575. 		}
  576.  
  577. 		.banner-left-ul {
  578. 			width: 1226px;
  579. 			height: 460px;
  580. 			list-style: none;
  581. 			color: white;
  582. 			font-size: 14px;
  583. 			position: relative;
  584. 			padding-top: 20px;
  585. 			box-sizing: border-box;
  586. 			background-size: 100% 100%;
  587. 			animation: myb 10s infinite;
  588.  
  589. 		}
  590.  
  591. 		.banner-left-ul li {
  592. 			height: 42px;
  593. 			line-height: 42px;
  594. 			padding-left: 20px;
  595. 			z-index: 10;
  596. 		}
  597.  
  598. 		.banner-left-box {
  599. 			width: 992px;
  600. 			height: 460px;
  601. 			background-color: white;
  602. 			position: absolute;
  603. 			left: 234px;
  604. 			top: 0px;
  605. 		}
  606.  
  607. 		.banner-left-box {
  608. 			display: none;
  609. 		}
  610.  
  611. 		.banner-left-img {
  612. 			width: 248px;
  613. 			height: 75px;
  614. 			color: black;
  615. 			float: left;
  616. 		}
  617.  
  618. 		.banner-left-img>img {
  619. 			float: left;
  620. 			padding-top: 20px;
  621. 			padding-left: 20px;
  622. 		}
  623.  
  624. 		.banner-left-img>p {
  625. 			float: left;
  626. 			line-height: 75px;
  627. 			padding-left: 20px;
  628. 		}
  629.  
  630. 		.banner-left-ul li:hover {
  631. 			background-color: #ff6700;
  632. 		}
  633.  
  634. 		.banner-left-ul li:hover .banner-left-box {
  635. 			display: block;
  636. 		}
  637.  
  638. 		.banner-img {
  639. 			height: 460px;
  640. 			position: absolute;
  641.  
  642. 		}
  643.  
  644. 		@keyframes myb {
  645. 			20% {
  646. 				background-image: url(./img/1.jpg);
  647. 			}
  648.  
  649. 			40% {
  650. 				background-image: url(./img/2.jpg);
  651. 			}
  652.  
  653. 			60% {
  654. 				background-image: url(./img/3.jpg);
  655. 			}
  656.  
  657. 			80% {
  658. 				background-image: url(./img/4.jpg);
  659. 			}
  660.  
  661. 			100% {
  662. 				background-image: url(./img/5.jpg);
  663. 			}
  664. 		}
  665.  
  666. 		.middle-b-item {
  667. 			width: 1226px;
  668. 			margin: 0 auto;
  669. 			margin-top: 14px;
  670. 		}
  671.  
  672. 		.channel {
  673. 			width: 234px;
  674. 			height: 170px;
  675. 			background-color: #5F5750;
  676. 			color: #333333;
  677. 			padding: 12px;
  678. 			float: left;
  679. 		}
  680.  
  681. 		.channel-list {
  682. 			width: 70px;
  683. 			height: 63.6px;
  684. 			float: left;
  685. 			font-size: 12px;
  686. 			color: #ffffff;
  687. 			text-align: center;
  688. 			padding-top: 18px;
  689. 			position: relative;
  690. 			margin-top: 2px;
  691. 		}
  692.  
  693. 		.channel-list>img {
  694. 			width: 24px;
  695. 			height: 24px;
  696. 		}
  697.  
  698. 		.channel-list::before {
  699. 			content: "";
  700. 			position: absolute;
  701. 			left: 0;
  702. 			top: 50%;
  703. 			transform: translateY(-50%);
  704. 			height: 60px;
  705. 			width: 1px;
  706. 			background-color: #665e57;
  707. 		}
  708.  
  709. 		.channel-list::after {
  710. 			content: "";
  711. 			position: absolute;
  712. 			left: 50%;
  713. 			bottom: 0;
  714. 			transform: translateX(-50%);
  715. 			width: 60px;
  716. 			height: 1px;
  717. 			background-color: #665e57;
  718. 		}
  719.  
  720. 		.middle-b-item-img {
  721. 			width: 316px;
  722. 			height: 170px;
  723. 			margin-left: 14px;
  724. 			float: left;
  725. 			border-radius: 2px;
  726. 		}
  727.  
  728. 		.middle-b-item-img:hover {
  729. 			box-shadow: 2px 2px 3px #b0b0b0;
  730. 		}
  731.  
  732. 		.page-all:hover {
  733. 			box-shadow: 2px 2px 3px #b0b0b0;
  734. 		}
  735.  
  736. 		.kaoxiang:hover,
  737. 		.gengduo:hover {
  738. 			box-shadow: 2px 2px 3px #b0b0b0;
  739. 		}
  740.  
  741. 		.banner-left-img:hover>p {
  742. 			color: #ff6700;
  743. 		}
  744.  
  745.  
  746.  
  747. 		.advertising {
  748. 			position: fixed;
  749. 			bottom: 70px;
  750. 			right: 0;
  751. 			z-index: 99;
  752. 			color: #333;
  753. 		}
  754.  
  755. 		.advertising-app {
  756. 			position: relative;
  757. 			width: 82px;
  758. 			height: 90px;
  759. 			margin-top: -1px;
  760. 			background-color: #fff;
  761. 			border: 1px solid #f5f5f5;
  762. 			text-align: center;
  763. 			font-size: 13px;
  764. 			padding-top: 20px;
  765. 			cursor: pointer;
  766. 		}
  767.  
  768. 		.tpp {
  769. 			width: 30px;
  770. 			height: 30px;
  771. 		}
  772.  
  773. 		.tpp1 {
  774. 			width: 30px;
  775. 			height: 30px;
  776. 			position: absolute;
  777. 			right: 25px;
  778. 			display: none;
  779. 		}
  780.  
  781. 		.advertising-app:hover .tpp1 {
  782. 			display: inline-block;
  783. 		}
  784.  
  785. 		.advertising-app:hover p {
  786. 			color: #ff6700;
  787. 			
  788. 		}
  789.  
  790. 		.cd-top {
  791. 			text-decoration: none;
  792. 			color: #000000;
  793. 		}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/353592?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号