使用 CSS 设置导航栏边框

使用 CSS 在导航栏周围设置边框是一项简单的任务，可以使用 CSS 属性轻松实现。在本文中，我们将学习和理解三种不同的方法来使用 CSS 设置导航栏周围的边框。

我们的 HTML 文档中有一个包含四个链接的导航栏，我们的任务是使用 CSS 设置导航栏周围的边框。

设置导航栏边框的方法

以下是本文将讨论的使用 CSS 设置导航栏周围边框的方法列表，其中包括分步说明和完整的示例代码。

使用 border 属性设置边框

为了使用 CSS 设置导航栏周围的边框，我们将使用 CSS border 属性，这是一个 border-width、border-style 和 border-color 的简写属性，它可以为任何元素设置边框。

  • 为了创建导航栏，我们使用了带有类 navbar 的 div 容器来组合使用 anchor 标签创建的所有链接。
  • 为了设计导航栏，我们使用了 navbar 类，它设置了导航栏的 宽度、内边距 和 文本对齐方式。
  • 然后，我们使用 a 元素 选择器 为所有链接应用样式，我们设置了它的 字体系列、字体大小，应用了 内边距，使用 text-decoration 去除了链接的下划线，设置了文本 颜色 和 外边距。
  • 我们使用了 :hover 伪类来更改鼠标悬停在链接上时的 背景颜色 和文本颜色。
  • 最后，我们使用了 "border: 2px solid #031926;" 和 border 类，它在导航栏周围设置了一个 2px 的实线边框。

示例

这是一个完整的示例代码，实现了上述步骤，使用 CSS border 属性设置导航栏周围的边框。

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Setting a border around navbar with CSS
    </title>
    <style>
        .navbar {
            width: 100%;            
            padding: 10px;
            text-align: center;
        }
        a {
            font-family: Verdana, sans-serif;
            margin: 0 15px;
            color: #031926;
            text-decoration: none;
            font-size: 15px;
            padding: 10px;
        }
        a:hover {
            background-color: #031926;
            color: white;
        }
        .border {
            border: 2px solid #031926;
        }
    </style>
</head>
<body>
    <div class="navbar border">
        <a href="/index.htm" 
           target="_blank">Home</a>
        <a href="/market/login.jsp" 
           target="_blank"> Login</a>
        <a href="/market/index.asp" 
           target="_blank"> Courses</a>
        <a href="/about/contact_us.htm" 
           target="_blank"> Contact Us</a>
    </div>
    <h3>
        Setting a Border Around Navbar with CSS
    </h3>
    <p>
        In this example we have used <strong>border
        </strong> property to set a border around 
        navbar with CSS.
    </p>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

使用 outline 属性设置边框

在本文中，为了使用 CSS 设置导航栏周围的边框，我们将使用 CSS outline 属性，该属性绘制在任何元素边框的外部。

  • 为了创建和设计导航栏，我们使用了与第一种方法类似的方法。
  • 然后，我们使用了 "outline: 2px solid #031926;" 和 outline 类，它在导航栏周围设置了一个 2px 的实线边框。

示例

这是一个完整的示例代码，实现了上述步骤，使用 CSS outline 属性设置导航栏周围的边框。

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Setting a border around navbar with CSS
    </title>
    <style>
        .navbar {
            width: 100%;            
            padding: 10px;
            text-align: center;
        }
        a {
            font-family: Verdana, sans-serif;
            margin: 0 15px;
            color: #031926;
            text-decoration: none;
            font-size: 15px;
            padding: 10px;
        }
        a:hover {
            background-color: #031926;
            color: white;
        }
        .outline {
            outline: 2px solid #031926;
        }
    </style>
</head>
<body>
    <div class="navbar outline">
        <a href="/index.htm" 
           target="_blank">Home</a>
        <a href="/market/login.jsp" 
           target="_blank"> Login</a>
        <a href="/market/index.asp" 
           target="_blank"> Courses</a>
        <a href="/about/contact_us.htm" 
           target="_blank"> Contact Us</a>
    </div>
    <h3>
        Setting a Border Around Navbar with CSS
    </h3>
    <p>
        In this example we have used <strong>outline
        </strong> property to set a border around 
        navbar with CSS.
    </p>
</body>
</html>

使用 box-shadow 属性设置边框

在本文中，我们将使用 CSS box-shadow 属性使用 CSS 设置导航栏周围的边框，它会在任何元素周围添加阴影效果。在这里，我们将使用 box-shadow 属性在导航栏周围添加边框。

  • 为了创建和设计导航栏，我们使用了与第一种方法类似的方法。
  • 然后，我们使用了 "box-shadow: 0 0 0 2px #031926;" 和 outline 类，其中前三个 0 代表水平偏移量、垂直偏移量和模糊半径，2px 设置导航栏周围的边框，代表扩展半径。

示例

这是一个完整的示例代码，实现了上述步骤，使用 CSS box-shadow 属性设置导航栏周围的边框。

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Setting a border around navbar with CSS
    </title>
    <style>
        .navbar {
            width: 100%;            
            padding: 10px;
            text-align: center;
        }
        a {
            font-family: Verdana, sans-serif;
            margin: 0 15px;
            color: #031926;
            text-decoration: none;
            font-size: 15px;
            padding: 10px;
        }
        a:hover {
            background-color: #031926;
            color: white;
        }
        .shadow {
            box-shadow: 0 0 0 2px #031926;
        }
    </style>
</head>
<body>
    <div class="navbar shadow">
        <a href="/index.htm" 
           target="_blank">Home</a>
        <a href="/market/login.jsp" 
           target="_blank"> Login</a>
        <a href="/market/index.asp" 
           target="_blank"> Courses</a>
        <a href="/about/contact_us.htm" 
           target="_blank"> Contact Us</a>
    </div>
    <h3>
        Setting a Border Around Navbar with CSS
    </h3>
    <p>
        In this example we have used <strong>box-
        shadow</strong> property to set a border around 
        navbar with CSS.
    </p>
</body>
</html>

结论

在本文中，我们了解了如何使用 CSS 设置导航栏周围的边框。我们讨论了三种不同的方法：使用 CSS border() 属性、outline 属性和 box-shadow 属性。用户可以使用任何方法使用 CSS 设置导航栏周围的边框。

更新于：2024年9月12日

8K+ 浏览量

开启您的 职业生涯

完成课程获得认证

开始学习
广告