css自适应响应式分页效果代码-html代码-BFW代码库

css自适应响应式分页效果代码

代码语言：html

所属分类：响应式

代码描述：css自适应响应式分页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>

        h1 {
            font-family: 'Open Sans';
            text-align: center;
            margin: 0 auto 40px;
            background-color: #e6e6e6;
            padding: 10px 0 15px;
        }
        nav {
            margin: 0 auto;
            display: table;
            width: 100%;
        }
        nav #prev {
            float: left;
        }
        nav #next {
            float: right;
        }
        nav a {
            text-decoration: none;
            padding: 3px;
            border: 1px solid #ccc;
            width: 20px;
            height: 20px;
            -ms-display: flex;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Open Sans';
            color: #666;
            transition: all 0.3s ease;
        }
        nav a:hover {
            color: #fff;
            background-color: #666;
        }
        nav ul {
            list-style: none;
            padding: 0;
            text-align: center;
            margin: 0 auto;
        }
        nav ul li {
            display: inline-block;
        }
        nav ul li.nav-active a {
            color: #fff;
            background-color: #666;
        }

        p {
            font-family: 'Open Sans';
            position: absolute;
            width: 80px;
            margin: 0;
            height: 45px;
            right: 10px;
            top: 45%;
            opacity: 0.6;
            transition: all 0.3s ease;
        }
        p svg {
            position: absolute;
            right: 0;
            top: 22px;
        }
@media (max-width: 400px) {
            nav li a {
                display: none;
            }
            nav li.nav-active a,
            nav li.brotha a {
                display: flex;
            }
            p {
                opacity: 0;
            }
        }
@media (max-width: 185px) {
            nav,
            h1 {
                display: none;
            }
            #what {
                display: block;
            }
        }
    </style>



</head>

<body>
    <h1>自适应分页</h1>

    <nav>
        <a href="#" id="prev">‹</a>
        <a href="#" id="next">›</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="nav-active"><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
        </ul>
    </nav>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
    

        //Add class to active's previous and next element
        $('.nav-active').next().addClass(.........完整代码请登录后点击上方下载按钮下载查看