ps：小项目由html和css实现
目录
项目设计
效果图
话不多说，先直接上一下完成后的效果图；
通过以上效果图可以大致想一下你的思路，以及设计的方法。然后可以先自己动手试试。然后在与我的设计思路进行比对，如果你有更好的设计思路。欢迎分享到评论区哦！
设计
html部分
首先使用一个div标签，同时添加一个属性id。注意id名称的定义是不允许重复的！将所有内容都包进去，后期方便设置整体的样式和格式。
<div id="all"></ div>由效果图可见，以后内容大致可以通过三类不同的元素标签；<div>、<a>和<input>标签就可以实现以上效果，首先通过三个标签大致实现以下页面内容的分配；
<a>标签必须包含具有页面跳转的上/下一页、选择页面1、2、3、4、5、6等。<与>为打印特殊符号'<'与'>'的代码。
<!-- a[href=#]*8 -->
<a href="#" class="JumpPage"><<上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="JumpPage">>>下一页</a><div>标签包含未展示页面；'... '的内容。
<div id="null">...</div><input>标签包含跳转的目标页面输入框和确定按钮。
到第<input type="text" id="jump">页
<input type="button" value="确定" id="btn">综上，基本完成了html部分代码的实现。效果图如下所示；
css部分
由html部分代码效果图可以看出，需要修改的样式基本为；<a>标签的下划线、颜色、大小、边框属性等；<div>标签的块级属性、字间距以及<input>标签大小的设置。修改的目标思路基本确定之后就可以动手操作了。
设置<a>标签属性：
/* 设置跳转页面的属性 */
a {
text-decoration: none;
display: inline-block;
width: 40px;
height: 40px;
border: 1px solid gray;
background-color: lightgray;
text-align: center;
color: black;
line-height: 40px;
border-radius: 5%;
}
/* 设置第二页的选中的特殊样式 */
a:nth-of-type(3){
border: none;
background-color: white;
}
/* 设置跳转页面的样式属性 */
.JumpPage{
width: 100px;
height: 40px;
}效果图：
设置<div>标签属性：
/* 第一个div部分属性 */
#all{
width: 800px;
height: 50px;
background-color: white;
border: 1px solid lightgray;
border-radius: 15px;
text-align: center;
line-height: 50px;
margin: 20% auto;
}
/* 未显示页面部分属性 */
#null{
display: inline-block;
border: none;
letter-spacing: 0.5em;
}效果图如下：
文本内容发生了溢出，是因为<input>输入框的默认宽度超出了<div>的总宽度，所以发生了溢出。
设置<input>属性：
/* 设置跳转输入框的样式 */
#jump{
height: 35px;
width: 40px;
}
/* 设置确定按钮的样式 */
#btn{
width: 60px;
height: 40px;
}效果图如下：
至此就完成全部样式设计了，同时也完成了刚开始的效果图。
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>work</title>
<style>
#all {
width: 800px;
height: 50px;
background-color: white;
border: 1px solid lightgray;
border-radius: 15px;
text-align: center;
line-height: 50px;
margin: 20% auto;
}
a {
text-decoration: none;
display: inline-block;
width: 40px;
height: 40px;
border: 1px solid gray;
background-color: lightgray;
text-align: center;
color: black;
line-height: 40px;
border-radius: 5%;
}
a:nth-of-type(3) {
border: none;
background-color: white;
}
#null {
display: inline-block;
border: none;
letter-spacing: 0.5em;
}
.JumpPage {
width: 100px;
height: 40px;
}
#jump {
height: 35px;
width: 40px;
}
#btn {
width: 60px;
height: 40px;
}
</style>
</head>
<body>
<div id="all">
<a href="#" class="JumpPage"><<上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<div id="null">...</div>
<a href="#" class="JumpPage">>>下一页</a>
到第<input type="text" id="jump">页
<input type="button" value="确定" id="btn">
</div>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看