网页前端设计

http://www.86y.org

搜索文章

按钮分页距中display:inline-block完美解决

用声音读出全文关注我吧
 2012/7/4 11:10:00 阅读次数:9168

很久以前做的css按钮完美距中效果,主要是用了display的inline-block的属性。比较简单所以就发上来跟大家分享!效果图如下

完美距中效果图

按钮背景素材

按钮背景素材

<!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>分页距中display:inline-block;完美解决</title>
<style>
*{margin:0;padding:0;}
.page{width:100%;marign:0 auto;height:22px;font-size:12px;text-align:center;line-height:22px;height:22px;overflow:hidden;margin-top:5px;}
.page a,.page a b,.page a.crent,.page a.crent b{background:url(http://i1173.photobucket.com/albums/r595/charrysong/upload/page_bg.gif) no-repeat; cursor:pointer;height:22px;display:inline-block;}
.page a{background-position:right -54px;color:#000;text-decoration:none;margin-right:5px;}
.page a:hover{background-position:right -135px;}
.page a:hover b{background-position:left -108px;color:#ff0000;}
.page a b{background-position:0 0px;padding:0 10px 0 10px;font-weight:normal;}
.page a.crent,.page a.crent:hover{background-position:right -81px;}
.page a.crent b,.page a.crent:hover b{background-position:0 -27px;color:#fff;}
</style>
</head>
<body>
<div class="page"><a href="#"><b>上一页</b></a><a href="#" class="crent"><b>1</b></a><a href="#"><b>2</b></a><a href="#"><b>3</b></a><a href="#"><b>4</b></a><a href="#"><b>下一页</b></a></div>
<div class="page"><a href="#"><b>上一页</b></a><a href="#"><b>1</b></a><a href="#" class="crent"><b>2</b></a><a href="#"><b>3</b></a><a href="#"><b>4</b></a><a href="#"><b>下一页</b></a></div>
<div class="page"><a href="#"><b>上一页</b></a><a href="#"><b>1</b></a><a href="#"><b>2</b></a><a href="#" class="crent"><b>3</b></a><a href="#"><b>4</b></a><a href="#"><b>下一页</b></a></div>
<div class="page"><a href="#"><b>上一页</b></a><a href="#"><b>1</b></a><a href="#"><b>2</b></a><a href="#"><b>3</b></a><a href="#" class="crent"><b>4</b></a><a href="#"><b>下一页</b></a></div>
</body>
</html>

好了!大家点击运行看效果吧!


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=374【按钮分页距中display:inline-block完美解决】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭