小屏时：

中屏及以上时：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>4-4编程练习（2）</title>

        <link rel="stylesheet" href="css/grid.css" />

        <style>

            *{

                margin: 0;

                padding: 0;

                box-sizing: border-box;

            }

            li{

                list-style: none;

            }

            a{

                text-decoration: none;

            }

            .nav-item{

                line-height: 70px;

                margin-left: 20px;

                cursor: pointer;

            }

            .nav-item:hover{

                color: red;

            }

            .nav-content{

                display: flex;

            }

            .container{

                height: 70px;

                width: 100%;

                border-bottom: 1px solid #dadada;

            }

            .btn-wrap{

                width: 70px;

                height: 70px;

                border-radius: 0 100% 0 0;

                background: red;

            }

            .btn-line{

                width: 30px;

                height: 4px;

                border-radius: 2px;

                display: block;

                background: #fff;

                position: relative;

                top: 20px;

                margin: 10px 0;

            }

            .row,

            .logo-wrap,

            .head-logo,

            img{

                height: 100%;

            }

            img{

                vertical-align: top;

                border: none;

            }

            .nav-dropdown{

                overflow: hidden;

                background: #e5e5e5;

                height: 0;

                transition: all 0.5s;

            }

            .nav-dropdown-item{

                line-height: 40px;

                display: block;

                border-bottom: 1px solid #b0b0b0;

                text-indent: 20px;

                color: #666;

                font-size: 15px;

            }

            .no-line{

                border: none;

            }

            .nav-dropdown-item:hover{

                color: red;

            }

            .nav-dropdown-item-active{

                height: 122px;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="row">

                <div class="btn-wrap col-2 d-md-none" id="btn">

                    <span class="btn-line"></span>

                    <span class="btn-line"></span>

                </div>

                <div class="nav-wrap col-md-5 d-none d-md-block ">

                    <ul class="nav-content">

                        <li class="nav-item">首页</li>

                        <li class="nav-item">关于</li>

                        <li class="nav-item">商业合作</li>

                    </ul>

                </div>

                <div class="logo-wrap col-7 col-offset-3 col-md-offset-0 col-md-7">

                    <a href="#" class="head-logo">

                        <img src="img/logo.png" />

                    </a>

                </div>

            </div>

        </div>

        <div class="nav">

            <ul class="nav-dropdown" id="nav">

                <li><a href="#" class="nav-dropdown-item">首页</a></li>

                <li><a href="#" class="nav-dropdown-item">关于</a></li>

                <li><a href="#" class="nav-dropdown-item no-line">商业合作</a></li>

            </ul>

        </div>

        <script>

            btn.onclick = function(){

                if(nav.classList.contains('nav-dropdown-item-active')){

                    nav.classList.remove('nav-dropdown-item-active');

                }else{

                    nav.classList.add('nav-dropdown-item-active');

                }

            }

        </script>

    </body>

</html>

使用栅格系统开发响应式页面——logo+nav实例的更多相关文章

  1. bootstrap快速入门笔记（二）-栅格系统，响应式类

    一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...

  2. bootstrap_栅格系统_响应式工具_源码分析

    -----------------------------------------------------------------------------margin 为负 ​使盒子重叠 ​等高 等高 ...

  3. bootstrap的栅格系统和响应式工具

    关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下 一:meta标签的引用 < ...

  4. 使用栅格系统和flex布局开发响应式页面源码

    响应式布局的原理xsmall <576pxsmall >=576pxmedium >=768pxlarge >=992pxxlarge >=1200px 接下来是效果图 ...

  5. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  6. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  7. HTML5入门教程：响应式页面布局

    摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...

  8. 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

    "使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...

  9. Windows10 UWP开发 - 响应式设计

      Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...

随机推荐

  1. C++ Primer Plus 第四章 复合类型 学习笔记

    第四章 复合类型 1. 数组概述 1.1 数组的定义 数组(array)是一种数据格式,能够存储多个同类型的值.每个值都存储在一个独立的数组元素中,计算机在内存中依次存储数组的各个元素. 数组声明的三 ...

  2. 【洛谷P1140 相似基因】动态规划

    分析 f[i][j] 表示 1数组的第i位和2数组的第j位匹配的最大值 f[1][1]=-2 f[2][1]=-2+5=3 f[3][1]=-2+5+5=8 三个决策: 1.由f[i-1][j-1]直 ...

  3. PhotoShop CC2015（64位）下载链接和破解教程

    photoshop如今有cc和cs两种版本,之前出了一个cs的破解教程和扣圆形图,有很多朋友说cc比cs好用的多,希望出个cc的下载链接和破解教程,故推出2015pscc版破解教程和下载链接. 百度云 ...

  4. (opencv10)膨胀和侵蚀(Dilation与Erosion)

    (opencv10)膨胀和侵蚀(Dilation与Erosion) 图像形态学操作 图像形态学操作-基于形状的一系列图像处理操作的合集,主要是基于集合论基础上的形态学数学 形态学有四个基本操作:腐蚀, ...

  5. post传参params与body的区别（@RequestParam和@RequestBody的区别）

    1.axios post请求  Content-Type默认为 application/x-www-form-urlencoded,我们传递参数的时,params里面的参数(简单的对象,通过 &quo ...

  6. 【进阶之路】Java的类型擦除式泛型

    Java选择的泛型类型叫做类型擦除式泛型.什么是类型擦除式泛型呢?就是Java语言中的泛型只存在于程序源码之中,在编译后的字节码文件里,则全部泛型都会被替换为原来的原始类型(Raw Type),并且会 ...

  7. 使用jwt来保护你的接口服务

    以前写过一篇关于接口服务规范的文章,原文在此,里面关于安全性问题重点讲述了通过appid,appkey,timestamp,nonce以及sign来获取token,使用token来保障接口服务的安全. ...

  8. IIS短文件名漏洞原理与挖掘思路

    首先来几个网址先了解一下 https://www.jb51.net/article/166405.htm https://www.freebuf.com/articles/web/172561.htm ...

  9. JS基础-数据类型判断typeof、instanceof、Object.prototype.toString

    typeof用在基本数据类型和函数时,返回其对应类型的描述,对于引用类型都返回为object. instanceof无法判断基本数据类型,对于引用类型数据,返回其其对应类型. Object.proto ...

  10. Kerberos相关的安全问题

    用户名枚举 原理 不存在的用户 存在的用户 通过这个比较就可以写脚本改变cname的值进行用户名枚举. 利用 https://github.com/ropnop/kerbrute/ kerbrute. ...