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

看一看最终的效果:

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

我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告)

因为我是用纯css+html写的，所以它的文件有:京东导航.html,main.css,cssreset.css(css文件放在css这个目录下面).

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

京东导航
 全部商品分类
 家用电器>    大家电
  平板电视 空调 冰箱 洗衣机 家庭影院 DVD 迷你音响 烟机/灶具  热水器 消毒柜/洗碗机 冷柜/冰吧 酒柜 家电配件 
 
  生活电器
  电风扇 冷风扇 净化器 加湿器 扫地机器人 吸尘器 挂烫机/熨斗 插座  电话机 清洁机 除湿机 干衣机 收录/音机 
 
  厨房电器
  电压力锅 空调 冰箱 洗衣机 家庭影院 DVD 迷你音响 烟机/灶具  热水器 消毒柜/洗碗机 冷柜/冰吧 酒柜 家电配件 
 
  个护健康
  平板电视 空调 冰箱 洗衣机 家庭影院 DVD 迷你音响 烟机/灶具  热水器 消毒柜/洗碗机 冷柜/冰吧 酒柜 家电配件 
 
  五金家装
  平板电视 空调 冰箱 洗衣机 家庭影院 DVD 迷你音响 烟机/灶具  热水器 消毒柜/洗碗机 冷柜/冰吧 酒柜 家电配件 
 
 
       
     
 
 
 
 
 手机、数码、京东通信>
 电脑、办公>
 家居、家具、家装、厨具>
 男装、女装、内衣、珠宝>
 个护化妆>
 鞋靴、箱包、钟表、奢侈品>
 运动户外>
 汽车、汽车用品>
 母婴、玩具乐器>
 食品饮料、酒类、生鲜>
 营养保健>
 图书、音像、数字商品>
 彩票、旅行、充值、票务>
 理财、众筹、白条、保险>

Copy after login

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; }

Copy after login

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; }

Copy after login

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

本文作者By: 罗坚元：