CSS导航栏

最新推荐文章于 2024-03-19 17:43:02 发布

Aoaoaobbh

最新推荐文章于 2024-03-19 17:43:02 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_60835328/article/details/125073198

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

css导航栏

易用的导航对于任何网站都很重要。

通过使用 CSS，可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏就相当于链接列表，因此使用<ul> 和 <li> 就会很有意义

垂直导航栏

如果想要实现如图所示的导航栏：

要求：当鼠标经过每个小li 的时候都要将其变为如图所示：

当鼠标经过时每个小li变化颜色，并且字体颜色发生改变，但是当经过第一个小li的时候背景颜色并不改变

代码如下

因为导航栏就相当于链接列表，所以首先要在body标签里面先来个列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px 100px;
        }
        li {
            /* 将每个li前面的小点去掉 */
            list-style: none;
            background-color: #ccc;
            width: 200px;
        } 
        .active {
            /* 将第一个小li的样式单独设置 */
            background-color: #4CAF50;
            color: #fff;
        }
        li a {
            /* 将链接显示为块元素display: block;可以使整个链接区域都可以被单击(而不仅仅是文            本) */
            display: block;
            padding: 16px;
            color: #000;
            text-decoration: none;
        }
        /* 这是为了让每个li里面的类不为active的a标签设置样式 */
        li a:hover:not(.active) {
            color: #fff;
            background-color: #555;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="###" class="active">HTML</a></li>
        <li><a href="###">CSS</a></li>
        <li><a href="###">Javascript</a></li>
    </ul>
</body>
</html>

水平导航栏

如果想要实现如图所示的导航栏：

要求：当鼠标经过每个小li的时候都要改变背景颜色，但是第一个不改变颜色

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        ul {
            overflow: auto;
            /* overflow: hidden; */
            background-color: #333;
        }
        ul li {
            float: left;
        }
        ul li a {
            display: inline-block;
            padding: 16px;
            color: #fff;
            text-decoration: none;
        }
        ul li a:hover:not(.active) {
            background-color: #111;
        }
        .active {
            background-color: #4CAF50;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="###" class="active">Home</a></li>
        <li><a href="###">News</a></li>
        <li><a href="###">Contact</a></li>
        <li><a href="###">About</a></li>
    </ul>
</body>
</html>