HTML和 CSS学习---(16)

HTML和 CSS学习---(16)

内容介绍

![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的解释,我觉得比较清晰明了
HTML和 CSS学习---(16)
border-radius的
HTML和 CSS学习---(16)

成果

HTML和 CSS学习---(16)

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差不多

成果

HTML和 CSS学习---(16)

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()函数的时候实际上是指了回来。

成果

HTML和 CSS学习---(16)

HTML和 CSS学习---(16)HTML和 CSS学习---(16) 有态度的我 发布了17 篇原创文章 · 获赞 0 · 访问量 185 私信 关注
上一篇:在PL设计中使用Xilinx MPSoC EMIO GPIO,并使用脚本设置MPSoC EMIO GPIO


下一篇:CSS盒子模型以及外边框合并的问题