前端第5款：经典的纯CSS页码

描述：当我们在做列表页的时候，经常会遇到页码，我们是不是只需要把它复制过来，就可以用呢，不需要再修改。当然在下边的这个列表页，是织梦系统里经典的页码，笔者很是喜欢，一直在用。

HTML代码：

<div class="dede_pages ">
	<ul class="pagelist">
		<li>首页</li>
		<li class="thisclass">1</li>
		<li><a href='#'>2</a></li>
		<li><a href='#'>3</a></li>
		<li><a href='#'>4</a></li>
		<li><a href='#'>5</a></li>
		<li><a href='#'>6</a></li>
		<li><a href='#'>7</a></li>
		<li><a href='#'>8</a></li>
		<li><a href='#'>9</a></li>
		<li><a href='#'>10</a></li>
		<li><a href='#'>下一页</a></li>
		<li><a href='#'>末页</a></li>
		<li><select name='sldd' style='width:42px' onchange='location.href=this.options[this.selectedIndex].value;'>
			<option value='#' selected>1</option>
			<option value='#'>2</option>
			<option value='#'>3</option>
			<option value='#'>4</option>
			<option value='#'>5</option>
			<option value='#'>6</option>
			<option value='#'>7</option>
			<option value='#'>8</option>
			<option value='#'>9</option>
			<option value='#'>10</option>
		</select></li>
		<li><span class="pageinfo">共 <strong>10</strong>页<strong>335</strong>条</span></li>
	</ul>
</div>

CSS代码：

.dede_pages{ text-align:center;}
.dede_pages ul{float:left;padding:12px 0px 12px 16px;}
.dede_pages ul li{float:left;font-family:Tahoma;line-height:17px;margin-right:6px;border:1px solid #E9E9E9;}
.dede_pages ul li a{float:left;padding:2px 4px 2px;color:#555;display:block;}
.dede_pages ul li a:hover{color:#690;text-decoration:none;padding:2px 4px 2px;}
.dede_pages ul li.thisclass,.dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{background-color:#F8F8F8;padding:2px 4px 2px;font-weight:bold;}
.dede_pages .pageinfo{line-height:21px;padding:12px 10px 12px 16px;color:#999;}
.dede_pages .pageinfo strong{color:#555;font-weight:normal;margin:0px 2px;}