一个Web二级菜单的实现(俺新手随便写的)

acc8226

发布于 2022-05-17 18:07:08

1.4K0

发布于 2022-05-17 18:07:08

文章被收录于专栏：叽叽西

任务描述一、整体要求：

1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字、背景的颜色不统一要求 2、要求HTML代码和CSS代码书写、命名符合规范

二、具体要求 1、鼠标移入一级菜单时，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏（1）元素显示使用display:block属性，隐藏使用display:none属性

2、二级菜单显示在一级菜单的右侧（1）给一级菜单和二级菜单共同的父元素设置相对定位（position: relative）（2）给二级菜单设置绝对定位（position: absolute），并设置左侧位移（left）的值为一级菜单的宽度，上放位移（top）的值为0 3、一级菜单的文字和二级菜单的文字水平居中显示 4、一级菜单的文字和二级菜单的文字垂直居中显示 5、一级菜单的每一项和二级菜单的每一项有下边框，边框为点线（dotted） 6、一级菜单的最后一项和二级菜单的最后一项没有下边框（可以使用li:last-child选中最后一项，并设置border:none） 7、每一个菜单项的宽度和高度不做统一要求

思路分析:

评分标准是什么？规范 1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字、背景的颜色不统一要求 2、要求HTML代码和CSS代码书写、命名符合规范

整体 1、鼠标移入一级菜单时，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏 2、二级菜单显示在一级菜单的右侧

一级菜单 1、一级菜单的文字水平居中显示 2、一级菜单的文字垂直居中显示 3、一级菜单的每一项有下边框，边框为点线（dotted） 4、一级菜单的最后一项没有下边框

二级菜单 1、二级菜单的文字水平居中显示 2、二级菜单的文字垂直居中显示 3、二级菜单的每一项有下边框，边框为点线（dotted） 4、二级菜单的最后一项没有下边框

效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .list {
            position: relative;
        }

        ul {
            width: 200px;
            height: 29px;
            list-style: none;    /* 去掉无序列表的项目符号 */
        }

        ul>li {
            border-bottom: 1px dotted white;
            /* 处理文本内容溢出后的情况 */
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: black;
            width: 200px;
            height: 28px;
            text-align:center /*为了使里面的文字居中*/ 
        }

        ul>li#last {
            border-bottom: 0px;
        }

        .list>ul>li>a {
            display:inline-block; /*设置为内联元素*/
            line-height: 28px; /*设置行高为父布局的高度, 为了垂直居中*/ 
            width: 100%;
            color: white;
            text-decoration: none;             /* 去掉链接元素文本内容的下划线 */
            white-space: nowrap;             /* 强制文本内容在一行显示 */
        }

        .list>ul>li:hover>ol {
            display: block;
        }

        ul>li>ol {
            display: none;
            position: absolute;
            left: 200px;
            top:0px;
            list-style: none;    /* 去掉无序列表的项目符号 */
        }

        ul>li>ol>li {
            border-bottom: 1px dotted white;
            /* 处理文本内容溢出后的情况 */
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: #727272;
            width: 200px;
            height: 28px;
            line-height: 28px;
            text-align:center; /*为了使里面的文字居中*/
            top: 0px;
            color: white;
        }
        ul>li>ol>li:last-child {
            border-bottom: 0px;
        }
    </style>
</head>

<body>
    <div class="list">
        <ul>
            <li>
                <a href="#">前端开发</a>
                <ol>
                    <li>HTML/CSS</li>
                    <li>JavaScript</li>
                    <li>Vue.js</li>
                    <li>ReactJS</li>
                    <li>小程序</li>
                    <li>Node.js</li>
                </ol>
            </li>
        </ul>
    </div>
    <div class="list">
        <ul>
            <li>
                <a href="#">后端开发</a>
                <ol>
                    <li>Java</li>
                    <li>sprint boot</li>
                    <li>spring cloud</li>
                    <li>python</li>
                    <li>爬虫</li>
                    <li>PHP</li>
                </ol>
            </li>
        </ul>
    </div>
    <div class="list">
        <ul>
            <li>
                <a href="#">移动开发</a>
                <ol>
                    <li>android</li>
                    <li>iOS</li>
                    <li>reative native</li>
                    <li>weex</li>
                </ol>
            </li>
        </ul>
    </div>
    <div class="list">
        <ul>
            <li>
                <a href="#">算法/数学</a>
                <ol>
                    <li>算法与数据结构</li>
                    <li>数学</li>
                    <li>算法</li>
                </ol>
            </li>
        </ul>
    </div>
    <div class="list">
        <ul>
            <li>
                <a href="#">前沿技术</a>
                <ol>
                    <li>微服务</li>
                    <li>区块链</li>
                    <li>以太坊</li>
                    <li>人工智能</li>
                    <li>机器学习</li>
                    <li>深度学习</li>
                    <li>计算机视觉</li>
                    <li>自然语言处理</li>
                    <li>数据处理/数据挖掘</li>
                </ol>
            </li>
        </ul>
    </div>
    <div class="list">
        <ul>
            <li id="last">
                <a href="#">运维测试</a>
                <ol>
                    <li>运维</li>
                    <li>自动化运维</li>
                    <li>算法</li>
                    <li>中间件</li>
                    <li>linux</li>
                </ol>
            </li>
        </ul>
    </div>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-17，如有侵权请联系 cloudcommunity@tencent.com 删除

css