CSS超链接和导航

最新推荐文章于 2023-06-20 11:20:23 发布

weixin_33781606

最新推荐文章于 2023-06-20 11:20:23 发布

阅读量239

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/MADDOG520/p/3931338.html

版权

在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>

转载于:https://www.cnblogs.com/MADDOG520/p/3931338.html

关注