正文

新手必看！HTML5制作实用导航栏源码大集合

/0 浏览量
0512

在构建网页时，导航栏是一个不可或缺的元素，它帮助用户快速找到他们需要的信息。HTML5的出现为网页设计带来了更多的可能性，今天，我将为大家分享一些实用的HTML5制作导航栏的源码集合，帮助你快速打造美观、实用的导航栏。

1. 基础水平导航栏

这是一个非常基础的HTML5导航栏，适用于大多数网站。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>水平导航栏</title>
<style>
  .nav {
    overflow: hidden;
    background-color: #333;
  }

  .nav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .nav a:hover {
    background-color: #ddd;
    color: black;
  }
</style>
</head>
<body>

<div class="nav">
  <a href="#home">首页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系</a>
  <a href="#about">关于</a>
</div>

</body>
</html>

2. 滚动式导航栏

这种导航栏会在页面滚动时固定在顶部，方便用户随时访问。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>滚动式导航栏</title>
<style>
  .navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
  }

  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">首页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系</a>
  <a href="#about">关于</a>
</div>

<div style="padding:60px 0;">
  <h1>页面内容</h1>
  <p>这是一个示例页面。</p>
</div>

</body>
</html>

3. 响应式导航栏

随着移动设备的普及，响应式导航栏变得越来越重要。以下是一个简单的响应式导航栏示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>响应式导航栏</title>
<style>
  .navbar {
    overflow: hidden;
    background-color: #333;
  }

  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }

  @media screen and (max-width: 600px) {
    .navbar a {
      float: none;
      display: block;
      text-align: left;
    }
  }
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">首页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系</a>
  <a href="#about">关于</a>
</div>

<div style="padding:60px 0;">
  <h1>页面内容</h1>
  <p>这是一个示例页面。</p>
</div>

</body>
</html>

4. 图标导航栏

图标导航栏可以增加页面的美观度，以下是一个使用图标的导航栏示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图标导航栏</title>
<style>
  .navbar {
    overflow: hidden;
    background-color: #333;
  }

  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }

  .icon {
    display: none;
  }

  @media screen and (max-width: 600px) {
    .icon {
      float: right;
      display: block;
    }

    .navbar a {
      float: none;
      display: block;
      text-align: left;
    }
  }
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">首页</a>
  <a href="#news">新闻 <img src="icon-news.png" alt="新闻" class="icon"></a>
  <a href="#contact">联系 <img src="icon-contact.png" alt="联系" class="icon"></a>
  <a href="#about">关于 <img src="icon-about.png" alt="关于" class="icon"></a>
</div>

<div style="padding:60px 0;">
  <h1>页面内容</h1>
  <p>这是一个示例页面。</p>
</div>

</body>
</html>

总结

以上是一些HTML5制作实用导航栏的源码示例，希望对你有所帮助。在实际应用中，你可以根据自己的需求进行修改和优化。同时，学习更多关于HTML5和CSS的知识，将有助于你更好地设计网页。祝你在网页设计中取得更好的成绩！

-- 展开阅读全文 --