HTML:
    （1）先确定从块的结构，结构为一整个nav 包含18个div

    （2）每一个div中包含着若干个 a标签

    CSS:
    （1）先要对整体body进行着色
    （2）同时在item中设置好字体大小
    （3）设置单个div的高度，因为是字把div高度顶起来的，设置height和line-height使得 div高度相同
    （4）又因为左padding多了10px,因为padding和内容区颜色相同，且不会超出父元素nav的总宽度，因为会自动控制七个元素之和加起来等于总宽度
    （5）移动到某一行会产生颜色变化，当时不知道如何做到的，看了视频代码，知道是对整个div设置hover,并设置好背景颜色
    （6）设置好去除下划线，在a中设置text-decoration: none;

    代码：

    HTML：
    家用电器

    1.         <div class="item">
    2.             <a href="#">手机</a>/
    3.             <a href="#">运营商</a>/
    4.             <a href="#">数码</a>
    5.         </div>
    7.         <div class="item">
    8.             <a href="#">电脑</a>/
    9.             <a href="#">办公</a>
    10.         </div>
    12.         <div class="item">
    13.             <a href="#">家居</a>/
    14.             <a href="#">家具</a>/
    15.             <a href="#">家装</a>/
    16.             <a href="#">厨具</a>
    17.         </div>
    19.         <div class="item">
    20.             <a href="#">男装</a>/
    21.             <a href="#">女装</a>/
    22.             <a href="#">童装</a>/
    23.             <a href="#">内衣</a>
    24.         </div>
    26.         <div class="item">
    27.             <a href="#">美妆</a>/
    28.             <a href="#">个护清洁</a>/
    29.             <a href="#">宠物</a>
    30.         </div>
    32.         <div class="item">
    33.             <a href="#">女鞋</a>/
    34.             <a href="#">箱包</a>/
    35.             <a href="#">钟表</a>/
    36.             <a href="#">珠宝</a>
    37.         </div>
    39.         <div class="item">
    40.             <a href="#">男鞋</a>/
    41.             <a href="#">运动</a>/
    42.             <a href="#">户外</a>
    43.         </div>
    45.         <div class="item">
    46.             <a href="#">房产</a>/
    47.             <a href="#">汽车</a>/
    48.             <a href="#">汽车用品</a>
    49.         </div>
    51.         <div class="item">
    52.             <a href="#">母婴</a>/
    53.             <a href="#">玩具乐器</a>
    54.         </div>
    56.         <div class="item">
    57.             <a href="#">食品</a>/
    58.             <a href="#">酒类</a>/
    59.             <a href="#">生鲜</a>/
    60.             <a href="#">特产</a>
    61.         </div>
    63.         <div class="item">
    64.             <a href="#">艺术</a>/
    65.             <a href="#">礼品鲜花</a>/
    66.             <a href="#">农资绿植</a>
    67.         </div>
    69.         <div class="item">
    70.             <a href="#">医药保健</a>/
    71.             <a href="#">计生情趣</a>
    72.         </div>
    74.         <div class="item">
    75.             <a href="#">图书</a>/
    76.             <a href="#">文娱</a>/
    77.             <a href="#">教育</a>/
    78.             <a href="#">电子书</a>
    79.         </div>
    81.         <div class="item">
    82.             <a href="#">机票</a>/
    83.             <a href="#">酒店</a>/
    84.             <a href="#">旅游</a>/
    85.             <a href="#">生活</a>
    86.         </div>
    88.         <div class="item">
    89.             <a href="#">理财</a>/
    90.             <a href="#">众筹</a>/
    91.             <a href="#">白条</a>/
    92.             <a href="#">保险</a>
    93.         </div>
    95.         <div class="item">
    96.             <a href="#">安装</a>/
    97.             <a href="#">维修</a>/
    98.             <a href="#">清洗</a>/
    99.             <a href="#">二手</a>
    100.         </div>
    102.         <div class="item">
    103.             <a href="#">工业品</a>
    104.         </div>
    106. </nav>

    css:
    body {
    background-color: #bfa;
    }

    .jdnav {
    width: 190px;
    height: 450px;
    padding: 10px 0;
    margin: 50px _auto    ;
    background-color: #fff;
    font-size: 12px;
    }

    .jd_nav .item {
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
    font-size: 14px;
    }

    .item:hover {
    background-color: #636363;
    }

    .item a {
    text-decoration: none;
    }

    .jd_nav .item a:hover {
    color: #74272C;
    }