CSS样式网页导航条

1、图片素材:


2、实现代码:

</pre><p><pre name="code" class="html"><!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>导航栏</title>
		<style type="text/css">
			li {
				list-style: none;
				float: left;
				font-size: 14px;
				text-align: center;
			}
			
			a:link,
			a:visited {
				display: block;
				width: 84px;
				font-weight: bold;
				color: black;
				text-align: center;
				text-decoration: none;
			}
			
			a:hover,a:active{
				background:url(img/nav_bg.gif);
				width: 84px;
				height: 26px;
				position: relative;
				line-height: 28px;
				text-align: center;
				font-size: 14px;
				letter-spacing: 3px;/*字符间距*/
				margin-top: -7px;
				/*z-index: -1;*/
			}
			
			.bg {
				margin-left: 100px;
				color: #F8A046;
				font-size: 18px;
				font-weight: bold;
				background-image: url(img/h_bg.jpg);
				background-repeat: no-repeat;
				width: 1200px;
				height: 150px;
				white-space: nowrap;
				background-position: -20px 1px;
			}
			
			ul {
				padding-top: 104px;
				padding-left: 2px;
			}
		</style>

	</head>

	<body>
		<div class="bg">
			<ul>
				<li><a href="">首  页</a></li>
				<li><a href="">家用电器</a></li>
				<li><a href="">手机数码</a></li>
				<li><a href="">日用百货</a></li>
				<li><a href="">书  籍</li>
				<li><a href="">帮助中心</li>
				<li><a href="">免费开店</li>
				<li><a href="">全球资讯</li>
				
			</ul>
		</div>
	</body>
</html>

3、实现效果:



你可能感兴趣的:(html,html5,css,导航)