CSS——响应式布局案例以及点击出现下拉框实现过程

文章目录

• 前言
• 一、示例图
• 二、实现过程
  • 1.HTML结构
  • 2.CSS样式
  • 3.JS行为
• 总结

---

前言

本文主要介绍有关响应式布局的案例实现过程。

---

一、示例图

---

二、实现过程

1.HTML

代码如下（示例）：

    <!-- 外部容器 -->
    <header>
        <!-- 内部容器 -->
        <nav class="container">
            <!-- logo区域 -->
            <div class="logo">
                <a href="#">Bootstrap 中文文档</a>
            </div>
            <!--导航条左侧区域 -->
            <ul class="nav-left">
                <li>
                    <a href="#">入门</a>
                </li>
                <li>
                    <a href="#">全局 CSS 样式</a>
                </li>
                <li>
                    <a href="#">组件</a>
                </li>
                <li>
                    <a href="#">JavaScript 插件</a>
                </li>
                <li>
                    <a href="#">定制</a>
                </li>
                <li>
                    <a href="#">网站实例</a>
                </li>
                <li>
                    <a href="#">免费模板</a>
                </li>
            </ul>
            <!-- 导航条右侧区域 -->
            <ul class="nav-right">
                <li class="dropdown-box" onclick="dis()">
                    <a href="javascript:;">
                        v3
                        <span class="targgle"></span>
                    </a>
                    <!-- 下拉框 -->
                    <div class="dropdown-menu" style="display:none;">
                        <ul>
                            <li>
                                <a href="#">v5</a>
                            </li>
                            <li>            
                                <a href="#">v4</a>
                            </li>
                            <li class="line"></li>
                            <li class="special">
                                <a href="#">v3</a>
                            </li>
                            <li>
                                <a href="#">v2</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">优站精选</a>
                </li>
                <li>
                    <a href="#">官方博客</a>
                </li>
                <li>
                    <a href="#">返回 Bootstrap 中文网</a>
                </li>
            </ul>
        </nav>
    </header>
    </div>

2.CSS

代码如下（示例）：

/* 设置全局字体样式以及背景色 */
body {
    background-color: #6f5499;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 外部容器样式设置 */
header {
    width: 100%;
    height: 50px;
    background-color: #fff;
}

/* 内部容器样式设置 */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }

    .nav-left {
        float: left;
        margin: 0;
    }

    .nav-right {
        float: right;
        margin-right: -15px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .nav-right {
        display: none;
    }
}

@media (min-width: 500px) and (max-width: 520px) {
    .nav-left {
        display: none;
    }
}

.container {
    width: 1140px;
    height: 50px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}

.logo {
    float: left;
}

.logo>a {
    font-size: 18px !important;
}

.nav-left>li {
    float: left;
}

.nav-right {
    float: right;
}

.nav-right>li {
    float: left;
}

.logo>a,
.nav-left>li>a,
.nav-right>li>a {
    display: block;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #563d7c;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

/* 导航条右侧V3小三角形设置 */
.dropdown-box {
    position: relative;
    margin-right: 10px;
}

.targgle {
    position: absolute;
    top: 25px;
    margin-left: 5px;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/*导航条右侧V3下拉框样式设置  */
.dropdown-menu {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 10;
    width: 160px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px 0;
    font-size: 14px;
    text-align: left;
}

.dropdown-menu>ul>li {
    height: 26px;
    line-height: 26px;
}

.dropdown-menu li>a {
    display: inline-block;
    width: 118px;
    padding: 0 20px;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
}

.dropdown-muen .line>span {
    height: 1px;
    width: 100%;
    overflow: hidden;
    background-color: black;
}

.special {
    background-color: rgb(51, 122, 183) !important;
}

.special>a {
    color: #fff !important;
}

.dropdown-menu li:not(.line):hover {
    background-color: #e5e5e5;
}

.line {
    height: 1px !important;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

2.JavaScript

实现点击下拉框出现效果

代码如下（示例）：

 <script>
                    let drop = document.querySelector('.dropdown-box');
                    let menu = document.querySelector('.dropdown-menu');
                     function dis(){
                      
                      if(menu.style.display == 'none'){
                          menu.style.display = 'block';
                      }else{
                          menu.style.display = 'none';
                      }
                     }
                  </script>

---

总结

以上就是今天所要和大家分享的内容啦，希望可以帮助到大家，最近会常更新些有关JavaScript的文章，对此感兴趣的小伙伴可以持续关注一下。最后，依旧诚挚祝福屏幕前的你健康快乐，平安喜乐。