036_CSS导航条

最新推荐文章于 2021-08-27 18:12:16 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-08-27 18:12:16 发布

阅读量162

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109133508

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1. 导航栏/链接列表

1.1. 导航栏需要标准的html作为基础。

1.2. 在我们的例子中, 将用标准的html列表来构建导航栏。

1.3. 导航栏基本上是一个链接列表, 因此使用<ul>和<li>元素是非常合适的:

<ul>
	<li><a href="default.asp">Home</a></li>
	<li><a href="news.asp">News</a></li>
	<li><a href="contact.asp">Contact</a></li>
	<li><a href="about.asp">About</a></li>
</ul>

1.4. 现在, 让我们从列表中去掉圆点和外边距:

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

1.4.1. list-style-type:none删除圆点。导航栏不需要列表项标记。

1.4.2. 把外边距和内边距设置为0可以去除浏览器的默认设定。

1.5. 以下例子中的代码是用在垂直、水平导航栏中的标准代码

<!DOCTYPE html>
<html>
	<head>
		<title>垂直、水平导航栏中的标准代码</title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#home">Home</a></li>
			<li><a href="#news">News</a></li>
			<li><a href="#contact">Contact</a></li>
			<li><a href="#about">About</a></li>
		</ul>
	</body>
</html>

1.6. 效果图

2. 垂直导航栏

2.1. 如需构建垂直导航栏, 我们只需要定义<a>元素的样式, 除了上面的代码之外:

a {
	display: block;
	width: 120px;
}

2.2. display: block把链接显示为块元素可使整个链接区域可点击(不仅仅是文本), 同时也允许我们规定宽度。

2.3. width: 120px块元素默认占用全部可用宽度。我们需要规定120像素的宽度。

2.4. 请始终规定垂直导航栏中<a>元素的宽度。如果省略宽度, IE6会产生意想不到的结果。

2.5. 完整样式的垂直导航栏实例

<!DOCTYPE html>
<html>
	<head>
		<title>垂直导航栏</title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a {
				text-decoration: none; /*去掉下划线*/
				display: block;
				width: 120px;
				color: #FFFFFF;
				font-weight: bold;
				text-align: center;
				line-height: 48px;
			}
			/* 未访问的链接 */
			a:link {
			    background-color: #bebebe;;
			}	
			/* 已访问的链接 */	
			a:visited {
			    background-color: #00FF00;
			}	
			/* 鼠标移动到链接上 */
			a:hover {
			    background-color: #FF00FF;
			}	
			/* 选定的链接 */
			a:active {
			    background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#home">Home</a></li>
			<li><a href="#news">News</a></li>
			<li><a href="#contact">Contact</a></li>
			<li><a href="#about">About</a></li>
		</ul>
	</body>
</html>

2.6. 效果图

3. 水平导航栏

3.1. 创建水平导航栏可以对列表进行浮动:

li {
	float: left;
}
a {
	display: block;
	width: 120px;
}

3.2. 使用float: left来把块元素滑向彼此。

3.3. display: block把链接显示为块元素可使整个链接区域可点击(不仅仅是文本), 同时也允许我们规定宽度。

3.4. width: 120px 由于块元素默认占用全部可用宽度, 链接无法滑动至彼此相邻。我们需要规定120像素的宽度。

3.5. 完整样式对列表项进行浮动的水平导航栏

<!DOCTYPE html>
<html>
	<head>
		<title>水平导航栏</title>
		<meta charset="utf-8" />

		<style type="text/css">
			body {
				margin: 0px;
			}
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li {
				float: left;
			}
			a {
				text-decoration: none;
				display: block;
				width: 120px;
				color: #FFFFFF;
				font-weight: bold;
				text-align: center;
				line-height: 48px;
			}
			/* 未访问的链接 */
			a:link {
			    background-color: #98bf21
			}	
			/* 已访问的链接 */	
			a:visited {
			    background-color: #00FF00;
			}	
			/* 鼠标移动到链接上 */
			a:hover {
			    background-color: #FF00FF;
			}	
			/* 选定的链接 */
			a:active {
			    background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#home">Home</a></li>
			<li><a href="#news">News</a></li>
			<li><a href="#contact">Contact</a></li>
			<li><a href="#about">About</a></li>
		</ul>
	</body>
</html>

3.6. 效果图