2.11_特征布局_翻页

作者: 蔚来天空 | 来源:发表于2018-09-11 22:13 被阅读0次

2.11_特征布局_翻页
css练习一：常用的布局实例（分页、导航条、图片列表）
翻页布局
制作特征布局—翻页(盒模型，内联元素)
前端-第八天-作业
css3图片展示效果
特征布局
特征布局
特征布局1
特征布局2

运用盒模型和内联元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.11_特征布局_翻页</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0:;
        }
        .box{
            width: 960px;
            height: 42px;
            border: 1px solid #C0C0C0;
            margin: 0 auto;
            text-align: center;
            padding-top: 14px;
            
        }

        .box a{
            font-family: '雅黑';
            color: black;
            font-size: 12px;
            background-color: gold;
            padding: 5px 10px;
            text-decoration: none;
            
        }
        a:hover{
            background-color:blue; 
        }
        a:active{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <span>...</span>
        <a href="#">17</a>
        <a href="#">18</a>
        <a href="#">19</a>
        <a href="#">20</a>
        <a href="#">下一页</a>
    </div>
</body>
</html>

特征布局_布局.png