舒适的导航栏

最新推荐文章于 2024-11-11 00:01:33 发布

沃效乐

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量399

点赞数 6

分类专栏： html+css+js笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_66381188/article/details/140435157

版权

html+css+js笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

演示

代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>导航栏</title>
        <style>
            .daohanglan {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #f2f2f2;
                padding: 10px;
                height: 50px;
            }
            .daohanglan ul li {
                display: inline-block;
            }
            .daohanglan ul li a {
                text-decoration: none;
                color: #666;
                font-weight: bold;
                padding: 5px;
                border-radius: 4px;
                transition: background-color 0.3s ease;
            }
            .daohanglan ul li a:hover {
                background-color: #666;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="daohanglan">
            <h1>标题</h1>
            <ul>
                <li>
                    <a href="">选项1</a>
                </li>
                <li>
                    <a href="">选项2</a>
                </li>
                <li>
                    <a href="">选项3</a>
                </li>
            </ul>
        </div>
    </body>
</html>