详解一级导航的制作

今天分享一下简单导航栏的制作方法：

第一步：引入css样式表，新建一个id为nav的层，使用ul> 、li> 、a> 标签来制作完成效果。

!DOCTYPE htML>
    html>
        head>
            meta charset="UTF-8">
            tITle>
    /title>
            link rel="stylesheet" type="text/css" href="css/yiji.css"/>
        /head>
        body>
            div id="nav">
                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>
                /ul>
            /div>
        /body>
    /html>
    

第二步设置CSS样式：

1.设置nav的属性

#nav{
        width: 500px;
        height: 50px;
        border: 1px solid red;
}
    

展示效果如下所示：

2.清除ul> 标签前面自带的点

#nav ul{
        list-style: none;
}
    

3.设置ul> 下包含的a> 标签的属性

#nav ul li a{
        width: 98px;
        height: 50px;
        float: left;
        border: 1px solid red;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
}
    

4.设置鼠标滑过效果

#nav ul li a:hover{
        background-color: #abcDEF;
}
    

最终效果：

完整HTML代码部分：

!DOCTYPE html>
    html>
        head>
            meta charset="UTF-8">
            title>
    /title>
            link rel="stylesheet" type="text/css" href="css/yiji.css"/>
        /head>
        body>
            div id="nav">
                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>
                /ul>
            /div>
        /body>
    /html>
    

完成CSS样式代码部分：

*{
        margin: 0;
        padding: 0;
}
#nav{
        width: 500px;
        height: 50px;
        border: 1px solid red;
        margin: 30px;
}
#nav ul{
        list-style: none;
}
#nav ul li a{
        width: 98px;
        height: 50px;
        float: left;
        border: 1px solid red;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
}
#nav ul li a:hover{
        background-color: #ABCDEF;
}
    

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！