CSS超链接和导航

浏览数：21 / 时间：2015年06月09日

在CSS中设置超链接样式

之前我们在HTML中用<a>标签来表示超链接通过点击跳转到另一个页面

在CSS中可以通过伪类选择对超链接访问时不同状态进行设定：

a:link：未被访问过的超链接样式

a:visited：被点击过的超链接样式

a:hover：鼠标指针经过超链接时的样式

a:active：当点击时超链接的样式

下面我们来做这张图片

当鼠标移到每个单词或每个单词上面的绿条时单词和它上面的绿条就会发光

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title></title>
	<style type="text/css">

	.out{
	width:100px;
	background-color:#000000;
	color:#ffffff;
	text-align:center;
	position: relative;
	margin:0 auto;
	top:100px;
	}

	ul,li{
	margin:0px;
	padding:0px;
	list-style:none;
	}


	ul li div{
	width:90px;
	height: 5px;
	background-color: #006F00;
	margin: 0 auto;
	}
	a{
	color: #CCCCFF;
	font-weight:bold;
	text-decoration:none;
	}
	a:hover{
	color: #ffffff;
	}
	a:hover div{
	background-color:#00F100;
	}
	</style>

	</head>
	<body>
	<div class="out">

	<ul class="inner">

	<li>
	<a href="#">
	<div ></div>
	Home
	</a>
	</li>
	<li>
	<a href="#">
	<div ></div>
	contract Us
	</a>

	</li>
	<li>
	<a href="#">
	<div ></div>
	web Dev
	</a>
	</li>
	<li>
	<a href="#">
	<div ></div>
	web Design
	</a>

	</li>
	<li>
	<a href="#">
	<div ></div>
	Map
	</a>

	</li>

	</ul>

	</div>

	</body>
	</html>