2023-7-13

GUET415

已于 2023-07-13 19:23:29 修改

阅读量44

点赞数 1

分类专栏：实习日志文章标签： html css

于 2023-07-13 19:20:05 首次发布

本文链接：https://blog.csdn.net/m0_53286358/article/details/131702401

版权

实习日志专栏收录该内容

16 篇文章 0 订阅

订阅专栏

实现菜单管理栏（HTML）

创建`index01.html`

在这里插入图片描述

创建一级列表

使用无序列表

在这里插入图片描述

修改一级列表样式

<style>
         /* 清屏 */
         *{
            margin: 0;
            padding: 0;
        }

        .first > li{
            width: 190px;
            /* 边框 */
            border-style:solid solid none none;/*上右下左*/
            border-color: gray gray;
            border: 1px 1px 0 0;
            list-style: none;
            /* 字体 */
            font-size: 13px;
            font-weight: 500;
            /* 左移 */
            padding-left: 40px;
            /* 边框大小不变 */
            box-sizing: border-box;
        }
        /* 超链接 */
        .first > li > a{
            color: #666;
            display: block;
            line-height: 40px;
            /* 去下划线 */
            text-decoration: none;
        }
    </style>

在这里插入图片描述

加入图标

图标链接

在这里插入图片描述

下载后解压缩，把css、fonts文件复制到index01.html目录下

在这里插入图片描述

在index01.html进行引用
放在head中

<link rel="stylesheet" href="css/font-awesome.min.css">

添加图标

点击home，复制i元素

其中fa-lg用于调整图标大小
在这里插入图片描述

创建二级列表

在一级列表下的li中加入ul

<ul class="second">
                <li>
                    <a href="#">基本资料</a>
                </li>
                <li>
                    <a href="#">密码修改</a>
                </li>
                <li>
                    <a href="#">绑定手机</a>
                </li>
            </ul>

二级列表的style

.second{
            display: none;
        }
        .second > li{
            width: 145px;
            height: 37px;
            list-style: none;
        }
        .second > li > a{
            line-height: 40px;
            text-decoration: none;
            color: #666;
            padding-left: 25px;
        }

引入jquery，用于控制列表的点击

<!-- 从百度引入jquery -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function(){
            console.log("jquery");
            /*
            Jquery支持CSS元素选择器的写法找元素
            */
           $(".first > li").click(function(){
            //$(this)一级li,找second元素，toggle用来执行在交替的点击,300是执行时间。 
            $(this).find(".second").toggle(300);
            //隐藏同级列表
            $(this).siblings().find(".second").hide(300);
           })
        })
    </script>

效果

美化二级列表

style中加入

/* 竖线 */
        .second:before{
            content: "";
            display: block;
            position: absolute;
            z-index: 1;
            left: 45px;
            top: 40px;
            bottom: 0;
            border: 1px dotted;
            border-width: 0 0 0 1px;
        }
        /* 横线 */
        .second > li:before{
            content: "";
            width: 10px;
            display: block;
            position: relative;
            z-index: 1;
            left: 8px;
            top: 20px;
            bottom: 0;
            border: 1px dotted;
            border-width:1px 0 0;
        }