导航栏

作者: 卝婯 | 来源:发表于2018-06-08 11:43 被阅读0次

swift-导航栏
iOS 状态栏(statusbar)导航栏(navigation
OC_导航栏 + iOS10
导航栏渐变隐现
Android隐藏和显示虚拟导航栏
适配iOS15导航栏，导航栏空白, 修改导航栏文字颜色
iOS 获取状态栏、导航栏、tabBar高度
iOS11 自定义导航栏衍生的几个问题（高度、间距等）
隐藏导航栏
swift-导航栏修改高度

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
    .u1{
        width: 707px;
        overflow: hidden;
        border-top: 1px solid gold;
        border-left: 1px solid gold;
        border-bottom:  1px solid gold;
        margin: 0 auto;
       

        /*background-color: red;*/
    }
     a{
        line-height: 50px;
        height: 50px;
        width: 100px;
        float: left;
        color: pink;
        text-align: center;
        border-right: 1px solid gold;
        text-decoration: none;
    }
    li{
        list-style: none; 
    }
    
    a:hover{
        background-color: red;
    }
  </style>
  <body>
    <ul class="u1">
        <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>

  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
    .u1{
        width: 707px;
        overflow: hidden;
        border-top: 1px solid gold;
        border-left: 1px solid gold;
        border-bottom:  1px solid gold;
        margin: 0 auto;
       

        /*background-color: red;*/
    }
     a{
        line-height: 50px;
        height: 50px;
        width: 100px;
        float: left;
        color: pink;
        text-align: center;
        border-right: 1px solid gold;
        text-decoration: none;
    }
    li{
        list-style: none; 
    }
    
    a:hover{
        background-color: red;
    }
  </style>
  <body>
    <ul class="u1">
        <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>

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
    .d1{
        width: 960px;
        height: 40px;
        margin: 0 auto;
        border: 1px solid gold;
       }


     a{
        font-size: 12px;
        padding: 5px 10px;
        float: left;
        background-color: yellow;
        text-decoration: none;
        /*padding-left: 10px;*/
        margin-right: 10px;
    }
    li{
        list-style: none; 
        overflow: hidden;
        text-align: 30px;
        padding-top: 5px;
    }
    a:hover{
        
        background-color: red;
    }
    .u1{
        /*padding-top: 5px;*/
        padding-left: 300px;
        overflow: hidden;
    }
  </style>
  <body>
    <div class="d1">
        <ul class="u1">
            <li>
                <a href="#">上一页</a>
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">···</a>
                <a href="#"></a>
                <a href="#">5</a>
                <a href="#">6</a>
                <a href="#">下一页</a>
            </li>
            
        </ul>
    </div>
       
  </body>
  </html>