纯HTML CSS制作导航栏 下拉菜单

纯HTML CSS制作导航栏 下拉菜单纯HTMLCSS制作导航栏下拉菜单

纯HTML

大一web网页设计,尝试更多炫酷页面内容,狠狠加分!!!!

话不多说,直接上代码

这是HTML部分:

<body>
    <div>
        <ul class="nav">
            <li style="border-radius: 20px 0px 0px 0px;">智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>               
                </ul>
            </li>
            <li>首页
                <ul>
                    <li></li>  
                </ul>
            </li>
            <li>智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li style="border-radius: 0px 0px 20px 0px;">智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

css样式设计:

<style>
        *{
            /* 去除页面边距 */
            padding: 0;
            margin: 0;
        }
        body{
            /* 设置页面背景颜色 */
            background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
            /* 弹性布局 */
            display: flex;
            /* 居中 */
            align-items: center;
            justify-content: center;
        }
        .nav{
            /* 整体框架大小位置 */
            width: 100%;
            height: 100%;
            position: relative;
            top: 300px;
        }
        .nav li{
            /* 导航栏大小 */
            width: 180px;
            height: 60px;
            /* 去浮动,使li横向布局 */
            float: left;
            /* 每个li之间间隙 */
            margin-right: 10px;
            /* 去点 */
            list-style: none;
            /* 背景颜色 */
            background-color: gray;
            /* 行高,使文本居中 */
            line-height: 60px;
            text-align: center;
            /* 阴影,使导航栏有层次感 */
            box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.3);
        }
        .nav li ul li{
            /* 去点 */
            list-style: none;
            /* 下拉菜单大小 */
            width: 170px;
            height: 60px;
            /* 去浮动,使li横向布局 */
            float: left;
            /* 背景颜色 */
            background-color: chocolate;
            /* 阴影,使导航栏有层次感 */
            border: 5px rgba(0, 0, 0, 0.1) solid;
            /* margin-top: 5px; 此代码可使下拉菜单有间隔,更美观,但无法实现hover效果*/
        }
        .nav li:hover{
            /* 鼠标 */
            cursor: pointer;
            /* 背景颜色 */
            background-color: #50536e;
            /* 阴影,使导航栏有层次感 */
            box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.6);
            /* 执行时间 */
            transition: .3s;
        }
            /* 隐藏 */
        .nav li ul li{
            display: none;
        }
            /* 显示 */
        .nav li:hover ul li{
            display: block;
            transition: 0.3s;
            cursor: pointer;
        }
        .nav li ul li:hover{
            cursor: pointer;
            background-color: sandybrown;
        }
    </style>

完整代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧脑瓜--下拉菜单</title>
    <style>
        *{
            /* 去除页面边距 */
            padding: 0;
            margin: 0;
        }
        body{
            /* 设置页面背景颜色 */
            background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
            /* 弹性布局 */
            display: flex;
            /* 居中 */
            align-items: center;
            justify-content: center;
        }
        .nav{
            /* 整体框架大小位置 */
            width: 100%;
            height: 100%;
            position: relative;
            top: 300px;
        }
        .nav li{
            /* 导航栏大小 */
            width: 180px;
            height: 60px;
            /* 去浮动,使li横向布局 */
            float: left;
            /* 每个li之间间隙 */
            margin-right: 10px;
            /* 去点 */
            list-style: none;
            /* 背景颜色 */
            background-color: gray;
            /* 行高,使文本居中 */
            line-height: 60px;
            text-align: center;
            /* 阴影,使导航栏有层次感 */
            box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.3);
        }
        .nav li ul li{
            /* 去点 */
            list-style: none;
            /* 下拉菜单大小 */
            width: 170px;
            height: 60px;
            /* 去浮动,使li横向布局 */
            float: left;
            /* 背景颜色 */
            background-color: chocolate;
            /* 阴影,使导航栏有层次感 */
            border: 5px rgba(0, 0, 0, 0.1) solid;
            /* margin-top: 5px; 此代码可使下拉菜单有间隔,更美观,但无法实现hover效果*/
        }
        .nav li:hover{
            /* 鼠标 */
            cursor: pointer;
            /* 背景颜色 */
            background-color: #50536e;
            /* 阴影,使导航栏有层次感 */
            box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.6);
            /* 执行时间 */
            transition: .3s;
        }
            /* 隐藏 */
        .nav li ul li{
            display: none;
        }
            /* 显示 */
        .nav li:hover ul li{
            display: block;
            transition: 0.3s;
            cursor: pointer;
        }
        .nav li ul li:hover{
            cursor: pointer;
            background-color: sandybrown;
        }
    </style>
</head>
<body>
    <div>
        <ul class="nav">
            <li style="border-radius: 20px 0px 0px 0px;">智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>               
                </ul>
            </li>
            <li>首页
                <ul>
                    <li></li>  
                </ul>
            </li>
            <li>智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li style="border-radius: 0px 0px 20px 0px;">智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

新人制作不易,求赞求收藏

今天的文章纯HTML CSS制作导航栏 下拉菜单分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/30954.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注