Html+Css新手简单快速仿京东商品分类导航

最新推荐文章于 2025-04-21 23:59:29 发布

sunyuan_software

最新推荐文章于 2025-04-21 23:59:29 发布

阅读量2.6w

点赞数 24

分类专栏： Web前端文章标签：京东导航电商导航纯css

本文链接：https://blog.csdn.net/sunyuan_software/article/details/46425575

版权

本文介绍了如何使用HTML和CSS快速仿制京东商品分类导航。通过分析、设计和实现三个步骤，详细讲解了导航结构的创建，包括一个包含全部商品分类的div、导航列表以及隐藏的大div，用于展示小分类列表和图片广告。作者罗坚元分享了实现这一效果的具体代码，包括京东导航.html、main.css和cssreset.css，并指出虽然涉及一些细节处理，但整体实现过程并不复杂。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看一看最终的效果:

下面我们就按照分析→设计→实现三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。

我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告)
京东导航结构
因为我是用纯css+html写的，所以它的文件有:京东导航.html,main.css,cssreset.css(css文件放在css这个目录下面).

接着我们看具体的代码实现(这里我只写了家用电器的二级分类)：
京东导航.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东导航</title>
<link href="css/cssreset.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>

<body>
<nav>
<div class="all">
    <a href="#">全部商品分类</a>
</div>
<ul>
    <li class="nav_item"><a href="#">家用电器</a><span class="jt">&gt;</span>
    <div class="sub_menu">
            <div class="leftmenu">
            <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>
                <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>
                </dd>
            </dl>  
                  <dl>
                <dt><a

最低0.47元/天解锁文章