ps：小项目由html和css实现
目录
项目设计
效果图
设计
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>
