首页 > 代码库 > 导航栏制作

导航栏制作

2024-11-15 00:53:39   202人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0px;     /*盒子外边距*/
                padding: 0px;    /*盒子内边距*/
            }
            .NavigatorView {
                width: 100%;
                height: 50px;
                background-color: WhiteSmoke;
                
            }
            .NavigatorView div{
                height: 50px;
                width: 80%;
                margin-left: 12%;
                margin-right: 12%;
                
            }
            .NavigatorView div ul {
                list-style-type: none;   /*去掉ul的无标号的 点， 即 无标记    */
            }
            .NavigatorView div ul li {
                float: left;            /* 左浮动 */
            }
            
            .NavigatorView div ul li a {
                display: block;        /* 块状显示，在元素后面换行，显示下一个块元素*/
                height: 50px;
                width: 130px;
                text-align:center;
                text-decoration: none;   /*去除链接下的横线*/
                line-height: 50px;        /*文本行高*/
                color:black;
            }
            .a1 {
                background-color: YellowGreen;
            }
            .NavigatorView div ul li a:hover{
                background-color: YellowGreen;
                height: 50px;
                width: 130px;
                text-align:center;
                display: block;
                text-decoration: none;   /*去除链接下的横线*/
                line-height: 50px;
                color: black;
            }    
            
            .head {
                height: 120px;
                width: 100%;
                background-color: aliceblue;
                
            }        
        </style>
    </head>
    <body>
        <div class="head"></div>
        <div class="NavigatorView">
            <div>
                <ul>
                    <li><a class="a1"  href="#">首页</a></li>
                    <li><a href="#">走进韵维</a></li>
                    <li><a href="#">新闻中心</a></li>
                    <li><a href="#">展示中心</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">加入我们</a></li>
                    
                </ul>
            </div>
            
        </div>
    </body>
</html>

 

导航栏制作


联系
我们