前端小神龟 -- 分页导航栏

　　本人刚入职做前端一个月，第一次分享自己的经验，这次是一个分页导航栏，下面上图

　　        

　　这个算是比较简单吧，但对于新手来说还是一次比较好的收获；

HTML 代码如下：

<ul class="pagination-db">
   <li>
      <a>
         <img src="${admin_images}/admin_v3/icon_left.png">
      </a>
   </li>
   <li>
      <a>1</a>
   </li>
   <li>
      <a>2</a>
   </li>
   <li>
      <a>3</a>
   </li>
   <li>
      <a>4</a>
   </li>
   <li>
      <a>
         <img src="${admin_images}/admin_v3/icon_right.png">
      </a>
   </li>
   <form>
      <span>跳至</span>
      <span><input type="text" name="page"></span>
      <span>页</span>
   </form>
</ul>

CSS 代码如下：没有做兼容性处理，有兴趣的朋友可以改写成兼容各大浏览器的。

　　原理就是利用ul-li布局，给每个li设置好样式，li内部写入和a标签，用来进行翻页的操作（这个不会的可以去研究下哦，就是改写网址,具体如何做要看用什么样的路由了！）

　　就样式而言，这段代码完全可以用哦！！

　　这里还有两张左箭头和右箭头的图片，我都在上面给出来了哦！

.pagination-db{
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    list-style-type: none;
    li {
        float: left;
        position: relative;
        width:28px;
        height: 28px;
        margin-left: 8px;
        font-size: 12px;
        text-align: center;
        line-height: 28px;
        border: solid 1px #dae0ee;
        border-radius:4px;
        background-color: #fff;
        a {
            position: relative;
            display: block;
            width:100%;
            height:100%;
            color: #404858;
            text-decoration: none;
            img {
                position: absolute;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
            }
        }
        a:hover{
            background-color: #12bcfc;
            color:#fff;
        }
    }
    li.chosen{
        color:#fff;
        a{
            background-color: #12bcfc;
        }
    }
    form{
        float:left;
        margin-left:16px;
        color: #404858;
        font-size:12px;
        line-height: 28px;
        input{
            width: 50px;
            height: 28px;
            margin: 0 8px;
            padding:0 8px;
            border-radius:4px;
            background-color: #fff;
            border: solid 1px #dae0ee;
        }
    }
}