导航条

作者: 幸而0407 | 来源:发表于2018-09-11 22:32 被阅读0次

导航条设置
Tailwind Navbar
分页、导航条1、导航条2
分页导航栏开班信息
分页、导航条1、导航条2、开班信息
分页导航栏开班信息
Bootstrap - 导航条
Bootstrap - 导航条2
练习二导航条
Swift - 使用导航条和导航条控制器来进行页面切换

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style type='text/css'>
        *{margin:0;
            padding:0;}
        .box1{width:960px;
            height:42px;
            border:1px solid #fbfbfb;
            margin:50px auto;
            padding-top:15px;
            text-align: center;
        
    }
        .box1 a{
            font-family :'雅黑';
            padding:5px 10px;
            background-color: gold;
            color:black ;
            font-size:12px;
            text-decoration: none;
        }
        .box1 a:hover{
            background-color: #cc0000;
        }
        .box{
            list-style: none;
            width: 960px;
            height:42px;
            margin:50px auto;
            overflow: hidden;
            border-style: solid;
            border-color:black;
            text-align: center;
        }
        .box2{padding-left:120px;}
        .box li{
            float: left;
            text-align: :center;
            padding-right: 20px
            padding-left:-20px;
        }

        .box a{
            display: block;
            text-align: center;
            padding:10px 10px;
            text-decoration: none;
            color:#33;
            font:14px '雅黑';
        }
        .box a:hover{
            /*padding-left:10px;*/
            background-color: #cc0000;
        }
        .box span{padding-left:20px;
    </style>
</head>
<body>
    <div class="box1">
        <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>
    <ul class="box">
        <li class = 'box2'><a href="#">首页<span> |</span></a></li>
        <li><a href="#">网站建设<span> |</span></a></li>
        <li><a href="#">程序开发<span> |</span></a></li>
        <li><a href="#">网络营销<span> |</span></a></li>
        <li><a href="#">企业VI<span> |</span></a></li>
        <li><a href="#">案例展示<span> |</span></a></li>
        <li><a href="#">联系我们<span> |</span></a></li>
    </ul>



</body>
</html>