sunyuan_software

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

看一看最终的效果:

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

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

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

接着我们看具体的代码实现(这里我只写了家用电器的二级分类)：
京东导航.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="#">DVDa>
                <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="#">DVDa>
                <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="#">DVDa>
                <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="#">DVDa>
                <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">>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: 罗坚元： http://blog.csdn.net/sunyuan_software

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

你可能感兴趣的:(Web前端)