css 导航栏实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css 导航栏 实例 - 自学教程(runoops.com)</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            padding-top: 6px;
            padding-bottom: 6px;
        }

li {
            display: inline;
        }

a:link,
        a:visited {
            font-weight: bold;
            color: #FFFFFF;
            background-color: #98bf21;
            text-align: center;
            padding: 6px;
            text-decoration: none;
            text-transform: uppercase;
        }

a:hover,
        a:active {
            background-color: #7A991A;
        }
    </style>
</head>

<p><b>注意:</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。 </p>
</body>

</html>