垂直导航条

最新推荐文章于 2023-05-02 21:30:00 发布

joannazhu

最新推荐文章于 2023-05-02 21:30:00 发布

阅读量1k

点赞数

分类专栏： HTML/CSS 文章标签： class html border ie css url

本文链接：https://blog.csdn.net/zhu1988renhui/article/details/8045611

版权

HTML/CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

做了一个很基本的垂直导航条：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>导航制作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
ul.nav{
	margin:0;
	padding:0;
	list-style-type:none;
	width:8em;
	background-color:#8BD400;
	border:1px solid #486B02;
}
ul.nav li{
	display:inline; //移除IE列表项中上下添加的额外的空间
}
ul.nav a{
	font-family:sans-serif;
	display:block;
	color:#2B3F00;
	text-decoration:none;
	border-top:1px solid #E4FFD3;
	border-bottom:1px solid #486B02;
	background:url(img/arrow.gif) no-repeat 5% 50%;
	padding:0.3em 1em;
}
ul.nav .last a{
	border-bottom:0;
}
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a{
	color:#E4FFD3;
	background-color:#6DA203;
}
</style>
</head>
<body>
	<ul class="nav">
		<li class="selected"><a href="http://www.w3cfuns.com">Home</a></li>
		<li><a href="http://www.w3cfuns.com">About</a></li>
		<li><a href="http://www.w3cfuns.com">Our Services</a></li>
		<li><a href="http://www.w3cfuns.com">Our Work</a></li>
		<li><a href="http://www.w3cfuns.com">News</a></li>
		<li class="last"><a href="http://www.w3cfuns.com">Contact</a></li>
	</ul>
</body>
</html>

效果显示：

在FF中显示正常，但在IE6中，列表项上下添加了额外的空间，具体解决方法参考：IE6中Li列表项增加空行BUG

参考：《精通CSS高级标准Web解决方案》

joannazhu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
垂直导航条

做了一个很基本的垂直导航条：导航制作ul.nav{ margin:0; padding:0; list-style-type:none; width:8em; background-color:#8BD400; border:1px solid #486B02;}ul.nav li{ display:inline; //移除IE列表项中上下添加的额外的空间}
复制链接

扫一扫

专栏目录