自定义导航条样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <style>
        /*去除自带效果*/
        body,nav>ul{
            margin: 0;
            padding: 0;
        }
        body{
            background: #e1dada;
        }
        nav>ul{
            background: white;
        }
        /*定义伸缩盒子*/
        .flex{
            display: flex;
            /*宽度铺满*/
            width: 100%;
            /*最低宽度*/
            min-width: 1024px ;
            height: 70px;
            /*使li分散对齐*/
            Justify-content:space-around;
            /*超出部分隐藏*/
            /*overflow:hidden;*/
        }
        /*去除li前的小点*/
        nav>ul>li{
            list-style-type: none;
            line-height: 70px;
        }
        a{
            /*去除a标签下的样式*/
            text-decoration: none;
            /*设置文字的颜色*/
            color: grey;
        }
        /*设置logo*/
        .logo img{
            height: 70px;
            width: 120px;
        }
        /*一级菜单鼠标悬停效果*/
        nav>ul>li>a:hover{
            color: red;
            background-color: white;
        }
        .erjiul{
            background-color: white;
            width: 200px;
            padding-left: 0;
            /*隐藏二级菜单*/
            display: none;
        }
        .erjiul>li{
            list-style-type: none;
        }
        .erjiul>li>a{
            text-align: left;
            padding-left: 5px;
        }
        /*二级菜单的悬停效果*/
        .erjiul>li>a:hover{
            color: red;
        }
        nav>ul>li:hover>ul{
            /*显示二级菜单*/
            display: block;
        }
        /*输入框的样式*/
        nav>ul>li>form>input{
            border: 1px #e1dada solid;border-radius: 5px;height: 30px;
        }
    </style>
</head>
<body>
<nav>
    <ul class="flex">
        <li class="logo"><span><a href="" ><img src="https://www.php.cn/static/images/PHPlogo.png" alt=""> </a></span></li>
        <li>
            <a href=""> 下载站首页 v </a>
            <ul class="erjiul">
                <li><a href="">PHP开发编辑器</a></li>
                <li><a href="">JAVA开发编辑器</a></li>
                <li><a href="">PYTHON开发编辑器</a></li>
            </ul>
        </li>
        <li>
            <a href=""> JS特效 v </a>
            <ul class="erjiul">
                <li><a href="">聚焦幻灯</a></li>
                <li><a href="">图片特效</a></li>
            </ul>
        </li>
        <li><a href=""> 网站源码 v </a></li>
        <li><a href=""> 工具下载 v </a></li>
        <li><a href=""> 手册下载 v </a></li>
        <li>
            <form action="">
                <input  type="search" placeholder="搜索" onchange="alert(this.value)" name="" id="">
            </form>
        </li>
    </ul>
</nav>
</body>
</html>
更多相关文章

随机推荐
