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

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

微信小程序】仿京东商品分类界面
微信小程序]仿京东商品分类界面要点: 1.左右两侧可以各自滑动,互不影响 → absolute布局 2.商品根据不同数量自适应排列 → flex-wrap的应用 3.切换左侧导航后,右侧显示对应变化 ...
Android中实现简单的仿京东详情页面
前言: 之前做过一个商城项目,实现了类似京东的详情页,采用Coordinatorlatout+Appbarlayout+toolbar实现,实现的效果主要是沉浸式状态栏和标题栏,当图片滑动时标题栏和按 ...
Android 仿京东商品分类(简单实现仅供参考)
//导入依赖 implementation 'com.android.support:recyclerview-v7:28.0.0' //首先在activity页面添加两个水平的RecyclerVie ...
【微信小程序】仿京东商品分类界面
图示:(京东左) 要点: 1.左右两侧可以各自滑动,互不影响 → absolute布局 2.商品根据不同数量自适应排列 → flex-wrap的应用 3.切换左侧导航后,右侧显示对应变化,且默认显示在 ...
html商品分类列表页面,仿京东商城系列7------商品分类页面
前言本文我们将一起实现一个仿京东商品分类页面.废话不说,上图: 商品分类.gif 内容商品分类展示页面涉及到的技术有Okhttp , Fresco加载机制,MaterialRefreshLayou ...
HTMLCSS仿京东首页制作静态页面总结
目录一.网站优化三大标签:title(网站标题),description(网站说明),Keywords(网站关键词) 二.favicon图表的使用三.字体图标的使用四.base.css和comm ...
php 京东首页分类导航,仿京东导航栏
摘要: 仿京东顶部导航栏仿京东顶部导航栏 *{ margin:0px; padding:0px; } .header{ width:100%; height:35px; background-co ...
HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)
web前端html+css+js仿京东商城/天猫/电商平台❤功能齐全(大学毕业设计论文) 仿京东/天猫/苏苏/鞋服商城/服装商城/古装商城/商城首页/商城html/商城模板/商城购物/中文电商/商城h ...
快速仿写京东、天猫下拉刷新
好久没输出文章了,最近研发任务比较忙,果然计划赶不上变化,之前还希望能一周一输出,好吧,我还是承认自己比较懒好了,=.=## 这次跟大家分享一下下拉刷新,之前我们的公司的项目一直都是使用SwipeRe ...

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

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

最新文章

热门文章