A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[学习交流] 【上海校区】分页

© 不二晨 金牌黑马   /  2019-1-18 09:48  /  442 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

<!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">
        <link rel="stylesheet" href="zuoye.css">
        <title>2018-12-28作业</title>
</head>

<body>
         <div class="nav">
                 <ul>                        
                         <li><a href="#">首页&nbsp;|</a></li>
                         <li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
                         <li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
                         <li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
                         <li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
                         <li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
                         <li><a href="#">&nbsp;网络建设&nbsp;|&nbsp;</a></li>
                         <li><a href="#">网络建设</a></li>
                 </ul>
         </div>

        <div class="pagination">
                <ul>
                        <li><a href="#">上一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><span>...</span></li>
                        <li><a href="#">15</a></li>
                        <li><a href="#">16</a></li>
                        <li><a href="#">17</a></li>
                        <li><a href="#">18</a></li>
                        <li><a href="#">下一页</a></li>
                </ul>
        </div>

</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.pagination{
        width: 960px;
        height: 42px;
        border: 1px green solid;
        margin:600px auto;       
        list-style: none;
        text-align: center;
        font-size: 0;
}

.pagination li,span{
        display: inline-block;
        margin: 7px 6px 0;
        /*background-color: grey;*/
}
.pagination a{
        text-decoration: none;
        display: inline-block;
        padding: 7px 9px;
        font-size: 12px;
        line-height: 12px;
        color: #393c35;
        background-color: gold;
}
.pagination span{
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        line-height: 12px;
}

.pagination li a:hover{
        color: red;
        text-decoration: underline;
}
.pagination li span:hover{
        color: red;
        text-decoration: underline;
}



.nav{
        width: 960px;
        height: 42px;
        border:1px grey solid;
        margin: 20px auto;
        list-style: none;
        font-size: 0;
        text-align: center;

}

.nav li{
        display: inline-block;
        margin:7px 7px 0;
       
}
.nav a{
        color: #999;
        text-decoration: none;
        display:inline-block;
        padding: 10px 15px;
        font-size: 14px;
        line-height: 16px;
}
.nav a:hover{
        color: black;
        text-decoration: underline;
}


.nav2{
        width: 960px;
        height: 42px;
        border:1px grey solid;
        margin: 20px auto;
        background-color: blue;
        text-align: left;
}

.nav2 ul{
        list-style: none;
        width: 110px;
        height: 100%;
        margin: 3px 5px 0;
        background-color: red;
        float: left;
}

.nav2 a{
                padding: 10px 15px;
}

---------------------
【转载,仅作分享,侵删】
作者:YRyr.*
原文:https://blog.csdn.net/weixin_43152725/article/details/85606037


1 个回复

倒序浏览
奈斯,感谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马