ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > IT职业 > IT图书 > 仿京东商城的商品分类导航条

仿京东商城的商品分类导航条

原创 IT图书 作者：chunzhisu 时间：2014-09-12 10:54:00 0 删除 编辑

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
  2. <html xmlns=\"http://www.w3.org/1999/xhtml\">
  3. <head>
  4. <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf8\" />
  5. <title>石家庄油漆</title>
  6. <style type=\"text/css\">
  7. .my_left_category{
  8. width:150px;
  9. font-size:12px;
  10. font-family:arial,sans-serif;
  11. letter-spacing:2px;
  12. }
  13. .my_left_category h1{
  14. background-image:url(/UploadFiles/2014-07/2/2014731223437733.gif);
  15. height:20px;
  16. background-repeat:no-repeat;
  17. font-size:14px;
  18. font-weight:bold;
  19. padding-left:15px;
  20. padding-top:8px;
  21. margin:0px;
  22. color:#FFF;
  23. }
  24. .my_left_category .my_left_cat_list{
  25. width:148px;
  26. border-color:#b60134;
  27. border-style:solid;
  28. border-width:0px 1px 1px 1px;
  29. line-height:13.5pt;
  30. }
  31. .my_left_category .my_left_cat_list h2 {
  32. margin:0px;
  33. padding:3px 5px 0px 9px;
  34. }
  35. .my_left_category .my_left_cat_list h2 a {
  36. color:#d6290b;
  37. font-weight:bold;
  38. font-size:14px;
  39. line-height:22px;
  40. }
  41. .my_left_category .my_left_cat_list h2 a:hover {
  42. color:#d6290b;
  43. font-weight:bold;
  44. font-size:14px;
  45. line-height:22px;
  46. }
  47. .my_left_category .h2_cat{
  48. width:148px;
  49. height:26px;
  50. background-image:url(/UploadFiles/2014-07/2/2014731221783326.gif);
  51. background-repeat:no-repeat;
  52. line-height:26px;
  53. font-weight:normal;
  54. color:#333333;
  55. position:relative;
  56. }
  57. .my_left_category .h2_cat_1{
  58. width:148px;
  59. height:26px;
  60. background-image:url(/UploadFiles/2014-07/2/2014731225679500.gif);
  61. background-repeat:no-repeat;
  62. line-height:26px;
  63. font-weight:normal;
  64. color:#333333;
  65. position:relative;
  66. }
  67. .my_left_category a{
  68. font:12px;
  69. text-decoration:none;
  70. color:#333333;
  71. }
  72. .my_left_category a:hover{
  73. text-decoration:underline;
  74. color:#ff3333;
  75. }
  76. .my_left_category h3{
  77. margin:0px;
  78. padding:0px;
  79. height:26px;
  80. font-size:12px;
  81. font-weight:normal;
  82. display:block;
  83. padding-left:8px;
  84. }
  85. .my_left_category h3 span{color:#999999; width:145px; float:right;}
  86. .my_left_category h3 a{ line-height:26px;}
  87. .my_left_category .h3_cat{
  88. display:none;
  89. width:204px;
  90. position:absolute;
  91. left:123px;
  92. margin-top:-26px;
  93. cursor:auto;
  94. }
  95. .my_left_category .shadow{
  96. position:inherit;
  97. background:url(/UploadFiles/2014-07/2/2014731223860926.gif) left top;
  98. width:204px;
  99. }
  100. .my_left_category .shadow_border{
  101. position:inherit;
  102. width:200px;
  103. border:1px solid #959595; margin-top:1px;
  104. border-left-width:0px;
  105. background:url(/UploadFiles/2014-07/2/2014731221781894.gif) no-repeat 0px 21px;
  106. background-color:#ffffff;
  107. margin-bottom:3px
  108. }
  109. .my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
  110. .my_left_category .shadow_border ul li {
  111. list-style:none;
  112. padding-left:10px;
  113. background-image:url(/UploadFiles/2014-07/2/201473122179663.gif);
  114. background-repeat:no-repeat;
  115. background-position:0px 8px;
  116. float:left;
  117. width:75px;
  118. height:26px;
  119. overflow:hidden;
  120. letter-spacing:0px;
  121. }
  122. .my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
  123. .my_left_category .active_cat h3 { font-weight:bold}
  124. .my_left_category .active_cat h3 span{ display:none;}
  125. .my_left_category .active_cat div{display:block;}
  126. </style>
  127. </head>
  128. <body>
  129. <div class=\"my_left_category\">
  130. <h1>分类导航</h1>
  131. <div class=\"my_left_cat_list\">
  132. <h2><a href=\"#\">按网站类别</a></h2>
  133. <div class=\"h2_cat\" onmouseover=\"this.className=\'h2_cat active_cat\'\" onmouseout=\"this.className=\'h2_cat\'\">
  134. <h3><a href=\"#\">企业建站</a></h3>
  135. <div class=\"h3_cat\">
  136. <div class=\"shadow\">
  137. <div class=\"shadow_border\">
  138. <ul>
  139. <li><a href=\"#\">LOGO设计</a></li>
  140. <li><a href=\"#\">网站设计</a></li>
  141. <li><a href=\"#\">网站广告</a></li>
  142. <li><a href=\"#\">推广</a></li>
  143. <li><a href=\"#\">建网站</a></li>
  144. <li><a href=\"#\">网站推广</a></li>
  145. <li><a href=\"#\">网站建设</a></li>
  146. <li><a href=\"#\">SEO</a></li>
  147. </ul>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. <div class=\"h2_cat\" onmouseover=\"this.className=\'h2_cat active_cat\'\" onmouseout=\"this.className=\'h2_cat\'\">
  153. <h3><a href=\"#\">韩国男装</a></h3>
  154. <div class=\"h3_cat\">
  155. <div class=\"shadow\">
  156. <div class=\"shadow_border\">
  157. <ul>
  158. <li><a href=\"#\">LOGO设计</a></li>
  159. <li><a href=\"#\">网站设计</a></li>
  160. <li><a href=\"#\">网站广告</a></li>
  161. <li><a href=\"#\">推广</a></li>
  162. <li><a href=\"#\">建网站</a></li>
  163. <li><a href=\"#\">网站推广</a></li>
  164. <li><a href=\"#\">网站建设</a></li>
  165. <li><a href=\"#\">SEO</a></li>
  166. </ul>
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. <div class=\"h2_cat\" onmouseover=\"this.className=\'h2_cat active_cat\'\" onmouseout=\"this.className=\'h2_cat\'\">
  172. <h3><a href=\"#\">韩国童装</a></h3>
  173. <div class=\"h3_cat\">
  174. <div class=\"shadow\">
  175. <div class=\"shadow_border\">
  176. <ul>
  177. <li><a href=\"#\">LOGO设计</a></li>
  178. <li><a href=\"#\">网站设计</a></li>
  179. <li><a href=\"#\">网站广告</a></li>
  180. <li><a href=\"#\">推广</a></li>
  181. <li><a href=\"#\">建网站</a></li>
  182. <li><a href=\"#\">网站推广</a></li>
  183. <li><a href=\"#\">网站建设</a></li>
  184. <li><a href=\"#\">SEO</a></li>
  185. </ul>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. <!-- again -->
  191. <h2><a href=\"#\">按品牌选货</a></h2>
  192. <div class=\"h2_cat\" onmouseover=\"this.className=\'h2_cat active_cat\'\" onmouseout=\"this.className=\'h2_cat\'\">
  193. <h3><a href=\"#\" style=\"color:#ff3333;\">热销推荐</a></h3>
  194. <div class=\"h3_cat\">
  195. <div class=\"shadow\">
  196. <div class=\"shadow_border\">
  197. <ul>
  198. <li><a href=\"#\">LOGO设计</a></li>
  199. <li><a href=\"#\">网站设计</a></li>
  200. <li><a href=\"#\">网站广告</a></li>
  201. <li><a href=\"#\">推广</a></li>
  202. <li><a href=\"#\">建网站</a></li>
  203. <li><a href=\"#\">网站推广</a></li>
  204. <li><a href=\"#\">网站建设</a></li>
  205. <li><a href=\"#\">SEO</a></li>
  206. </ul>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. <div class=\"h2_cat\" onmouseover=\"this.className=\'h2_cat active_cat\'\" onmouseout=\"this.className=\'h2_cat\'\">
  212. <h3><a href=\"#\">网站建设</a></h3>
  213. <div class=\"h3_cat\">
  214. <div class=\"shadow\">
  215. <div class=\"shadow_border\">
  216. <ul>
  217. <li><a href=\"#\">LOGO设计</a></li>
  218. <li><a href=\"#\">网站设计</a></li>
  219. <li><a href=\"#\">网站广告</a></li>
  220. <li><a href=\"#\">推广</a></li>
  221. <li><a href=\"#\">建网站</a></li>
  222. <li><a href=\"#\">网站推广</a></li>
  223. <li><a href=\"#\">推广</a></li>
  224. <li><a href=\"#\">建网站</a></li>
  225. <li><a href=\"#\">网站推广</a></li>
  226. <li><a href=\"#\">推广</a></li>
  227. <li><a href=\"#\">建网站</a></li>
  228. <li><a href=\"#\">网站推广</a></li>
  229. <li><a href=\"#\">网站建设</a></li>
  230. <li><a href=\"#\">SEO</a></li>
  231. <li><a href=\"#\">网站制作</a></li>
  232. <li><a href=\"#\">LOGO设计</a></li>
  233. <li><a href=\"#\">网站设计</a></li>
  234. <li><a href=\"#\">网站广告</a></li>
  235. <li><a href=\"#\">推广</a></li>
  236. <li><a href=\"#\">建网站</a></li>
  237. <li><a href=\"#\">网站推广</a></li>
  238. <li><a href=\"#\">网站建设</a></li>
  239. <li><a href=\"#\">SEO</a></li>
  240. <li><a href=\"#\">网站建设</a></li>
  241. <li><a href=\"#\">LOGO设计</a></li>
  242. <li><a href=\"#\">网站设计</a></li>
  243. <li><a href=\"#\">网站广告</a></li>
  244. <li><a href=\"#\">推广</a></li>
  245. <li><a href=\"#\">建网站</a></li>
  246. <li><a href=\"#\">网站推广</a></li>
  247. <li><a href=\"#\">网站建设</a></li>
  248. <li><a href=\"#\">SEO</a></li>
  249. </ul>
  250. </div>
  251. </div>
  252. </div>
  253. </div>
  254. <div class=\"h2_cat\" onmouseover=\"this.className=\'h2_cat active_cat\'\" onmouseout=\"this.className=\'h2_cat\'\">
  255. <h3><a href=\"#\">网站程序</a></h3>
  256. <div class=\"h3_cat\">
  257. <div class=\"shadow\">
  258. <div class=\"shadow_border\">
  259. <ul>
  260. <li><a href=\"#\">PHP</a></li>
  261. <li><a href=\"#\">ASP</a></li>
  262. <li><a href=\"#\">JSP</a></li>
  263. <li><a href=\"#\">ASP.Net</a></li>
  264. </ul>
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. <div class=\"h2_cat_1\" onmouseover=\"this.className=\'h2_cat_1 active_cat\'\" onmouseout=\"this.className=\'h2_cat_1\'\">
  270. <h3><a href=\"#\">其他网站</a></h3>
  271. </div>
  272. <!-- again -->
  273. <h2><a href=\"#\">按价格选货</a></h2>
  274. <div class=\"h2_cat\" onmouseover=\"this.className=\'h2_cat active_cat\'\" onmouseout=\"this.className=\'h2_cat\'\">
  275. <h3><a href=\"#\">低端价位</a></h3>
  276. <div class=\"h3_cat\">
  277. <div class=\"shadow\">
  278. <div class=\"shadow_border\">
  279. <ul>
  280. <li><a href=\"#\">50元以下</a></li>
  281. <li><a href=\"#\">50-100元</a></li>
  282. </ul>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. <div class=\"h2_cat\" onmouseover=\"this.className=\'h2_cat active_cat\'\" onmouseout=\"this.className=\'h2_cat\'\">
  288. <h3><a href=\"#\">中高端价位</a></h3>
  289. <div class=\"h3_cat\">
  290. <div class=\"shadow\">
  291. <div class=\"shadow_border\">
  292. <ul>
  293. <li><a href=\"#\">100-150元</a></li>
  294. <li><a href=\"#\">150-200元</a></li>
  295. <li><a href=\"#\">200-300元</a></li>
  296. <li><a href=\"#\">300元以上</a></li>
  297. </ul>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. <!-- again -->
  303. <h2><a href=\"#\">超值特价区</a></h2>
  304. <h2><a href=\"#\">现货区</a></h2>
  305. <!--测试复制end-->
  306. </div>
  307. </div>
  308. </body>
  309. </html>


来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/29737856/viewspace-1268255/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： css模拟title和alt的提示效果
下一篇： JavaScript打造的一棵圣诞树
请登录后发表评论 登录
全部评论
chunzhisu

注册时间：2014-07-04

  • 博文量
    95
  • 访问量
    122213

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593