首页 > 代码库 > CSS超链接和导航
CSS超链接和导航
在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="http://www.mamicode.com/#"> | |
<div ></div> | |
Home | |
</a> | |
</li> | |
<li> | |
<a href="http://www.mamicode.com/#"> | |
<div ></div> | |
contract Us | |
</a> | |
</li> | |
<li> | |
<a href="http://www.mamicode.com/#"> | |
<div ></div> | |
web Dev | |
</a> | |
</li> | |
<li> | |
<a href="http://www.mamicode.com/#"> | |
<div ></div> | |
web Design | |
</a> | |
</li> | |
<li> | |
<a href="http://www.mamicode.com/#"> | |
<div ></div> | |
Map | |
</a> | |
</li> | |
</ul> | |
</div> | |
</body> | |
</html> |
CSS超链接和导航
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。