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;
        }
    }

     注意这个部分

  • 相关阅读:
    分治算法的时间复杂度研究
    c函数调用过程原理及函数栈帧分析
    Java实现蓝桥杯 算法训练 ALGO-15 旅行家的预算
    Java实现蓝桥杯 算法训练 ALGO-15 旅行家的预算
    Java实现蓝桥杯 算法训练 ALGO-15 旅行家的预算
    Java实现蓝桥杯 算法训练 ALGO-15 旅行家的预算
    Java 蓝桥杯 算法训练(VIP) 最大体积
    Java 蓝桥杯 算法训练(VIP) 最大体积
    Java 蓝桥杯 算法训练(VIP) 最大体积
    Java 蓝桥杯 算法训练(VIP) 最大体积
  • 原文地址:https://www.cnblogs.com/apelles/p/11918275.html
Copyright © 2011-2022 走看看