首页 > 代码库 > HTML/CSS 项目

HTML/CSS 项目

2024-11-05 19:26:39   212人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0px;     /*盒子外边距*/
                padding: 0px;    /*盒子内边距*/
            }
            .NavigatorView {
                width: 100%;
                height: 50px;
                background-color:cadetblue;
                
            }
            .NavigatorView div{
                height: 50px;
                width: 80%;
                margin-left: 17%;
                margin-right: 17%;
                
            }
            .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;
            }
            .NavigatorView div ul li a:hover{
                background-color: YellowGreen;
                height: 50px;
                width: 130px;
                text-align:center;
                display: block;
            }    
            
            .head {
                height: 120px;
                width: 100%;
                background-color: aliceblue;
                
            }        
        </style>
    </head>
    
    <body>
        <div class="head"></div>
            <div class="NavigatorView">
                <div>
                    <ul>
                        <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>
                        <li><a href="#">加入我们</a></li>
                    </ul>
                </div>
            </div>
    </body>
</html>

 

HTML/CSS 项目


联系
我们