您现在的位置：陈设世家 >> 网络垃圾桶 >> 作品展示 >> DIVCSS >> 文章正文rss

CSS页码效果

不知道网上有没有做成这样的，纯粹是不小心做出来的。
最终效果说明：
页面结构是这样的

程序代码

最终看到的彩色下划线是根据li的背景色显示出来的

程序代码

li{background:#f60;}

而鼠标移上去的色彩变化是根据

程序代码

a:hover{background:#f93}

当然关键的地方在于

程序代码

li{width:20px;height:20px}

定义li的高度时由于没有定义line-height:20px，所以会造成a标签在显示时下方会留空几个像素。正在由于这个错误，无意中产生了这个效果

请运行下段代码看效果。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
	<head>
		<title>代码基地<a class="channel_keylink" href="http://www.fenmei.com/bbs/register.php" target="_blank">博客</a>站</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta name="Keywords" content="CSS页码链接" />
		<meta name="Description" content="CSS制作的页码链接效果" />
		<meta name="Author" content="jxdawei,jxdawei@gmail.com" />
		<style type="text/css">
			body{
				font-size:62.5%;
			}
			h1{
				font-size:1.4em;
			}
			h2{
				clear:both;
				font-size:1.2em;
			}
			#pageClass{
				clear:both;
				font-size:1.2em;
			}
			#pageClass ul{
				list-style:none;
			}
			#pageClass li{
				float:left;
				width:20px;
				height:20px;
				line-height:20px;
				border:1px solid silver;
				margin:0 3px;
			}
			#pageClass a{
				display:block;
				text-align:center;
			}
			#pageClass a:link,#pageClass a:visited{
				background:white;
				text-decoration: none;
				color:gray;
			}
			#pageClass a:hover,#pageClass a:active{
				text-decoration: none;
				background:gray;
				color:white;
			}

/*第二个效果*/
			#pageClass2{
				clear:both;
				font-size:1.2em;
			}
			#pageClass2 ul{
				list-style:none;
			}
			#pageClass2 li{
				float:left;
				width:20px;
				height:20px;
				border:1px solid silver;
				margin:0 3px;
			}
			#pageClass2 a{
				display:block;
				text-align:center;
			}
			#pageClass2 a:link,#pageClass2 a:visited{
				background:white;
				text-decoration: none;
				color:gray;
			}
			#pageClass2 a:hover,#pageClass2 a:active{
				text-decoration: none;
				background:gray;
				color:white;
				line-height:14px;
			}
		/*第三个效果*/
			#pageClass3{
				clear:both;
				font-size:1.2em;
			}
			#pageClass3 ul{
				list-style:none;
			}
			#pageClass3 li{
				float:left;
				width:20px;
				height:20px;
				border:1px solid silver;
				background:#f60;
				margin:0 3px;
			}
			#pageClass3 a{
				display:block;
				text-align:center;
				line-height:16px;
			}
			#pageClass3 a:link,#pageClass3 a:visited{
				background:white;
				text-decoration: none;
				color:gray;
			}
			#pageClass3 a:hover,#pageClass3 a:active{
				text-decoration: none;
				background:#f93;
				color:white;
				line-height:16px;
				}
		</style>
	</head>

<body>
		<h1>页码效果</h1>
		<h2>这是我原本想要去做的效果</h2>
		<div id="pageClass">
			<ul>
				<li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li>
				<li><a href="http://www.iwcn.net/default.asp">7</a></li>
			</ul>
		</div>
		<h2>做完之后成这样了</h2>
		<div id="pageClass2">
			<ul>
				<li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li>
				<li><a href="http://www.iwcn.net/default.asp">7</a></li>
			</ul>
		</div>
		<h2>改了改成这样了</h2>
		<div id="pageClass3">
			<ul>
				<li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li>
				<li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li>
				<li><a href="http://www.iwcn.net/default.asp">7</a></li>
			</ul>
		</div>
	</body>
</HTML>

上一篇文章： CSS的图表

下一篇文章：改善用户体验之alert提示效果

作者：佚名文章来源：www.iwcn.net 点击数：更新时间：2007-3-5

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

更多关于 CSS页码效果的文章
没有相关文章

热门影视
最新电视剧

·用博客寻找爱情	·厦门人就上厦门顶牛社区	·星期天去哪聚会	·免费发布企业招聘
·在线一亿片视频观看	·挑战美女无极限	·创建我的书签	·我要卖东西,买东西

CSS页码效果

更多关于 CSS页码效果 的文章

更多关于 CSS页码效果的文章