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

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

php中文网

发布： 2016-06-24 11:43:07

原创

2824人浏览过

看一看最终的效果:

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

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

立即学习“前端免费学习笔记（深入）”；

Motiff妙多

Motiff妙多是一款AI驱动的界面设计工具，定位为“AI时代设计工具”

250

查看详情

/* 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: 罗坚元：