首页 > 文章 > web前端 > 详解Css常用操作导航栏方法

详解Css常用操作导航栏方法

高洛峰原创: 2017-03-26 11:07:051624浏览

这篇文章主要为大家详解Css常用操作导航栏方法的布局类，感兴趣的小伙伴们可以参考一下

一、垂直导航栏

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
 
a:link,a:visited{
    text-decoration: none;
    display: block;
    background-color: aqua;
    color: black;
    width: 50px;
    text-align: center;
}
 
a:active,a:hover{
    background-color: crimson;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
 
    <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
    </ul>
 
</body>
</html>

二、水平导航栏

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: aqua;
    width: 250px;
    text-align: center;
}
 
a:link,a:visited{
    font-weight: bold;
    text-decoration: none;
    background-color: aqua;
    color: black;
    width: 50px;
    text-align: center;
}
 
a:active,a:hover{
    background-color: crimson;
}
 
li{
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
}

以上是详解Css常用操作导航栏方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：详解Css常用操作图片方法下一篇：详解Css常用操作分类方法

查看更多