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

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

这篇文章主要为大家详解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="//m.sbmmt.com/m/faq/#">导航1</a></li>
        <li><a href="//m.sbmmt.com/m/faq/#">导航2</a></li>
        <li><a href="//m.sbmmt.com/m/faq/#">导航3</a></li>
        <li><a href="//m.sbmmt.com/m/faq/#">导航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中文网其它相关文章！

Css PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

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

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