css 分页效果 - 站长资源库


答案：<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
#page a{ 
display:block; 
border:1px solid red; 
background:black; 
color:white; 
width:20px; 
height:20px; 
float:left; 
margin-left:10px; 
text-align:center; 
text-decoration:none; 
font-size:12px; 
} 
#page a.current:link,#page a.current:visited{ 
background:white; 
color:black; 
} 
#page a.page_:link,#page a.page_:visited{ 
background:blue; 
width:50px; 
} 
</style> 
</head> 

<body> 
<div id="page"> 
上一页 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
下一页 
</div> 
</body> 
</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

上一个：Zen Coding 快速编写HTML/CSS代码的实现
下一个：IE下href 的 BUG问题

更多图片编程知识:

写CSS_关于Border你可能需要注意的地方第1/2页
来自极客标签10款最新设计素材
网站设计：什么是滚动视差？滚动视差设计指南
不容错过的window8 metro UI风格的web资源
为什么不建议用img标签来控制图片大小
网站页面分析：关于WEB标签设计二三事