html5怎么做横向导航栏?要创建一个横向导航栏,你可以使用 HTML 和 CSS 来实现。以下是一个简单的示例,演示如何创建一个基本的横向导航栏:
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>` 元素内。
你可以根据自己的需求和设计进一步定制这个基本的横向导航栏,比如调整样式、添加子菜单等。希望这能帮助到你!