导航条设计

作者: c_gentle | 来源:发表于2020-08-17 21:26 被阅读0次

iOS自定义导航条-同样的代码解决所有问题
导航条设计
导航条设置
Tailwind Navbar
分页、导航条1、导航条2
滑动导航条设计
分页导航栏开班信息
分页、导航条1、导航条2、开班信息
swift 布局（iOS9之后布局）自定义UIBarButton
分页导航栏开班信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>导航条</title>
        <style type="text/css">
            
            /*
             * 清除默认样式
             */
            *{
                margin:0;
                padding:0;
            }
            
            /*
             * 设置ul
             */
            .nav{
                /*去除项目符号*/
                list-style: none;
                /*为ul设置一个背景颜色*/
                background-color: #6495ED;
                /*设置一个宽度*/
                /*
                 * 在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
                 */
                width: 1000px;
                /*设置元素居中*/
                margin: 50px auto;
                /*解决高度塌陷*/
                overflow: hidden;
            }
            
            /**
             * 设置li
             */
            .nav li{
                /*设置li向左浮动*/
                float: left;
                width: 12.5%;
            }
            
            .nav a{
                /*将a转换为块元素*/
                display: block;
                /*为a指定一个宽度*/
                width: 100%;
                /*设置文字居中*/
                text-align: center;
                /*设置一个上下内边距*/
                padding: 5px 0;
                /*去除下划线*/
                text-decoration: none;
                /*设置字体颜色*/
                color: white;
                /*设置加粗*/
                font-weight: bold;
            }
            
            /*
             * 设置a的鼠标移入的效果
             */
            .nav a:hover{
                background-color: #c00;
            }
            
            
        </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="#">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">联系</a></li>
            <li><a href="#">关于</a></li>
        </ul>
        
    </body>
</html>