三种简单样式导航条

作者: 鬼会画符 | 来源:发表于2018-11-05 09:12 被阅读0次

三种简单样式导航条
导航条设置
Bootstrap - 导航条
IOS 自定义导航条
模拟京东商城实现导航条隐藏功能
navigationBar
横向滑动懒加载效果+升级版
iOS UIAlertActionStyle 字体不一致
CSS：前端基础 & CSS 初始
2018-3-19，前端小白的第一天（导航条）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业2导航一</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .nav{
            width: 960px;
            height: 42px;
            margin: 50px auto;
            list-style: none;
            border:1px solid black;
            

        }
        .nav a{
            font-size: 14px;
            font-family: '微软雅黑';
            display: block;
            float: left; 
            text-align: center;
            padding: 10px 20px;
            border-right: 1px solid #333;
            text-decoration: none;
            color: #333;
            

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

111.PNG

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .nav{
            list-style: none;
            background-color: #55a8ea;
            width: 960px;
            height: 40px;
            margin: 50px auto;
            overflow: hidden;
            /*解决高度塌陷*/
        }
        .nav li{
            float: left;
            width: 14.28%;
            
        }
        .nav a{
            font-size: 14px;
            color: #fff;
            font-family: '微软雅黑';
            display: block;
            /*width:250px;*/
            text-align: center;
            /*元素居中*/
            padding: 10px 0px;
            text-decoration: none;
            /*去除下滑线*/
            color: #fff;
        }
        .nav a:hover{
            background-color: #00619f;


        }
        /*list-style：none 清除项目符号*/
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">网站建设</a></li>
        <li><a href="#">程序开发</a></li>
        <li><a href="#">网络营销</a></li>
        <li><a href="#">企业VI</a></li>
        <li><a href="#">案例展示</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>
</html>

222.PNG

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
        }
        .wrap{
            width: 960px;
            height: 42px;
            margin:50px auto;
        }
        .wrap .container{
            border:1px solid #ccc;
        }
        .paging{
            text-align: center;
            padding: 5px 10px;
            font-size: 12px;
            font-family: "Microsoft YaHei";
        }

        .paging .prev,.next{
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            background-color: gold;
            color: #000;
            cursor: pointer;
        }
        .paging a,.point{
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background-color: gold;
        }
        .point{
            background: none;
            cursor: pointer;
            
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="container">
            <div class="paging">
                <span class="prev">上一页</span>
                <a href="">1</a>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <span class="point">...</span>
                <a href="">17</a>
                <a href="">18</a>
                <a href="">19</a>
                <a href="">20</a>
                <span class="next">下一页</span>
            </div>
        </div>
    </div>
</body>
</html>

333.PNG