html+css简易导航条

Lying01-

于 2017-05-10 17:18:31 发布

阅读量894

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html5 css 文章标签： css html

本文链接：https://blog.youkuaiyun.com/qq_32814941/article/details/71552666

css 同时被 2 个专栏收录

11 篇文章

订阅专栏

html5

5 篇文章

订阅专栏

本文介绍了一种使用CSS实现水平导航栏的方法。通过设置特定的样式属性如display、text-align等来达到美观且响应式的布局效果。同时，还介绍了如何为导航栏添加交互效果，例如当鼠标悬停在链接上时改变背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

<style>
    .nav {
        font-size: 0px;
        /*设置两个块之间没有间距*/
        margin: 0 auto;
        text-align: center;
        /*设置居中*/
    }

    .nav ul {
        list-style: none;
        /*取消样式*/
        margin: 0 auto;
        padding: 0;
    }

    .nav li {
        display: inline-table;
        /*设置内联水平*/
        background-color: #FFF0F5;
        text-align: center;
    }

    .nav a {
        text-decoration: none;
        font-size: 15px;
        width:120px;
        display: inline-block;
        color:#996699;
        font-weight: bolder;
        padding: 5px;
        /*设置下面两行代码添加透明底部边框*/
        border-bottom: solid;
        border-color: transparent;
    }

    /*设置鼠标经过时链接外观变化*/
    .nav a:hover,a:active {
        background-color:#FFB6C1;
        width: 120px;
        /*如果没有透明底部边框，设置鼠标经过显示底部边框时，导航栏下面的页面会偏移*/
        border-bottom:solid 2px;
    }
</style>

html

<div class="nav">
    <ul>
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">公告</a>
        </li>
        <li>
            <a href="#">新闻</a>
        </li>
        <li>
            <a href="#">资源</a>
        </li>
        <li>
            <a href="#">关于</a>
        </li>
    </ul>
</div>