链接放大效果 - 文章中心

链接放大效果

关键词：链接,效果时间:2008年05月13日星期二阅读:121

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给放大的分页</title>
<meta name="KEYWords" content="css,xhtml,display,layout, style,lab, sheets, w3c,w3, web standards,pagination" />
<meta name="DEscription" content="一个好玩的分页,Internet Explorer7或者Firefox可以看到附带的效果" />
<meta content="all" name="robots" />
<style type="text/css">
ul#hovershow{
	list-style-type: none;
	margin: 50px;
	width:200px;
	float: left;
	display: inline;
	clear: both;
}
ul#hovershow li{
	float: left;
	display: inline;
	width:20px;
	height: 20px;
	margin: 2px;
	
}
ul#hovershow li a {
	display: block;
	width:20px;
	height:20px;
	border:1px #999 solid;
	color:#0984FF;
	background-color:#fff;
	text-decoration: none;
	line-height: 20px;
	font-size: 12px;
	text-align: center;
	font-weight: bold;
}
ul#hovershow li a:hover{
	position: absolute;
	width:40px;
	height: 40px;
	line-height: 40px;
	font-size: 32px;
	z-index:100;
	margin: -10px 0 0 -10px;
}
ul#hovershow li:hover + li a{
	position: absolute;
	width:30px;
	height: 30px;
	line-height: 30px;
	font-size: 24px;
	z-index:99;
	margin: -5px 0 0 -5px;
}
</style>
</head>
<body>
<h1>给放大的分页</h1>
<ul id="hovershow">
	<li><a href="#1" title="#1">1</a></li>
	<li><a href="#2" title="#2">2</a></li>
	<li><a href="#3" title="#3">3</a></li>
	<li><a href="#4" title="#4">4</a></li>
	<li><a href="#5" title="#5">5</a></li>
	<li><a href="#6" title="#6">6</a></li>
	<li><a href="#7" title="#7">7</a></li>
</ul>
</body>
</html>

提示：可以先修改部分代码后再运行

上一篇：相同结构的40种CSS布局下一篇：根据浏览器宽度自动把布局从三栏切换成两栏加底栏

0条记录访客评论

发表评论