zoukankan      html  css  js  c++  java
  • p24 响应式导航栏 关闭按钮

     

    css引入

     <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

     

    body主体结构

    <body id="top">
        <div class="container">
            <a href="#nav" class="open toggle-btn"><i class="fa fa-reorder"></i></a>
            <nav id="nav">
                <ul>
                    <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>
                <a href="#top" class="close toggle-btn"><i class="fa fa-remove"></i></a>
            </nav>
            <header>搜索栏</header>
            <section>
                <h3>Real world examples, hot off the presses.</h3>
                <p>Our dictionary was written for humans, by humans. Look up a word, and you’ll read a friendly explanation that you'll actually remember. It’s as if your favorite teacher were explaining it to you.</p>
            </section>
            <aside>
                <h3>Finally, a dictionary with a soul.</h3>
                <p>Read thousands of example sentences from current newspapers, magazines, and literature. We show you how words live in the wild and give you usage tips so that you're more confident about using the words you learn.</p>
            </aside>
            <footer>页脚</footer>
        </div>
    </body>
    * {
        margin: 0;
        border: 0;
        padding: 0;
        font-weight: bold;
    }
    
    body {
        text-align: center;
    }
    
    .container {
         960px;
        margin: 15px auto 0 auto;
    }
    
    header,
    footer {
        height: 100px;
        background: #eee;
        margin-bottom: 20px;
        line-height: 100px;
    }
    
    section,
    aside {
        height: 300px;
        background: #eee;
        line-height: 20px;
        margin-bottom: 20px;
    }
    
    section {
        float: left;
         55%;
        margin-right: 15px;
        background: #eee;
        overflow: hidden;
    }
    
    h3 {
        margin-top: 60px;
        margin-bottom: 30px;
    }
    
    p {
        font-weight: normal;
        text-align: left;
        margin: 0 20px;
    }
    
    aside {
        float: right;
         40%;
        background: #eee;
        overflow: hidden;
    }
    
    footer {
        clear: both;
        margin-bottom: 0px;
    }
    
    @media screen and (min-1200px) {
        .container {
             1170px;
        }
    }
    
    @media screen and (max-960px) {
        .container {
             100%;
        }
        section {
             55%;
        }
        aside {
             40%;
        }
    }
    
    @media screen and (max-800px) {
        .container {
             100%;
        }
        section {
             55%;
        }
        aside {
             40%;
        }
    }
    
    @media screen and (max-device- 414px) {
        .container {
            margin: 0;
             100%;
        }
        section,
        aside {
            float: none;
             100%;
        }
        footer {
            margin-bottom: 0px;
        }
    }
    
    
    /* 导航菜单 */
    
    #nav ul li {
        list-style: none;
        display: inline-block;
        padding: 7px 16px;
    }
    
    a {
        color: black;
        text-decoration: none;
    }
    
    #nav ul li a:hover {
        background: black;
    }
    
    .toggle-btn {
        display: none;
    }
    
    @media screen and (max- 768px) {
        .container {
            margin: 0;
        }
        section,
        aside {
            float: none;
             100%;
        }
        /* 切换按钮 */
        .toggle-btn {
            display: inline-block;
            font-size: 30px;
            padding: 4px 7px;
            background: black;
            color: white;
            position: absolute;
            right: 10px;
            top: 0px;
        }
        .container .close {
            display: none;
        }
        #nav:target .close {
            display: inline-block;
        }
    }

     注意这个部分

  • 相关阅读:
    北京联通光猫WO-36(HG220GS-U)改为桥接模式
    使用DataGrip导入数据
    Spring知识点
    mybatis-generator
    项目中mybatis连接mysql常见问题
    Spring AOP
    Volatile
    Redis知识点
    Spring IOC
    Observer模式
  • 原文地址:https://www.cnblogs.com/apelles/p/11918275.html
Copyright © 2011-2022 走看看