怎样使用css布局导航栏

怎样使用css布局导航栏

使用css布局横向导航栏,css应用给网页样式的方式,就相当于给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式。

1、首先创建一个ul标签,并添加若干li标签,在li标签内写上a标签进行页面链接;

2、然后设置ul的list-style为none将项目列表前原点去除;

3、最后设置li标签float为left排列在一行显示即可。

<!DOCTYPE html>
<html>
    <head>
        <title>如何使用css布局横向导航栏</title>
        <style type="text/css">
            body {
                margin:0px;padding:0px;
            }
            ul {
                list-style:none;/*去除项列表前面的圆点*/
            }
            ul li {
                float:left;/**使列表项不再遵循默认的自上而下样式,使之变成横向列表*/
                }
            /**这时候的列表虽然是横着的,却是一个整的像一块大饼,
            所以我们要想到块状思想。使用display:block,将其分割*/
                ul li a {
                    display: block; /*切割完毕,变成块状,
                    这下我们就可以实现内外边距,边框背景等属性*/
                    width: 120px; /*宽度设置*/
                    padding-top: 10px; /*上内边距,通俗点讲就是导航栏离顶部的距离*/
                    padding-left: 10px; /*同上*/
                    padding-right: 10px; /*同上*/
                    text-align: center; /*文本居中显示*/
                    font-size: 20px; /*设置字体的大小*/
                    color: red; /*设置字体的颜色*/
                    text-decoration: none; /*下划线设置*/
                }
                /*锚伪类还有link visited hover active分别为未访问,已访问,
                鼠标移动链接上,选定的连接,这里我只写了移动到连接的例子*/
        ul li a:hover{
        color:blue;              /*伪类:指向链接时的字体颜色*/
        background-color:#8DC7DD;    /*伪类:指向链接时的背景色*/
        text-decoration:underline;   /*伪类:指向链接时的字体装饰*/
        font-weight:bold;           /*伪类:指向连接时的字体粗细*/
        }
          
        </style>
    </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>
                <li><a href="#">优化</a></li>
            </ul>
        </div>
    </body>
</html>

效果:

推荐学习:CSS视频教程(公益免费)

以上就是怎样使用css布局导航栏的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读