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

看一看最终的效果:

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

我们先从把结构写好：一个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 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 class="test" 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="#">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>      

            </div>
            <div class="rightmenu">
                 <dl>
                        <dd>
                            <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
                                <img src="http://img10.360buyimg.com/vclist/jfs/t1198/21/1061230330/3619/48ee51cc/556ed3a0N9004a8f7.jpg"
                                    width="168" height="134" title="by:罗坚元">
                            </a>
                        </dd>
                        <dd>
                            <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
                                <img src="http://img11.360buyimg.com/vclist/jfs/t1531/43/307393451/3092/229dc57a/557194e1N0d5188f3.jpg"
                                    width="168" height="134" title="by:罗坚元">
                            </a>
                        </dd>
                    </dl>

            </div>
        </div>
    </li>       

    <li class="nav_item"><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">京东通信</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">电脑</a>、<a href="#">办公</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">内衣</a>、<a href="#">珠宝</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#">个护化妆</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">鞋靴</a>、<a href="#">箱包</a>、<a href="#">钟表</a>、<a href="#">奢侈品</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#">运动户外</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">汽车</a>、<a href="#">汽车用品</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">母婴</a>、<a href="#">玩具乐器</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">食品饮料</a>、<a href="#">酒类</a>、<a href="#">生鲜</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#">营养保健</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">数字商品</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">彩票</a>、<a href="#">旅行</a>、<a href="#">充值</a>、<a href="#">票务</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">理财</a>、<a href="#">众筹</a>、<a href="#">白条</a>、<a href="#">保险</a><span class="jt">&gt;</span></a></li>
</ul>
</nav>
</body>
</html>

main.css

/* CSS Document */
nav{
    position:absolute;
    left:100px;
    top:100px;
    border:1px solid #b61d1d;
    }
/*全部商品分类*/
.all{
    width:190px;
    height:44px;
    line-height:44px;
    background:#b1191a;
    padding:0 10px;
    }
    .all a{
            color:white;
            font-size:16px;

        }
/*导航菜单*/
.nav_item{

    width:190px;
    height:31px;
    line-height:31px;
    color:white;
    background:#b61d1d;
    padding:0 10px;
    }
ul li a{color:white;}

.jt{
    color:white;
    float:right;
    width:12px;
    padding-top:10px;
    font: 13px consolas;
    }
    /*hover*/
ul li:hover {
    background:white;
    }
ul li:hover a{
        color:#b61d1d;
        }
    /*submenu*/
.sub_menu{
    display:none;
    width:790px;
    position:absolute;
    left:210px;
    top:44px;
    background:#f7f7f7;
}
ul li:hover .sub_menu{display:block;}
.leftmenu{
   width: 550px;
   overflow:hidden;
   float:left;
}
.leftmenu dl{
    overflow:hidden;
    display:block;
    margin: 20px 0;

    }
.leftmenu dl dt{
    float:left;
    font-weight:bold;
    color:#737373;
    padding:0 8px;

}

.leftmenu dl  dd  a{
     color: #737373;
    float:left;
    height:20px;
    line-height:20px;
    padding:0 10px;
    border-left: 1px solid #e0e0e0;
     font-size:12px;
     margin-top:5px;
}
.rightmenu{
    float:right;
    }
.rightmenu dl {
    margin-top:20px;

    }
.rightmenu dl dd {
    padding:0;
    margin-bottom:2px;
    }

cssreset.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
    border: none;
 font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体";
 font-size: 14px;
}
ol,ul{
    list-style: none;
}
fieldset,img{
    border:0;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
}
a{
    text-decoration: none;
     color: #737373;
}
img, iframe {
    border: none;
    text-decoration:none;
}

看到代码后，其实里面包含了很多细节的处理,例如:列表有一个红色的边框,每个大分类后都有一个箭头等等,不过做起来还是比较简单的。

本文作者By: 罗坚元： http://blog.csdn.net/sunyuan_software

时间： 2024-10-05 05:25:29

Html+Css新手简单快速仿京东商品分类导航的相关文章

Android GridView 分组显示(仿京东商品分类)

Android GridView 分组显示(仿京东商品分类) Gridview分组显示, 仿京东分类效果 GridView 分组显示使用的第三方开源库: StickyGridHeadersGridView , 下载地址: https://github.com/TonicArtos/StickyGridHeaders 大致实现步骤: 1. adapter: SPCategoryRightAdapter extends BaseAdapter implements StickyGridHeader

竖向导航-仿京东左侧导航大类效果

完整代码 <!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> <meta http-equiv="Con

DIV+CSS实现仿京东商城导航条效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv=&quo

CSS流式布局仿京东

个人自学demo. 效果图: 地址:https://files-cdn.cnblogs.com/files/y112102/JdH5.7z 总结: 1:流式布局宽度使用百分比. 2:默认样式 body { width: 100%; /* 最小最大宽度 */ min-width: 320px; max-width: 640px; /* 居中 */ margin: 0 auto; font-size: 14px; font-family: -apple-system, Helvetica, san

装饰器的运用，编写一个简单的仿京东登录软件模拟支持微信和京东帐号登录

#__author__:"Jay guo" #__date__:2016/9/8 login_flag = False def login(flag): def func(f): def inner(): global login_flag if login_flag == False: nameuser = input("input your name:> ") print (nameuser) passwd = input ("input you

仿京东首页商品分类底部色标随鼠标移动特效

原文:仿京东首页商品分类底部色标随鼠标移动特效今天扒皮下京东商品展示区的一个特效: 大家可以自行去京东看下特效,下面是这个特效的动态图(这次聪明的我懂得给图加水印了) 理下思路,每个分类选项卡宽度一致,且有一条灰色底边,然后默认有一条红色的色标让它漂浮在首个选项卡上面(其中的小三角形可以自己做个图),默认首个选项卡的文本(像上图是"AAA")为红色,其它选项卡的为灰色.默认除第一个选项卡对应的下方的内容DIV显示外,其它选项卡对应的内容DIV隐藏: 鼠标移到某个选项卡则改变该选项卡字

使用递归制作仿京东淘宝的商品分类导航栏

前些天,培训ASP.NET的老师布置了作业,制作商城的一些重要功能, 昨天做了一下其中比较难的商品分类导航类,使用了递归的方法. ps:使用的是WebForm,希望看到MVC的同学请忽略. 最终效果图: 下面记录一下: 首先是数据库部分,使用的是SQL,在一张叫做Category的表中,设置了以下字段: [Id] 分类的Id,int,自增长[Name] 分类的名称,nvarchar(50)[ParentId] 父类的Id,int[Link] 链接地址,varchar(max),用于打开链接,也可

浅谈android中仅仅使用一个TextView实现高仿京东,淘宝各种倒计时

今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始

爬取京东商品分类和链接

最近因为工作比较忙也没有更新随笔.昨天下班因为身体不舒服,代码也没有码多少.说码代码也还算不上,毕竟是自己无聊写点小脚本自娱自乐. 今天这篇主要的知识点是使用Python的BeautifulSoup进行多层的遍历. 笔者闲来无事写了个小爬虫,主要是爬取京东商品分类以及对应的连接如图所示.只是一个简单的哈,不是爬取里面的隐藏的东西. from bs4 import BeautifulSoup as bsimport requestsheaders = { "host": "w