练习：京东商城左侧导航栏_1_计“京东商品导购”页面。页面效果如下图:要求:鼠标悬停改变边框样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_45336315/article/details/109558037

练习：京东商城左侧导航栏，运用了css的简单布局，以及当鼠标移到li标签时有一个背景效果，练习源文件下面有链接。

前言

该练习，可以采用nav(div)、div(div)、ul(li)等几种结构，看个人喜欢，我下面用的是ul(li)。

一、练习

1、效果图：

在这里插入图片描述

2、文件目录：

在这里插入图片描述

二、效果实现

1、源码：

1_index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body{
            background-color: #bbffaa;
        }
        .nav-left{
            width: 190px;
            height: 450px;            
            padding: 10px 0;
            font-family: "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", "\\5b8b体", sans-serif;
            margin: 50px auto;
            background-color: #ffffff;
        }
        /* 元素选择器不用“.”
           设置了padding-left时，尽量不要设置width，不然会造成背景溢出
         */
        li{                 
            height: 25px;
            padding-left: 18px;
            line-height: 25px;           
        }
        /* 给鼠标选中的li设置背景颜色 */
        li:hover{
            background-color:#d9d9d9;
            /* 伪类选择器":"左右不留空格，否则样式无效或者出现偏差 */
        }
        li a{
            color: #333333;
            font-size: 14px;
            text-decoration: none;  /* 下划线 */
        }
        li span{
            font-size: 12px;
            padding-left: 2px;

        }
        /* 
           -hover鼠标移过去时，元素的样式
           —visted访问后的属性样式 
        */
        li a:hover{
            color: #c81623;
        }      
    </style>
</head>
<body>
    <div class="nav-left">
        <!-- 网页中任何元素都用个标签将其套用 -->
        <ul>
            <li>
                <a href="javascript:;">家用电器</a>
            </li>
            <li>
                <a href="javascript:;">手机</a><span>/</span>
                <a href="javascript:;">运营商</a><span>/</span>
                <a href="javascript:;">数码</a>
            </li>
            <li>
                <a href="javascript:;">电脑</a><span>/</span>
                <a href="javascript:;">办公</a>
            </li>
            <li>
                <a href="javascript:;">家居</a><span>/</span>
                <a href="javascript:;">家具</a><span>/</span>
                <a href="javascript:;">家装</a><span>/</span>
                <a href="javascript:;">厨具</a >
            </li>
            <li>
                <a href="javascript:;">男装</a><span>/</span>
                <a href="javascript:;">女装</a><span>/</span>
                <a href="javascript:;">童装</a><span>/</span>
                <a href="javascript:;">内衣</a>
            </li>
            <li>
                <a href="javascript:;">美妆</a><span>/</span>
                <a href="javascript:;">个性清洁</a><span>/</span>
                <a href="javascript:;">宠物</a>
            </li>
            <li>
                <a href="javascript:;">女鞋</a><span>/</span>
                <a href="javascript:;">箱包</a><span>/</span>
                <a href="javascript:;">钟表</a><span>/</span>
                <a href="javascript:;">珠宝</a>
            </li>
            <li>
                <a href="javascript:;">男鞋</a><span>/</span>
                <a href="javascript:;">运动</a><span>/</span>
                <a href="javascript:;">户外</a>
            </li>
            <li>
                <a href="javascript:;">房产</a><span>/</span>
                <a href="javascript:;">汽车</a><span>/</span>
                <a href="javascript:;">汽车用品</a>
            </li>
            <li>
                <a href="javascript:;">母婴</a><span>/</span>
                <a href="javascript:;">玩具乐器</a>
            </li>
            <li>
                <a href="javascript:;">食品</a><span>/</span>
                <a href="javascript:;">酒类</a><span>/</span>
                <a href="javascript:;">生鲜</a><span>/</span>
                <a href="javascript:;">特产</a>
            </li>
            <li>
                <a href="javascript:;">艺术</a><span>/</span>
                <a href="javascript:;">礼品鲜花</a><span>/</span>
                <a href="javascript:;">农资绿植</a>
            </li>
            <li>
                <a href="javascript:;">医药保健</a><span>/</span>      
                <a href="javascript:;">计生情趣</a>
            </li>
            <li>
                <a href="javascript:;">图书</a><span>/</span>
                <a href="javascript:;">文娱</a><span>/</span>
                <a href="javascript:;">教育</a><span>/</span>
                <a href="javascript:;">电子书</a>
            </li>
            <li>
                <a href="javascript:;">机票</a><span>/</span>
                <a href="javascript:;">酒店</a><span>/</span>
                <a href="javascript:;">旅游</a><span>/</span>
                <a href="javascript:;">生活</a>
            </li>
            <li>
                <a href="javascript:;">理财</a><span>/</span>
                <a href="javascript:;">众筹</a><span>/</span>
                <a href="javascript:;">白条</a><span>/</span>
                <a href="javascript:;">保险</a>
            </li>
            <li>
                <a href="javascript:;">安装</a><span>/</span>
                <a href="javascript:;">维修</a><span>/</span>
                <a href="javascript:;">清洗</a><span>/</span>
                <a href="javascript:;">二手</a>
            </li>
            <li>
                <a href="javascript:;">工业品</a>
            </li>
        </ul>
    </div>
</body>
</html>

2、运行效果：

在这里插入图片描述

总结

上面就是京东左侧导航栏的简单实现，还要注意下面几点：
1、在设置li标签样式时，尽量不设置li的具体宽度，容易造成background-color溢出，因为li标签设置了padding值。
2、“/”用span标签将其包裹，方便设置样式，如果想要改变其符号大小，可另外设置字体大小。
3、使用伪类选择器时，注意没有空格，例“a:hover”。