1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 38

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

大家好，又见面了，我是你们的朋友全栈君。

大一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>

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/140190.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • android离线打包[通俗易懂]

    android离线打包[通俗易懂]

    android离线打包[通俗易懂]本文章参考官网和其他博客，如有侵权，立即删除官网地址：https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android需要的工具HBuilderX链接：https://www.dcloud.io/hbuilderx.htmlAndroidStudio链接：https://developer.android.google.cn/studio/index.htmlApp离线SDK链接：https://nativesupp…

    全栈程序员-站长的头像 全栈程序员-站长
    2025年6月16日
    2
  • ubuntu分区方案(合并分区)

    ubuntu分区方案(合并分区)

    MostPCoperatingsystemsstillworkwithanancientdiskpartitionschemethathistoricallymakesdistinctionbetweenprimaryandextendedpartitions.Italsoplacesalimitationforfourprimarypart

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月14日
    529
  • pycharm激活码一年[在线序列号] idea

    pycharm激活码一年[在线序列号]

    pycharm激活码一年[在线序列号]，https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧！

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月19日
    56
  • applicationContext.xml详解

    applicationContext.xml详解

    applicationContext.xml详解applicationContext.xml<beansxmlns=”http://www.springframework.org/schema/beans”xmlns:context=”http://www.springframework.org/schema/context”xmlns:aop=”http://www.springframework.org/schema/aop”xmlns:tx=”http://www.springframewo

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月13日
    22
  • Msfconsole_msfconsole渗透

    Msfconsole_msfconsole渗透

    Msfconsole_msfconsole渗透msfconsole理论msfconsole理论‍‍在MSF里面msfconsole可以说是最流行的一个接口程序。很多人一开始碰到msfconsole的时候就害怕了。那么多复杂的命令语句需要学习，但是msfconsole真的是一个强大的接口程序。Msfconsole提供了一个一体化的集中控制台。通过msfconsole，你可以访问和使用所有的metasploit的插件，payloa

    全栈程序员-站长的头像 全栈程序员-站长
    2025年9月30日
    2
  • java向上取整小例子

    java向上取整小例子

    java向上取整小例子inttimes=(int)Math.ceil((double)1023/(double)100);如果不double强转的话就是int类型计算结果就是直接取整100如果加double强转就是double类型计算对结果向上取整便是101Math.floor向下取整Math.round四舍五入Math.ceil向上取整

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月21日
    26

发表回复

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

关注全栈程序员社区公众号