京东商城的商品分类代码

最新推荐文章于 2024-05-18 20:31:13 发布
最新推荐文章于 2024-05-18 20:31:13 发布
阅读量1.4w 收藏 15
点赞数 1
分类专栏： 商城分类样式制作 文章标签： 商品分类 display属性 JS实现商城分类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24770809/article/details/51791931
版权

京东商城的商品分类–代码

效果图：
这里写图片描述

  1. 该效果CSS可以拼接出来，但是出于CSS样式方法运用“hover”属性过多；产生浏览器不兼容问题。所以，该方法不值得提倡！
  2. JS方法实现，原理：点击div分类，激活触发div（#show_div{display：none；}）–>（#show_div{display：block；}）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
       <style type="text/css">
        body
        {
            padding: 0;
            font-size: 10pt;
            behavior:url(css/csshover.htc);
        }
        .topmenu
        {
            display: block;
            width: 220px;
            border: 2px solid #e4393c;
            margin: 0;
            padding: 0;
        }
        .toptitle
        {
            height: 40px;
            line-height: 40px;
            text-align: left;
            font-size: 11pt;
            font-weight: bold;
            color: White;
            background: #e4393c;
            padding-left: 20px;
        }
        .topmenu li
        {
            height: 30px;
            line-height: 30px;
            font-size: 11pt;
            list-style-type: none;
            text-align: left;
            padding-left: 8px;
            z-index: 3;
            background-image: url(1.png);
            background-repeat: no-repeat;
            background-position: right;
        }
        .topmenu li a
        {
            text-decoration: none;
            color: #313131;
        }
        .topmenu li a:hover
        {
            text-decoration: underline;
            font-weight: bold;
            color: #e4393c;
        }
        .topmenu .lihover /*鼠标移动到上面时，应用的样式*/
        {
            border: 1px solid #DDD;
            border-right: 0;
            box-shadow: 0 0 8px #DDD;
            -moz-box-shadow: 0 0 8px #DDD;
            -webkit-box-shadow: 0 0 8px #DDD;
            background-image: none;
            height:60px;
            border-left:4px solid #e4393c;


        }
         .topmenu .lihover .submenu /*悬浮层*/
        {
            display: block;
        }

        .topmenu .lihover span /*白色小方框*/
        {
            background: white;
            display: inline-block;
            z-index: 20;
            width: 20px;
            height: 60px;
            float: right;
            position: relative;
        }


      .topmenu li b
       {
           display:none;

        }

        .topmenu .lihover b
        {
            display:block;
            height:30px;
            line-height:30px;
            font-weight:normal;
            font-size:10pt;
        }

        .submenu
        {
            display: none;
            width: 715px;
            left: 220px;
            position: absolute;
            top: 40px;
            border: 1px solid #DDD;
            z-index: 4;
            background: white;
            box-shadow: 0 0 8px #DDD;
            -moz-box-shadow: 0 0 8px #DDD;
            -webkit-box-shadow: 0 0 8px #DDD;
        }
        .leftdiv
        {
            float: left;
            width: 490px;
            margin: 5px;
        }
        .rightdiv
        {
            float: left;
            width: 200px;
            margin: 5px;
        }

        .leftdiv dl
        {
            display: block;
            border-bottom: 1px solid #EEE;
            padding-bottom: 6px;
            overflow: hidden;
        }
        .leftdiv dl dt
        {
            display: block;
            float: left;
            width: 60px;
            text-align: right;
            height: 22px;
            line-height: 22px;
            padding-right: 6px;
        }

        .leftdiv dl dt a
        {
            color: #e4393c;
            font-weight: bold;
            text-decoration: underline;
            font-size: 10pt;
        }
        .leftdiv dl dd
        {
            display: block;
            overflow: hidden;
        }
        .leftdiv dl dd a
        {
            display: block;
            float: left;
            border-left: 1px solid #CCC;
            color: #737373;
            font-size: 9pt;
            padding: 0 8px;
            height: 14px;
            line-height: 14px;
            margin: 4px 0;
        }

        .rightdiv dl dd
        {
            margin: 3px 0;
        }

        .rightdiv dl dt
        {
            color: #e4393c;
            font-weight: bold;
            font-size: 10pt;
        }

        .rightdiv dl dd a
        {
            font-size: 9pt;
            color: #737373;
            line-height: 22px;
        }
        .rightdiv dl dd a:hover
        {
            color: #737373;
            font-weight: normal;
        }

      .rightPic
      {
          position:relative;
          right:-35px;
          bottom:-30px;

          }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {
    
            var Lis = document.getElementsByTagName("li");
            for (i = 0; i < Lis.length; i++) {
                Lis[i].i = i;
                Lis[i].onmouseover = function () {
    
                    this.className = "lihover";

                    var h0 = (this.i - 1) * 30 + 42;
                    var y = this.getElementsByTagName("div")[0].offsetHeight;
                    var h = this.getElementsByTagName("div")[0].style.top + y;

                    if (h < h0) {
                        this.getElementsByTagName("div")[0].style.top = h0 + "px";
                    }

                    if (y > 550) {
                        this.getElementsByTagName("div")[0].style.top = "3px";
                    }
                }

                Lis[i].onmouseout = function () {
    
                    this.className = "";
                }
            }

        }
    </script>
    <ul class="topmenu">
        <div class="toptitle">
            全部商品分类
        </div>
        <li><a href="#">图书、音像、数字商品</a><span></span> <b><a href="#">文学</a> <a href="#">经管</a>
            <a href="#">畅读VIP</a></b>
            <div class="submenu">
                <div class="leftdiv">
                    <dl>
                        <dt><a href="#">电子书</a></dt>
                        <dd>
                            <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
                            <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">数字音乐</a></dt>
                        <dd>
                            <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
                            <a href="#">乡村民谣</a> <a href="#">有声读物</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">音像</a></dt>
                        <dd>
                            <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">文艺</a></dt>
                        <dd>
                            <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
                                href="#">艺术</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">人文社科</a></dt>
                        <dd>
                            <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
                            <a href="#">哲学/宗教</a> <a href="#">社会科学</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">经管励志</a></dt>
                        <dd>
                            <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
                        </dd>
                    </dl>
                    <dl class="fore7">
                        <dt><a href="#">生活</a></dt>
                        <dd>
                            <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
                            <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
                            <a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">科技</a></dt>
                        <dd>
                            <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
                                工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">少儿</a></dt>
                        <dd>
                            <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
                            <a href="#">11-14岁</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">教育</a></dt>
                        <dd>
                            <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">其它</a></dt>
                        <dd>
                            <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
                            <a href="#">杂志/期刊</a>
                        </dd>
                    </dl>
                </div>
                <div class="rightdiv">
                    <dl>
                        <dd>
                            <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
                                <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
                                    width="194" height="70" title="\家电">
                            </a>
                        </dd>
                        <dd>
                            <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
                                <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
                                    width="194" height="70" title="小家电--三请聚宝盆">
                            </a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>推荐品牌</dt>
                        <dd>
                            <a href="#">美的官方旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">苏泊尔旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">九阳旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">东菱旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">海尔统帅旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">小熊旗舰店</a>
                        </dd>
                    </dl>
                    <img src="wii.png" class="rightPic" />
                </div>
            </div>
        </li>
        <li><a href="#">家用电器</a> <span></span>
            <div class="submenu">
                <div class="leftdiv">
                    <dl>
                        <dt><a href="#">大 家 电</a></dt>
                        <dd>
                            <a href="#">平板电视</a> <a href="#">空调</a> <a href="#">冰箱</a> <a href="#">洗衣机</a> <a
                                href="#">家庭影院</a> <a href="#">DVD</a> <a href="#">迷你音响</a> <a href="#">烟机/灶具</a>
                            <a href="#">热水器</a> <a href="#">消毒柜/洗碗机</a> <a href="#">酒柜/冷柜</a> <a href="#">家电配件</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">生活电器</a></dt>
                        <dd>
                            <a href="#">电风扇</a> <a href="#">冷风扇</a> <a href="#">净化器</a> <a href="#">饮水机</a>
                            <a href="#">净水设备</a> <a href="#">挂烫机/熨斗</a> <a href="#">吸尘器</a> <a href="#">电话机</a>
                            <a href="#">插座</a> <a href="#">收录/音机</a> <a href="#">清洁机</a> <a href="#">加湿器</a>
                            <a href="#">除湿/干衣机</a> <a href="#">取暖电器</a> <a href="#">其它生活电器</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">厨房电器</a></dt>
                        <dd>
                            <a href="#">电压力锅</a> <a href="#">电饭煲</a> <a href="#">豆浆机</a> <a href="#">面包机</a>
                            <a href="#">咖啡机</a> <a href="#">微波炉</a> <a href="#">料理/榨汁机</a> <a href="#">电烤箱</a>
                            <a href="#">电磁炉</a> <a href="#">电饼铛/烧烤盘</
最低0.47元/天 解锁文章
qq_24770809
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
京东商品分类编号
08-29
京东产品分类，分一级二级三级标签，附带标签吗，二级标签不太准确
京东商城商品分类表
12-01
可直接导入MySQL数据库，另存为TXT文件后可导入Oracle数据库。
制作京东购物车，包含html+js+css完整代码
最新发布
m0_74937643的博客
05-18 1168
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
京东商品分类表.xlsx
08-02
京东商品分类表：其中包括生鲜、食品饮料、酒水 三大部分。
Html+Css简单仿京东商品分类导航
10-12
用HTML语言写的一个仿京东商城的界面，商品分类导航。
京东全商品分类
12-18
较为全面的京东商城分类信息，在第三个库里有两个字符strcode字段，
模仿京东商城商品分类代码
06-22
总结来说，模仿京东商城商品分类代码涉及到前端的Ajax请求处理、动态DOM操作、响应式设计，以及后端的接口设计和数据返回。这个过程中，开发者可以深入理解前后端交互、数据处理和用户体验优化等关键点，从而提升...
精美的京东商城商品分类导航菜单代码
11-21
【标题】：“精美的京东商城商品分类导航菜单代码”指的是为京东商城的商品分类设计的一套高效、美观的导航菜单代码实现。这样的代码通常涉及到前端网页开发技术，旨在提供用户友好的浏览体验，使用户能够方便地找到...
仿京东商城商品分类菜单源代码
03-18
该资源是一个基于PHP实现的仿京东商城商品分类菜单的源代码。这个项目旨在提供一个类似于京东网站的商品分类导航菜单，使用户能够方便地浏览和筛选各类商品。下面将详细解析这个源代码的关键知识点： 1. **PHP编程...
京东新版商品分类导航代码
05-01
该导航代码的设计旨在模仿京东网上商城的新版侧栏商品分类结构，这通常包括多级分类、展开与折叠、高亮当前选中分类等功能。通过jQuery，我们可以轻松地实现这些动态效果。例如，当用户鼠标悬停在某个分类上时，其子...
京东商城商品分类源码.rar
12-16
【标题】"京东商城商品分类源码.rar"是一款与京东商城商品分类系统相关的源代码集合，可能是为了帮助开发者理解和构建类似的商品展示和分类功能。这个压缩包可能包含了实现这一功能的关键代码文件，使得用户能够深入...
京东商品详情页
08-16
该Demo是本人在学习jQuery过程中仿照京东商品详情页自己制作的，里面包含有详细的css样式、Jquery的代码及注释，希望对有需要的小伙伴有所帮助。
京东商品筛选功能特效代码
03-20
京东商品筛选功能是一款类似京东商城的商品列表筛选功能。
京东jd商品详情API接口（item_get-根据ID取商品详情）代码封装
Api_k的博客
05-16 720
淘宝商品详情接口，京东商品详情接口，1688商品详情接口，拼多多商品详情接口，虾皮商品详情接口，lazada商品详情接口
简单实现京东分类页面
qq_40592484的博客
01-20 2719
很多app都会有这种页面 这种页面该怎么实现 我看了好多网友的实现方法 无一例外 都是DoubleLIstView,作为一个新时代的年轻人,我决定告别ListVIew,使用RecycleView来实现 package Fragments; import android.arch.lifecycle.LifecycleOwner; import android.arch.lifecycle.Li...
京东API、获得JD商品详情API调取数据部分代码展示
wbryze的博客
07-06 2029
以下是行业内了解到的一些情况。需要更多API调试请移步注册API账号 http://console.open.onebound.cn/console/?i=Rookie { “item”: { “num_iid”: “1616225709”, “title”: “New Balance NB男鞋女鞋nb574官方旗舰2021夏季新款运动鞋复古休闲鞋透气跑步鞋男 ML574LGI/574系列/浅驼色/店长推荐 42”, “desc_short”: “”, “price”: “619.00”, “total
Android 仿京东、拼多多商品分类页的示例代码
热门推荐
凉菇凉的博客
04-17 1万+
最近接了一个项目，要仿照京东写一个商品分类页，但需要滑动右边子分类，左边的主分类也跟着变换，写了个demo，需要的同学可以自取。 先放一个写完之后的样子： 写这个需求的思路也很清晰，首先左边肯定是一个listView，右边也是一个listView，这两个listView要达到一个联动的效果。右边的listView再嵌套一个GridView即可。如下图所示。 所以，我们需要的数据结构也...
使用css实现产品分类,DIV+CSS实现京东商城分类适合所有版本
weixin_39622628的博客
08-03 644
有不少人想做京东商城分类结果，查找了一下之前的帖子，发现大虾们普通都是直接下载了京东的代码并在其根底上改。但如许会呈现一个问题，就是ecshop不兼容jquery，而这个问题处理起来比拟复杂，更欠好的是它会毁坏ecshop的内部函数，晦气于今后版本晋级。人人不需求盲目迷信大站，其实京东商城的分类结果完全可以用纯DIV+CSS完成，不需要jquery，甚至一句javascript都不写也能完成。第一...
jQuery案例之tab栏切换
宅羽的博客
12-09 739
◆ 示例内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
爬取京东商城商品信息代码
04-27
当然，以下是一个简单的Python代码示例，用于爬取京东商城商品信息： ```python import requests from bs4 import BeautifulSoup def get_jd_product_info(url): headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36' } response = requests.get(url, headers=headers) soup = BeautifulSoup(response.text, 'html.parser') # 获取商品标题 title = soup.find('div', class_='sku-name').text.strip() # 获取商品价格 price = soup.find('span', class_='p-price').find('span', class_='price').text.strip() # 获取商品评价数量 comment_count = soup.find('a', id='comment-count').text.strip() # 获取商品详情 detail = soup.find('div', class_='p-parameter').text.strip() # 返回商品信息 product_info = { 'title': title, 'price': price, 'comment_count': comment_count, 'detail': detail } return product_info # 示例使用：爬取iPhone 12的信息 url = 'https://item.jd.com/100012043978.html' product_info = get_jd_product_info(url) print(product_info) ``` 请注意，这只是一个简单的示例代码，实际爬取网页时可能需要处理更多的异常情况和反爬机制。另外，爬取网页信息需要遵守网站的相关规定和法律法规，确保合法合规使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值