使用CSS实现美观的分页器?网页中经常使用如图1所示的分页栏。观察分页栏的结构发现,分页栏的上下左右都有内边距,元素同处一行。然而,块元素不能实现多个元素同行显示,内联元素无法设置宽高。显然,它们都不符合分页栏的要求。
图1 分页栏
那么,怎样才能使块元素同处一行,或让内联元素有宽高呢?内联块很好地解决了这个问题,给元素添加CSS属性display:inline-block,可以将元素转化为内联块元素。
内联块元素具有以下特征:
(1)块元素在一行显示;
(2)内联元素可以设置宽和高;
(3)没有设置宽度的时候,内容撑开宽度。
【例】使用内联块完成如图2所示的分页栏,制作步骤如下。
(1)完成分页栏的结构,HTML代码如下。
<body> <ul> <li class="previous-page"> 上一页 </li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>···</li> <li class="next-page"> 下一页 </li> </ul> </body>
(2)完成简单的文本样式,CSS代码如下。
[插图]
运行结果如图2所示。
图2 浏览器显示效果
(3)根据内联块的特征“使块元素在一行显示”,给li元素设置CSS样式display:inline-block,浏览器显示效果如图3所示。CSS代码如下。
li{ display:inline-block; width:30px; height:30px; list-style: none; border:2px solid #f0f0f0; text-align:center; line-height:30px; font-size:18px; }
图3 给li元素设置CSS样式display:inline-block
(4)从图3可以看出每个li元素之间都有一小段距离,这是因为内联块会把代码的换行解析为空格。可以将父元素的字体大小设为0来解决这个问题,浏览器显示效果如图4所示。CSS代码如下。
ul{ font-size:0; }
图4 父元素的字体大小为0
(5)从图4可以看出,元素中间的边框是其他边框的两倍,它是由前一个元素的borderright和后一个元素的border-left组成。为了将元素中间的边框调整到与其他边框相同的宽度,给li元素添加CSS样式border-right:none,取消所有li元素的右边框,浏览器显示效果如图5所示。CSS代码如下。
li{ display:inline-block; width:30px; height:30px; list-style: none; border:2px solid #f0f0f0; text-align:center; line-height:30px; font-size:18px; border-right:none; }
图5 取消所有li元素的右边框
(6)给最后一个li元素添加右边框,如图6所示。代码如下。
.next-page{ width:90px; border-right:2px solid #f0f0f0; }
图6 给最后一个li元素添加右边框
(7)调整字体大小和颜色,给“第2页”添加橙色的背景色,同时修改其边框为橙色,如图7所示。代码如下。
li:nth-of-type (3){ background-color:#ff422e; color:#ffffff; border:2px solid #ff422e; }
图7 调整字体大小和颜色
(8)给“上一页”和“下一页”添加圆角效果,如图8所示。代码如下。
.previous-page{ width:90px; border-top-left-radius:10px; border-bottom-left-radius:10px; } .next-page{ width:90px; border-top-right-radius:10px; border-bottom-right-radius:10px; border-right:2px solid #f0f0f0; }
图8 添加圆角效果