星空网 > 软件开发 > 网页设计

前端小神龟

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

  前端小神龟   前端小神龟     前端小神龟

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

HTML 代码如下:

 1 <ul class="pagination-db"> 2  <li> 3    <a> 4     <img src='/images/loading.gif' data-original="${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='/images/loading.gif' data-original="${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 }

 




原标题:前端小神龟

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

10月31日起,第三方卖家未经许可不得出售“任天堂产品”!:https://www.ikjzd.com/articles/109835
法国VAT税号为何这么难办?看完你就懂了:https://www.ikjzd.com/articles/109836
印度会是下一片“掘金”热土吗?:https://www.ikjzd.com/articles/109837
菲律宾:新的百亿美金级电商市场!:https://www.ikjzd.com/articles/109838
外贸业务员必须要知道的外贸财务知识!:https://www.ikjzd.com/articles/109839
韩国当代消费者画像长什么样?:https://www.ikjzd.com/articles/109840
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流