项目设计

效果图

话不多说，先直接上一下完成后的效果图；

通过以上效果图可以大致想一下你的思路，以及设计的方法。然后可以先自己动手试试。然后在与我的设计思路进行比对，如果你有更好的设计思路。欢迎分享到评论区哦！

设计

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">&lt;&lt;上一页</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">&gt;&gt;下一页</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">&lt;&lt;上一页</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">&gt;&gt;下一页</a>
        到第<input type="text" id="jump">页
        <input type="button" value="确定" id="btn">
    </div>
</body>

</html>

更多推荐

html+css——做一个简单的底部导航栏