HTML和 CSS学习---（16）

最新推荐文章于 2021-06-07 17:38:25 发布

有态度的我

最新推荐文章于 2021-06-07 17:38:25 发布

阅读量200

点赞数

分类专栏：网页设计文章标签： css css3 javascript html5 html

本文链接：https://blog.csdn.net/weixin_42919657/article/details/104065450

版权

HTML和 CSS学习---（16）

成果
2.hover会发光版
成果
3. 用jquery配合的next和prev
成果

内容介绍

![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;

最低0.47元/天解锁文章

有态度的我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML和 CSS学习---（16）

HTML和 CSS学习---（16）内容介绍简介1. 简单页码内容介绍![Alt](https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）这个学习资源来自于一个youtuber开的频道，名字叫做online tutorial（https://www...
复制链接

扫一扫