服务时间:8:30-18:00

首页 >web前端网

html5怎么做横向导航栏

发布时间:2023-11-13 17:42 字数:924字 阅读:88

html5怎么做横向导航栏?要创建一个横向导航栏,你可以使用 HTML 和 CSS 来实现。以下是一个简单的示例,演示如何创建一个基本的横向导航栏:

html5怎么做横向导航栏

HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://www.ux20.com/news/styles.css">
</head>
<body>

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

</body>
</html>
```

CSS 代码(保存为 http://www.ux20.com/news/styles.css):
```css
/* 清除默认样式 */
body, html {
    margin: 0;
    padding: 0;
}

/* 导航栏样式 */
.navbar {
  overflow: hidden;
  background-color: #333; /* 导航栏背景颜色 */
}

/* 导航链接样式 */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2; /* 文字颜色 */
  text-align: center;
  padding: 14px 20px; /* 上下内边距 左右内边距 */
  text-decoration: none; /* 去掉下划线 */
}

/* 悬停样式 */
.navbar a:hover {
  background-color: #ddd; /* 鼠标悬停时的背景颜色 */
  color: black; /* 鼠标悬停时的文字颜色 */
}
```

在上面的示例中,我们通过 CSS 设置了导航栏的样式,包括背景颜色、链接样式和悬停效果。同时,使用了简单的 HTML 结构来创建导航栏,每个链接都放在一个 `<a>` 标签中,并放置在一个拥有 `.navbar` 类的 `<div>` 元素内。

你可以根据自己的需求和设计进一步定制这个基本的横向导航栏,比如调整样式、添加子菜单等。希望这能帮助到你!