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

最新推荐文章于 2024-11-04 16:08:47 发布
最新推荐文章于 2024-11-04 16:08:47 发布
阅读量161 收藏
点赞数
文章标签： xhtml

点击(此处)折叠或打开

  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 --&gt
  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 --&gt
  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 --&gt
  303. <h2><a href=\"#\">超值特价区</a></h2>
  304. <h2><a href=\"#\">现货区</a></h2>
  305. <!--测试复制end--&gt
  306. </div>
  307. </div>
  308. </body>
  309. </html>


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

转载于:http://blog.itpub.net/29737856/viewspace-1268255/

cuikuang6306
关注
Html+Css新手简单快速仿京东商品分类导航
Jy
06-09 2万+
看一看最终的效果: 下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告) 因为我是用 纯css+html写的， 所以它的文件有
京东丶天猫商品导航栏(源码)
11-27
京东丶天猫商品导航栏(源码)
京东界面之底部导航栏
Liba_ba的博客
01-05 2657
//Java哦 public class Jingdong extends AppCompatActivity { private BottomTabBar bottab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceS
Html+Css简单仿京东商品分类导航
10-12
用HTML语言写的一个仿京东商城的界面，商品分类导航。
仿京东导航栏
01-05
京东菜单已经有不少JS前端爱好者仿写过,今天重新与大家分享一款仿京东商城的.这是一个用jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局。
jQuery京东分类导航菜单
tangtang5963的博客
08-05 1474
$('.all-sort-list > .item').hover(function(){ var eq = $('.all-sort-list > .item').index(this), //获取当前滑过是第几个元素 h = $('.all-sort-list').offset().top, //获取当前下拉菜单距离窗口多少像素 120px s = $(window
仿京东商品分类导航
rong2073868516的博客
03-09 1344
看一看最终的效果: 下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。 我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告) 因为我是用 纯css+html写的， 所以它...
仿京东商城html网页源码
2401_84103344的博客
05-02 338
由于篇幅限制，小编在此截出几张知识讲解的图解=“” />由于篇幅限制，小编在此截出几张知识讲解的图解[外链图片转存中…(img-UFNgsrDY-1714625444290)][外链图片转存中…(img-jqgbDYWv-1714625444290)][外链图片转存中…(img-XZ7UVDDX-1714625444291)][外链图片转存中…(img-qhdS05he-1714625444291)][外链图片转存中…(img-9TgIlkLf-1714625444291)]本文已被。
jquery仿京东侧边栏导航效果
10-20
- `.sign_add_height` 是一个包含多个子元素的列表，用于显示扩展内容，如商品分类或链接。 - `.sign_QR` 和 `.sign_end` 分别用于设置二维码和底部的其他元素。 - 图片的样式通过`.sign img`进行设置，包括大小...
jQuery简单实现仿京东分类导航层效果
10-22
主要介绍了jQuery简单实现仿京东分类导航层效果,涉及jQuery针对鼠标事件的响应及页面元素动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
仿京东分类列表的实现
03-12
每次点击移动到最顶的Listview,仿京东分类列表的实现，
css实现商城商品导航栏
健哥哥的博客
12-28 4183
京东商品导航栏！用css的hover实现
京东移动端分类页面侧导航栏实现
热门推荐
云
04-08 5万+
【代码】京东移动端分类页面侧导航栏实现。
京东导航栏的实现
mantou_riji的博客
04-14 909
效果： 代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="../reset.css" /> <link rel="stylesheet" href="../font/css/all.css" /> <style> /* 解决高度塌陷
vue3中使用vue-diff工具来比较数据差异
kanno的博客
11-04 374
vue3中使用vue-diff工具来比较数据差异，可以比较json、文本、css、js等数据格式，通过颜色来标识差异的地方
macOS_Sequoia_15.1.password(imacos.top).rdr.split.016
11-09
macOS_Sequoia_15.1.password(imacos.top).rdr.split.016
【java毕业设计】小区物业管理系统（springboot+vue+mysql+说明文档）.zip
最新发布
11-09
项目经过测试均可完美运行！ 环境说明： 开发语言：java jdk：jdk1.8 数据库：mysql 5.7+ 数据库工具：Navicat11+ 管理工具：maven 开发工具：idea/eclipse
使用DIV+CSS仿京东商城动态导航条教程
"这篇文章主要讲解如何使用DIV+CSS技术来创建一个类似京东商城的导航条效果，涵盖了网页布局、CSS样式以及JavaScript的onmouseout事件在动态切换中的应用。" 在网页设计中，导航条是至关重要的组成部分，它帮助用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值