用列表(ul)的方式实现向前和向后跳转的链接样式

在许多文章显示页面,都会有一个向前和向后的跳转链接,虽然这是一个简单的功能,但是对于用户体验却有一个很大的提高.本文介绍的就是用列表(ul)的方式实现向前和向后跳转的链接样式.

用列表(ul)的方式实现向前和向后跳转的链接样式 – 示例

先看看效果:

<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #DCB20C; text-decoration: none; font-size: 12px;
}
a:hover {
	color: #CC9933; text-decoration: underline; font-size: 12px;
}
ul#navigation {
	list-style-type: none;
	margin: 0;
	padding: .5em 0;
	border-top: 1px solid #666;
}

ul#navigation li a {
	display: block;
	width: 5em;
	color: #FFF;
	background-color: #036;
	padding: .2em 0;
	text-align: center;
	text-decoration: none;
}

ul#navigation li a:hover {
	color: #FFF;
	background-color: #69C;
}

ul#navigation .left { float: left; }
ul#navigation .right { float: right; }

-->
</style>

<ul id="navigation">
	<li class="left"><a href="#">Back</a></li>
	<li class="right"><a href="#">Next</a></li>
</ul>