特征布局

作者: Es__ | 来源:发表于2018-09-11 20:10 被阅读0次

特征布局
特征布局
css练习一：常用的布局实例（分页、导航条、图片列表）
特征布局1
特征布局2
特征布局3
特征布局4
特征布局1
特征布局three
特征布局4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特征布局</title>
    <link rel="stylesheet" href="css/tzo.css">
</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="#">12</a>
        <a href="#">13</a>
        <a href="#">14</a>
        <a href="#">15</a>
        <a href="#">下一页</a> 
    </div>

    <div class="boxt">
        <ul>
            <li><a href="#">首页</a></li>
            <span>|</span>
            <li><a href="#">网站建设</a></li>
            <span>|</span>
            <li><a href="#">程序开发</a></li>
            <span>|</span>
            <li><a href="#">网络营销</a></li>
            <span>|</span>
            <li><a href="#">企业VI</a></li>
            <span>|</span>
            <li><a href="#">案例展示</a></li>
            <span>|</span>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
</body>
</html>

*{
    padding: 0;
    margin: 0;
}
.box{
    width: 458px;
    height: 40px;
    border: 1px solid rgb(220,220,220);
    margin: 20px auto;
    padding: 0px 250px
}
.box a:link{
    display: inline-block;
    margin: 7px auto;
    padding: 5px 10px;
    background-color: gold;
    color: rgb(0,0,0);
    font: bolder 12px 微软雅黑; 
    text-decoration: none;
}
.box a:hover{
    background-color: red;
    color: rgb(255,255,255);
}
.boxt{
    width: 958px;
    height: 40px;
    border: 1px solid rgb(0,0,0);
    margin: 100px auto;
}
ul{
    padding: 0px 150px;
    list-style: none;

}
li,ul span{
    float: left;
    margin:10px 10px;
}
li a:link{
    font: bolder 14px 微软雅黑;
    color: #333;
    list-style: none;
    text-decoration: none;
}
li a:hover{
    color: red;
}

捕获.PNG