使用html和css实现网站导航栏 -

首页 > 博客列表 > 使用html和css实现网站导航栏

博主信息

博文 12

粉丝 0

访问量 13188

专题推荐

更多>

一、效果图

二、思路

通过display:inline-block来将ul中原本li纵向排列的item，调整为模向排列。
设置导航栏container的宽高及背景色，注意对齐方式及内边距的问题。
通过设置li中的padding，来调整文字在导航栏中的位置及间隔。
通过设置border-right-style: solid;来展示分隔符的效果。
设置li:hover的颜色值并取消a标签中的下划线效果。

三、源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
        .container {
            width: 100%;
            height: 40px;
            background-color: red;
/*            border: 1px solid blue;*/
            padding: 10px 0;
            text-align: left;
        }
        .nav{
            padding: 0;
            margin: 0;
        }
        .nav li{
            /*background-color: purple;*/
            display: inline-block;
            padding: 8px 60px;
            color: #FFFFFF;
            font-size: 20px;
            border: 1px none #FFFFFF;
            border-right-style: solid;
        }
        li:hover{
            color: #1d7fb3;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="nav">
            <li>首页</li>
            <li><a>前沿</a></li>
            <li><a>前端</a></li>
            <li><a>后端</a></li>
            <li><a>云计算</a></li>
            <li><a>产品设计</a></li>
            <li><a>联系我们</a></li>
        </ul>
    </div>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1.markdown语法及部分html标签

2022-04-27 14:48:01