Heim > Artikel > Web-Frontend > Html+Css新手简单快速仿京东商品分类导航_html/css_WEB-ITnose
Html+Css新手简单快速仿京东商品分类导航_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:072521Durchsuche
看一看最终的效果:
下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。
我们先从把结构写好：一个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">></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" style="max-width:90%" style="max-width:90%" title="by:罗坚元" alt="Html+Css新手简单快速仿京东商品分类导航_html/css_WEB-ITnose" > </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" style="max-width:90%" style="max-width:90%" title="by:罗坚元" alt="Html+Css新手简单快速仿京东商品分类导航_html/css_WEB-ITnose" > </a> </dd> </dl> </div> </div> </li> <li class="nav_item"><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">京东通信</a><span class="jt">></span></li> <li class="nav_item"><a href="#"><a href="#">电脑</a>、<a href="#">办公</a><span class="jt">></span></li> <li class="nav_item"><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a><span class="jt">></span></li> <li class="nav_item"><a href="#"><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">内衣</a>、<a href="#">珠宝</a><span class="jt">></span></li> <li class="nav_item"><a href="#">个护化妆</a><span class="jt">></span></li> <li class="nav_item"><a href="#"><a href="#">鞋靴</a>、<a href="#">箱包</a>、<a href="#">钟表</a>、<a href="#">奢侈品</a><span class="jt">></span></li> <li class="nav_item"><a href="#">运动户外</a><span class="jt">></span></li> <li class="nav_item"><a href="#"><a href="#">汽车</a>、<a href="#">汽车用品</a><span class="jt">></span></li> <li class="nav_item"><a href="#"><a href="#">母婴</a>、<a href="#">玩具乐器</a><span class="jt">></span></li> <li class="nav_item"><a href="#"><a href="#">食品饮料</a>、<a href="#">酒类</a>、<a href="#">生鲜</a><span class="jt">></span></li> <li class="nav_item"><a href="#">营养保健</a><span class="jt">></span></li> <li class="nav_item"><a href="#"><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">数字商品</a><span class="jt">></span></li> <li class="nav_item"><a href="#"><a href="#">彩票</a>、<a href="#">旅行</a>、<a href="#">充值</a>、<a href="#">票务</a><span class="jt">></span></li> <li class="nav_item"><a href="#"><a href="#">理财</a>、<a href="#">众筹</a>、<a href="#">白条</a>、<a href="#">保险</a><span class="jt">></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: 罗坚元 ：
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：web移动端触摸滑动事件_html/css_WEB-ITnoseNächster Artikel：css3 shadow实现的各种漂亮阴影效果_html/css_WEB-ITnose