最新消息:

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

前端模块 杨红伟 1748浏览 0评论

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

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;}  

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址