当前位置：Gxlcms > css > 详解Css常用操作导航栏方法

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

时间：2021-07-01 10:21:17 帮助过：10人阅读

这篇文章主要为大家详解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常用操作导航栏方法的详细内容，更多请关注Gxl网其它相关文章！

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

人气教程排行