/slide/10/index.html

https://gitlab.com/leechau/frontcode · HTML · 349 lines · 348 code · 0 blank · 1 comment · 0 complexity · a4601a075240187653798a93fee19246 MD5 · raw file

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>热销产品</title>
  6. <link rel="stylesheet" type="text/css" href="css/main.css" media="all"/>
  7. </head>
  8. <body>
  9. <!--http://weigou.baidu.com/topic/phone-->
  10. <div id="box" class="hotsell-section">
  11. <div class="section-header">
  12. <span class="section-tag"></span>
  13. <span class="section-logo" title="热销商品">热销商品</span>
  14. <div class="hot-computer-tab hot-tab" data-index="2"></div>
  15. <div class="hot-elec-tab hot-tab" data-index="1"></div>
  16. <div class="hot-phone-tab hot-tab current-hot-phone-tab" data-index="0"></div>
  17. <div id="current-tab-icon" style="left: 695px;"></div>
  18. </div>
  19. <div class="section-body clearfix">
  20. <div class="hotsell">
  21. <div class="hotsell-items">
  22. <div class="hotsell-item">
  23. <div class="hotsell-image">
  24. <a target="_blank" href="#">
  25. <img class="lazy" src="images/1.jpg" width="160" height="160" style="display: block;">
  26. </a>
  27. </div>
  28. <div class="hotsell-bottom">
  29. <div class="hotsell-name">
  30. <a href="#" target="_blank">iPhone 5s 16G版 3G手机</a>
  31. </div>
  32. <div class="highlight">
  33. <span class="left">苹果APPLE</span>
  34. </div>
  35. <div class="highlight">
  36. <span class="price left">¥4,399.00</span> <a href="#" class="merchant right">京东商城</a>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="hotsell-item" style="width:198px">
  41. <div class="hotsell-image">
  42. <a target="_blank" href="#">
  43. <img class="lazy" src="images/1.jpg" width="160" height="160" style="display: block;">
  44. </a>
  45. </div>
  46. <div class="hotsell-bottom">
  47. <div class="hotsell-name">
  48. <a href="#" target="_blank">iPhone 5c 16G版 3G手机粉色</a>
  49. </div>
  50. <div class="highlight">
  51. <span class="left">多彩iPhone5C</span>
  52. </div>
  53. <div class="highlight">
  54. <span class="price left">¥3,299.00</span> <a href="#" class="merchant right">京东商城</a>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="hotsell-item">
  59. <div class="hotsell-image">
  60. <a target="_blank" href="#">
  61. <img class="lazy" src="images/1.jpg" width="160" height="160" style="display: block;">
  62. </a>
  63. </div>
  64. <div class="hotsell-bottom">
  65. <div class="hotsell-name">
  66. <a href="#" target="_blank">红米手机 移动版 4GB 象牙白</a></div>
  67. <div class="highlight">
  68. <span class="left">四核 4.7英寸屏</span>
  69. </div>
  70. <div class="highlight">
  71. <span class="price left">¥699.00</span> <a href="#" class="merchant right">小米官网</a>
  72. </div>
  73. </div>
  74. </div>
  75. <div class="hotsell-item">
  76. <div class="hotsell-image">
  77. <a target="_blank" href="#">
  78. <img class="lazy" src="images/1.jpg" width="160" height="160" style="display: block;">
  79. </a>
  80. </div>
  81. <div class="hotsell-bottom">
  82. <div class="hotsell-name">
  83. <a href="#" target="_blank">EMOTO E868 3G手机</a></div>
  84. <div class="highlight">
  85. <span class="left">八核智能手机</span>
  86. </div>
  87. <div class="highlight">
  88. <span class="price left">¥799.00</span> <a href="#" class="merchant right">京东商城</a>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="hotsell-item">
  93. <div class="hotsell-image">
  94. <a target="_blank" href="#">
  95. <img class="lazy" src="images/1.jpg" width="160" height="160" style="display: block;">
  96. </a>
  97. </div>
  98. <div class="hotsell-bottom">
  99. <div class="hotsell-name">
  100. <a href="#" target="_blank">HTC T528w One SU 3G手机</a>
  101. </div>
  102. <div class="highlight">
  103. <span class="left">WCDMA/GSM 双卡双待</span>
  104. </div>
  105. <div class="highlight">
  106. <span class="price left">¥889.00</span> <a href="#" class="merchant right">1号店</a>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="hotsell-item">
  111. <div class="hotsell-image">
  112. <a target="_blank" href="#">
  113. <img class="lazy" src="images/1.jpg" width="160" height="160" style="display: block;">
  114. </a>
  115. </div>
  116. <div class="hotsell-bottom">
  117. <div class="hotsell-name">
  118. <a href="#" target="_blank">佳能Canon IXUS140 数码相机</a>
  119. </div>
  120. <div class="highlight">
  121. <span class="left">记录每一个美好瞬间</span>
  122. </div>
  123. <div class="highlight">
  124. <span class="price left">¥969.00</span> <a href="#" class="merchant right">京东商城</a>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. <div class="hotsell-items none">
  130. <div class="hotsell-item">
  131. <div class="hotsell-image">
  132. <a target="_blank" href="#">
  133. <img class="lazy" src="images/2.jpg" width="160" height="160" style="display: block;">
  134. </a>
  135. </div>
  136. <div class="hotsell-bottom">
  137. <div class="hotsell-name">
  138. <a href="#" target="_blank">iPhone 5s 16G版 3G手机</a>
  139. </div>
  140. <div class="highlight">
  141. <span class="left">苹果APPLE</span>
  142. </div>
  143. <div class="highlight">
  144. <span class="price left">¥4,399.00</span> <a href="#" class="merchant right">京东商城</a>
  145. </div>
  146. </div>
  147. </div>
  148. <div class="hotsell-item" style="width:198px">
  149. <div class="hotsell-image">
  150. <a target="_blank" href="#">
  151. <img class="lazy" src="images/2.jpg" width="160" height="160" style="display: block;">
  152. </a>
  153. </div>
  154. <div class="hotsell-bottom">
  155. <div class="hotsell-name">
  156. <a href="#" target="_blank">iPhone 5c 16G版 3G手机粉色</a>
  157. </div>
  158. <div class="highlight">
  159. <span class="left">多彩iPhone5C</span>
  160. </div>
  161. <div class="highlight">
  162. <span class="price left">¥3,299.00</span> <a href="#" class="merchant right">京东商城</a>
  163. </div>
  164. </div>
  165. </div>
  166. <div class="hotsell-item">
  167. <div class="hotsell-image">
  168. <a target="_blank" href="#">
  169. <img class="lazy" src="images/2.jpg" width="160" height="160" style="display: block;">
  170. </a>
  171. </div>
  172. <div class="hotsell-bottom">
  173. <div class="hotsell-name">
  174. <a href="#" target="_blank">红米手机 移动版 4GB 象牙白</a></div>
  175. <div class="highlight">
  176. <span class="left">四核 4.7英寸屏</span>
  177. </div>
  178. <div class="highlight">
  179. <span class="price left">¥699.00</span> <a href="#" class="merchant right">小米官网</a>
  180. </div>
  181. </div>
  182. </div>
  183. <div class="hotsell-item">
  184. <div class="hotsell-image">
  185. <a target="_blank" href="#">
  186. <img class="lazy" src="images/2.jpg" width="160" height="160" style="display: block;">
  187. </a>
  188. </div>
  189. <div class="hotsell-bottom">
  190. <div class="hotsell-name">
  191. <a href="#" target="_blank">EMOTO E868 3G手机</a></div>
  192. <div class="highlight">
  193. <span class="left">八核智能手机</span>
  194. </div>
  195. <div class="highlight">
  196. <span class="price left">¥799.00</span> <a href="#" class="merchant right">京东商城</a>
  197. </div>
  198. </div>
  199. </div>
  200. <div class="hotsell-item">
  201. <div class="hotsell-image">
  202. <a target="_blank" href="#">
  203. <img class="lazy" src="images/2.jpg" width="160" height="160" style="display: block;">
  204. </a>
  205. </div>
  206. <div class="hotsell-bottom">
  207. <div class="hotsell-name">
  208. <a href="#" target="_blank">HTC T528w One SU 3G手机</a>
  209. </div>
  210. <div class="highlight">
  211. <span class="left">WCDMA/GSM 双卡双待</span>
  212. </div>
  213. <div class="highlight">
  214. <span class="price left">¥889.00</span> <a href="#" class="merchant right">1号店</a>
  215. </div>
  216. </div>
  217. </div>
  218. <div class="hotsell-item">
  219. <div class="hotsell-image">
  220. <a target="_blank" href="#">
  221. <img class="lazy" src="images/2.jpg" width="160" height="160" style="display: block;">
  222. </a>
  223. </div>
  224. <div class="hotsell-bottom">
  225. <div class="hotsell-name">
  226. <a href="#" target="_blank">佳能Canon IXUS140 数码相机</a>
  227. </div>
  228. <div class="highlight">
  229. <span class="left">记录每一个美好瞬间</span>
  230. </div>
  231. <div class="highlight">
  232. <span class="price left">¥969.00</span> <a href="#" class="merchant right">京东商城</a>
  233. </div>
  234. </div>
  235. </div>
  236. </div>
  237. <div class="hotsell-items none">
  238. <div class="hotsell-item">
  239. <div class="hotsell-image">
  240. <a target="_blank" href="#">
  241. <img class="lazy" src="images/3.jpg" width="160" height="160" style="display: block;">
  242. </a>
  243. </div>
  244. <div class="hotsell-bottom">
  245. <div class="hotsell-name">
  246. <a href="#" target="_blank">iPhone 5s 16G版 3G手机</a>
  247. </div>
  248. <div class="highlight">
  249. <span class="left">苹果APPLE</span>
  250. </div>
  251. <div class="highlight">
  252. <span class="price left">¥4,399.00</span> <a href="#" class="merchant right">京东商城</a>
  253. </div>
  254. </div>
  255. </div>
  256. <div class="hotsell-item" style="width:198px">
  257. <div class="hotsell-image">
  258. <a target="_blank" href="#">
  259. <img class="lazy" src="images/3.jpg" width="160" height="160" style="display: block;">
  260. </a>
  261. </div>
  262. <div class="hotsell-bottom">
  263. <div class="hotsell-name">
  264. <a href="#" target="_blank">iPhone 5c 16G版 3G手机粉色</a>
  265. </div>
  266. <div class="highlight">
  267. <span class="left">多彩iPhone5C</span>
  268. </div>
  269. <div class="highlight">
  270. <span class="price left">¥3,299.00</span> <a href="#" class="merchant right">京东商城</a>
  271. </div>
  272. </div>
  273. </div>
  274. <div class="hotsell-item">
  275. <div class="hotsell-image">
  276. <a target="_blank" href="#">
  277. <img class="lazy" src="images/3.jpg" width="160" height="160" style="display: block;">
  278. </a>
  279. </div>
  280. <div class="hotsell-bottom">
  281. <div class="hotsell-name">
  282. <a href="#" target="_blank">红米手机 移动版 4GB 象牙白</a></div>
  283. <div class="highlight">
  284. <span class="left">四核 4.7英寸屏</span>
  285. </div>
  286. <div class="highlight">
  287. <span class="price left">¥699.00</span> <a href="#" class="merchant right">小米官网</a>
  288. </div>
  289. </div>
  290. </div>
  291. <div class="hotsell-item">
  292. <div class="hotsell-image">
  293. <a target="_blank" href="#">
  294. <img class="lazy" src="images/3.jpg" width="160" height="160" style="display: block;">
  295. </a>
  296. </div>
  297. <div class="hotsell-bottom">
  298. <div class="hotsell-name">
  299. <a href="#" target="_blank">EMOTO E868 3G手机</a></div>
  300. <div class="highlight">
  301. <span class="left">八核智能手机</span>
  302. </div>
  303. <div class="highlight">
  304. <span class="price left">¥799.00</span> <a href="#" class="merchant right">京东商城</a>
  305. </div>
  306. </div>
  307. </div>
  308. <div class="hotsell-item">
  309. <div class="hotsell-image">
  310. <a target="_blank" href="#">
  311. <img class="lazy" src="images/3.jpg" width="160" height="160" style="display: block;">
  312. </a>
  313. </div>
  314. <div class="hotsell-bottom">
  315. <div class="hotsell-name">
  316. <a href="#" target="_blank">HTC T528w One SU 3G手机</a>
  317. </div>
  318. <div class="highlight">
  319. <span class="left">WCDMA/GSM 双卡双待</span>
  320. </div>
  321. <div class="highlight">
  322. <span class="price left">¥889.00</span> <a href="#" class="merchant right">1号店</a>
  323. </div>
  324. </div>
  325. </div>
  326. <div class="hotsell-item">
  327. <div class="hotsell-image">
  328. <a target="_blank" href="#">
  329. <img class="lazy" src="images/3.jpg" width="160" height="160" style="display: block;">
  330. </a>
  331. </div>
  332. <div class="hotsell-bottom">
  333. <div class="hotsell-name">
  334. <a href="#" target="_blank">佳能Canon IXUS140 数码相机</a>
  335. </div>
  336. <div class="highlight">
  337. <span class="left">记录每一个美好瞬间</span>
  338. </div>
  339. <div class="highlight">
  340. <span class="price left">¥969.00</span> <a href="#" class="merchant right">京东商城</a>
  341. </div>
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. </div>
  348. </body>
  349. </html>