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

Posted 2020-07-29

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

　　        

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

html 代码如下：

 1 <ul class="pagination-db">
 2    <li>
 3       <a>
 4          <img src="${admin_images}/admin_v3/icon_left.png">
 5       </a>
 6    </li>
 7    <li>
 8       <a>1</a>
 9    </li>
10    <li>
11       <a>2</a>
12    </li>
13    <li>
14       <a>3</a>
15    </li>
16    <li>
17       <a>4</a>
18    </li>
19    <li>
20       <a>
21          <img src="${admin_images}/admin_v3/icon_right.png">
22       </a>
23    </li>
24    <form>
25       <span>跳至</span>
26       <span><input type="text" name="page"></span>
27       <span>页</span>
28    </form>
29 </ul>

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

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

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

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

 

 1 .pagination-db{
 2     display: inline-block;
 3     padding-left: 0;
 4     margin: 20px 0;
 5     list-style-type: none;
 6     li {
 7         float: left;
 8         position: relative;
 9         width:28px;
10         height: 28px;
11         margin-left: 8px;
12         font-size: 12px;
13         text-align: center;
14         line-height: 28px;
15         border: solid 1px #dae0ee;
16         border-radius:4px;
17         background-color: #fff;
18         a {
19             position: relative;
20             display: block;
21             width:100%;
22             height:100%;
23             color: #404858;
24             text-decoration: none;
25             img {
26                 position: absolute;
27                 top:50%;
28                 left:50%;
29                 transform: translate(-50%,-50%);
30             }
31         }
32         a:hover{
33             background-color: #12bcfc;
34             color:#fff;
35         }
36     }
37     li.chosen{
38         color:#fff;
39         a{
40             background-color: #12bcfc;
41         }
42     }
43     form{
44         float:left;
45         margin-left:16px;
46         color: #404858;
47         font-size:12px;
48         line-height: 28px;
49         input{
50             width: 50px;
51             height: 28px;
52             margin: 0 8px;
53             padding:0 8px;
54             border-radius:4px;
55             background-color: #fff;
56             border: solid 1px #dae0ee;
57         }
58     }
59 }