京东左侧导航条练习笔记

最新推荐文章于 2023-07-04 19:29:13 发布

慈祥的姑奶奶

最新推荐文章于 2023-07-04 19:29:13 发布

阅读量163

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Bai_mengxia/article/details/123328081

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东左侧导航条</title>
    <style>
        /* 1.设置背景颜色 */
        body{
            background-color: rgb(204, 241, 229);
        }

        /* 2.设置nav */
        .left-nav{
            /* 2.1设置宽高 */
            width: 190px;
            height: 450px;

            /* 2.2设置背景颜色 */
            background-color: #fff;

            /* 2.3设置padding */
            padding: 10px 0;

            /* 2.4设置margin */
            margin: 50px auto;
        }

        /* 3.设置菜单内部item */
        .item{
            height: 25px;

            /* line-height表示让元素在其父元素中居中显示 */
            line-height: 25px;

            /* 设置右内边距 */
            padding-left: 10px;
        }

        /* 4.为item设置一个鼠标移入效果(a元素的伪类细讲) */
        .item:hover{
            background-color: #d9d9d9;
        }

        /* 5.设置超链接的样式 */
        .item a{
            /* 5.1设置文字大小 */
            font-size: 14px;

            /* 5.2设置文字颜色 */
            color: #333;

            /* 5.3去除下划线 */
            text-decoration: none;
        }

        /* 6.为a设置一个鼠标移入效果 */
        .item a:hover{
            color: #c81623;
        }

        /* 7.设置 / 大小 */
        .bean{
            font-size: 12px;
        }
    </style>

</head>
<body>
     <!-- 创建一个外部容器 导航nav(div) div(div) ul(li) -->
    <nav class="left-nav">
        <div class="item">
            <!-- item 项目 -->
            <a href="#">家用电器</a>
            <!-- # 表