菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻

CSS导航栏

原创
05/13 14:22 更新

垂直导航栏的全样式

<!DOCTYPE html>
<html>
<head>
<style>
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    a:link,a:visited
    {
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }
</style>
</head>

<body>
    <ul>
        <li>
            <a href="#home">主页</a>
        </li>
        <li>
            <a href="#news">新闻</a>
        </li>
        <li>
            <a href="#contact">联系</a>
        </li>
        <li>
            <a href="#about">关于</a>
        </li>
    </ul>
</body>
</html>

水平导航栏的全样式

<!DOCTYPE html>
<html>
<head>
<style>
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }

</style>
</head>

<body>
    <ul>
        <li>
            <a href="#home">主页</a>
        </li>
        <li>
            <a href="#news">新闻</a>
        </li>
        <li>
            <a href="#contact">联系</a>
        </li>
        <li>
            <a href="#about">关于</a>
        </li>
    </ul>
</body>
</html>
综合评分:9.9 评分 请对本文进行纠错,及学习过程中有困难疑惑可在此进行讨论