用ul,li制作导航条

最新推荐文章于 2023-08-16 11:20:29 发布

epee

最新推荐文章于 2023-08-16 11:20:29 发布

阅读量957

点赞数

文章标签： CSS .net HTML

博客主要介绍了使用 HTML 和 CSS 创建导航条的方法。对于无序链接的导航内容，可用 HTML 的相关标签编辑，再通过 CSS 控制列表外观。分别给出了水平和垂直导航条的实现代码，还推荐了相关文章供进一步了解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航条该怎么做？
http://www.onestab.net/seybold/index.html

考虑你需要导航的内容是一些无序的链接这种情况：

用

标签来编辑它们。

link1
link2
link3
link4
link5
水平导航条
我们可以用 CSS 来控制这个列表显示在网页上的外观。

通过使用 display:inline 我们可以创建水平导航条。

link1
link2
link3
link4
link5
这是上面这个导航条用到的代码：

#nav1{
margin-top: 1em;
margin-bottom: 0.5em;
}

#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}

#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}

#nav1 li:first-child {
border: none;
}

垂直导航条
link1
link2
link3
link4
link5
这是垂直导航条的代码：

#nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}

#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}

#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li {
width: auto;
}

#nav2 li:first-child {
border: none
}

想了解更多？看看 Mark Newhouse 的文章吧，在 A List Apart 的 Taming lists，以及在 CSS-Discuss wiki 的 "Styling lists"。