CSS学习之翻页功能

作者: 胆小的米老鼠 | 来源:发表于2018-08-30 10:12 被阅读41次

CSS学习之翻页功能
翻页功能
翻页条
设计中被忽略的细节(三)
网页常见的几种翻页方式
mongo学习（二）——常用查询技巧
Android使用viewPager2实现UI界面翻页滚动的效果
无从说跟着李南江学习CSS-CSS学习
表单改动1
React实现翻页功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分布布局</title>
    <style type="text/css">
        .con{
            width: 580px;
            height: 48px;
            border: 1px solid black;
            margin: 50px auto;
            text-align: center;
            font-size: 0;
            background: #f2f2f2;

        }
        .con a{
            display: inline-block;
            font-size: 16px;
            font-family: 'Microsoft Yahei';
            background:dodgerblue;
            margin:10px 10px;
            text-decoration: none;
            padding:0 5px;
        

        }
        .con span{

                display: inline-block;
                font-size: 16px;
                font-family: 'Microsoft Yahei';

        }

         .con a:hover{
             color: red;
         }

    </style>
</head>
<body>
    <div class="con">
        <span><<</span>
        <a href="">上一页</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <span>....</span>
        <a href="">11</a>
        <a href="">12</a>
        <a href="">13</a>
        <a href="">14</a>
        <span>>></span>
        <a href="">下一页</a>
        
    </div>
</body>
</html>

成果展示：

image.png