响应式练习（参考Bootstrap官网效果）

2024-03-08 10:05:10
效果图：小于750px时
点击右侧按钮，出现下拉
大于750px 小于975px
大于975px
代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #9d9d9d;
        }
        
        .container {
            float: left;
            background-color: black;
            width: 100%;
            margin: 0px auto;
            color: #ccc;
            height: 52px;
            line-height: 52px;
        }
        
        .nav-header {
            height: 52px;
            border-bottom: 1px solid rgb(85, 84, 84);
        }
        
        .nav-header a {
            font-size: 18px;
            float: left;
            padding: 0px 18px;
        }
        
        button {
            float: right;
            line-height: inherit;
            background-color: black;
            color: #fff;
            border: 1px solid rgb(85, 84, 84);
            margin: 8px;
            display: block;
        }
        
        .bar {
            display: block;
            background-color: #fff;
            width: 22px;
            height: 2px;
            border-radius: 1px;
            margin: 7px 10px;
        }
        
        .content {
            font-size: 14px;
            color: #9d9d9d;
            display: none;
        }
        
        a:hover,
        li:hover {
            color: #eee;
        }
        
        .content {
            background-color: black;
            width: 100%;
        }
        
        .content>ul>li {
            margin: 0px 15px;
        }
        
        @media screen and (min-width:750px) {
            .nav-header {
                display: none;
            }
            .content {
                display: block;
                width: 750px;
                margin: 0 auto;
            }
            .content>ul:first-child {
                float: left;
            }
            .content>ul:last-child {
                display: none;
            }
            .content>ul>li {
                float: left;
            }
        }
        
        @media screen and (min-width:975px) {
            .content {
                width: 100%;
            }
            .content>ul:last-child {
                display: block;
                float: right;
            }
            .nav-header {
                display: block;
                float: left;
            }
            .nav-header>button {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="nav-header nav-block">
            <button>
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
            <a href="#">Bootstrap中文网</a>
        </div>

        <div class="content">
            <ul>
                <li>Bootstrap3中文文档</li>
                <li>Bootstrap4中文文档</li>
                <li>Sass教程</li>
                <li>Lass教程</li>
                <li>JQuery API</li>
                <li>网站实例</li>
            </ul>
            <ul>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
        </script>
        <script>
            // 点击按钮出现下拉菜单
            var btn = $("button");
            btn.on("click", function() {
                var content = $(".content");
                content.fadeIn();
            })
        </script>
    </div>


</body>

</html>
码农公寓

相关文章
