内容介绍

![Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）
这个学习资源来自于一个youtuber开的频道，名字叫做online tutorial（https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）, 从第一次无意间系统推送给我他的频道的时候我就被他发的一些自创css style深深吸引，也借以这个平台来和大家分享一下一些很有用的学习资源。

简介

今天介绍几个页码ui设计

1. 简单页码

<body>
    <ul>
        <li>
            <a href="#">
                <</a>
        </li>
        <li><a href="#" class="active">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">></a></li>
    </ul>

</body>

css 文件

body {
    margin: 0;
    padding: 0;
    background: #ff006a;
    font-family: sans-serif;
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 15px 20px rgba(0, 0, 0, .5), 0 0 0 4px #b4004e;
}

ul li {
    list-style: none;
}

ul li a {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #fff;
    color: #262626;
    text-decoration: none;
    border-radius: 4px;
    margin: 5px;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .5);
}

ul li:first-child a {
    border-radius: 20px 0 0 20px;
}

ul li:last-child a {
    border-radius: 0 20px 20px 0;
    /*top right bottom left*/
}

ul li a.active,
ul li a:hover {
    background: #ff006a;
    color: #fff
}

跟之前介绍的没什么差别，主要想提一下box-shadow和border-radius

看一下来自MDN对box-shadow的解释，我觉得比较清晰明了
在这里插入图片描述
border-radius的

成果

在这里插入图片描述

2.hover会发光版

html与上一个的相同

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #1f1f1f;
}

ul {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ul li {
    list-style: none;
}

ul li a {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    background: #353535;
    color: #565656;
    text-decoration: none;
    border-radius: 4px;
    margin: 5px;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .5);
}

ul li a.active,
ul li a:hover {
    color: #fff;
    text-shadow: 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27);
}

text-shadow跟box-shadow的syntax差不多

成果

在这里插入图片描述

3. 用jquery配合的next和prev

    <ul class="pagination">
        <li>
            <a href="#" class="prev">
                < Prev</a>
        </li>
        <li class="pageNumber active"><a href="#">1</a></li>
        <li class="pageNumber"><a href="#">2</a></li>
        <li class="pageNumber"><a href="#">3</a></li>
        <li class="pageNumber"><a href="#">4</a></li>
        <li class="pageNumber"><a href="#">5</a></li>
        <li><a href="#" class="next">Next >
        </a></li>


    </ul>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1ce37c;
}

ul {
    position: relative;
    background: #fff;
    display: flex;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
}

ul li {
    list-style: none;
    line-height: 50px;
    margin: 0 5px;
}

ul li.pageNumber {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    font-weight: 600;
    border-radius: 50%;
}

ul li.pageNumber:hover a,
ul li.pageNumber.active a {
    background: #333;
    color: #fff;
}

ul li:first-child {
    margin-right: 30px;
    font-weight: 700;
    font-size: 20px;
}

ul li:last-child {
    margin-left: 30px;
    font-weight: 700;
    font-size: 20px;
}

比较重要的是javascript

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.next').click(function() {
                $('.pagination').find('.pageNumber.active').next().addClass('active');
                $('.pagination').find('.pageNumber.active').prev().removeClass('active');

            })
            $('.prev').click(function() {
                $('.pagination').find('.pageNumber.active').prev().addClass('active');
                $('.pagination').find('.pageNumber.active').next().removeClass('active');

            })
        })
    </script>

主要做的事情就是当click next的时候，标记当前被active的下一个，并且在标记完当前以后，删除，注意这里next（）函数是会返回当前的next，也就是后面用到prev（）函数的时候实际上是指了回来。