div+css | 底部 分页框 布局
知识学而不用，那仅仅是知识，是别人的智慧。运用知识，融汇贯通才能生发出自己的智慧。你说是还是不是？接下来我将会分享我所学的给大家作为参考，以下是本次实现的效果图，使用的div+css布局，这里默认有html 和 css 基础。
在开始写代码之前，我们先从外到内的顺序对着图分析一下：
- 首先最外边的框我们使用列表ul 标签 来实现
- 内部的框自然是使用 li 标签 来实现，不过 li 是块元素，不能显示在一行，所以要将其转换为行内元素，使用display:inline-block 来实现一行显示
- 要注意小框内的文字除了...其余都是链接，所以要使用a标签来实现，但a标签是行内元素，不能设置宽高，所以要转化为块元素。
通过以上的分析会不会觉得实现起来更加容易呢？好，现在开始编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页练习</title>
<style>
.box {
width:602px;
height:42px;
border: 1px solid #000;
box-sizing:border-box;
margin:50px auto 0;
list-style: none;
padding:0px;
font-size:0px;
text-align:center;
}
.box li {
height:26px;
margin:7px 6px 0px;
font-size:12px;
display:inline-block;
}
.box li a {
display:block;
height:26px;
background-color: gold;
color:#000;
font:12px/26px 'Microsoft Yahei';
text-decoration:none;
padding:0px 7px;
}
.box li a:hover {
color:red;
background-color: wheat;
}
</style>
</head>
<body>
<ul class="box">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><span>...</span></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">下一页</a></li>
</ul>
</body>
</html>
常见的文本样式：
代码已完成，此刻的你是否有一种立即尝试的冲动~~那么抓紧动手趴。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-02-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
