上一篇文章：【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小

本文是基于上一篇文章的补充。

效果如下

HTML源码

点击查看HTML代码 
<!DOCTYPE html>

<html lang="zh-cn">

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

    <link href="css/index.css" rel="stylesheet" type="text/css">

</head>

<body>

    <header>

        <div class="box-logo">

            <a href="#" alt="资源分享站" class="logo">

                <div class="img-logo-box img-logo"

                    style="background: url(images/LOGO.png) no-repeat;background-size: 100% auto;">

                </div>

                <div class="img-logo-box text-logo">

                    萌狼工作室

                </div>

            </a>

            <nav>

                <ul>

                    <li><a href="#">资源</a></li>

                    <li><a href="#">首页</a></li>

                    <li><a href="#">网站</a></li>

                    <li><a href="#">关于</a></li>

                </ul>

            </nav>

            <div class="header-info">

                <a href=""><img src="data:images/search.svg" alt="搜索"/></a>

                <a href=""><img src="data:images/msg.svg" alt="消息"/></a>

                <a href=""><img src="data:images/moon.svg" alt="夜间模式"/></a>

                <a href="" class="sm-show"><img src="data:images/menu.svg" alt="夜间模式"/></a>

                <div class="btn-login">

                    <a>登录</a>

                </div>

            </div>

        </div>

    </header>

</body>

</html>

CSS源码

点击查看CSS代码 
:root{

--font-main-color:black;

--font-hover-color:red;

--font-btn-color:snow;

--background-btn-color:red;

--background-color:snow;

--shadow-color:rgba(0,0,0,0.1);

}

*{

    margin: 0;

    padding: 0;

}

/*标签控制*/

a{

    text-decoration: none;

}

li{

    list-style: none;

}

/*标签控制结束*/

/*头部<header>开始*/

header{

    margin: 0;

    padding: 0;

    width:100%;

}

header .box-logo{

    width: 100%;

    display: flex;

    /*背景颜色*/

    background-color: var(--background-color);

    /*阴影*/

    box-shadow: 1px 1px 1px 1px var(--shadow-color);

}

header .logo{

    margin: 0;

    padding:0.25em 1em;

    height: 100%;

    font-size: 1.5em;

    /*设置字体颜色*/

    color:var(--font-main-color);

}

header .logo .img-logo-box{

    /*LOGO和文字在一行*/

    display: inline-block;

    /*LOGO和文字上下居中，实现对齐*/

    vertical-align:middle;

}

header nav{

    /*为了让它右边的元素靠右*/

    flex: 1;

    padding-left: 1em;

    /*因为父元素是flex，所以使用margin:auto可以实现内容垂直居中*/

    margin: auto;

    font-size: 1.3em;

}

header nav ul{

    display: block;

    margin: auto;

    vertical-align: middle;

}

header nav ul li{

    margin: auto 0.25em;

    /*让li标签横向排列*/

    display: inline-block;

}

header nav ul li a{

    /*设置字体颜色*/

    color:var(--font-main-color);

}

header nav ul li:hover a{

    color:var(--font-hover-color);

    text-decoration: var(--font-main-color) 1px;

}

header .header-info{

    display: contents;

    margin: auto;

    padding-right: 1.5em;

}

header .header-info a{

    margin: auto 0.5em;

}

header .header-info .btn-login{

    margin: auto 1em;

    /*因为父元素设置了display:contents，所以这里就用设置display:inline-block;*/

    /*display: inline-block;*/

    color:var(--font-btn-color);

    background-color: var(--background-btn-color);

    border-radius: 5px;

}

/*默认*/

@media (min-width: 767px){

    header .logo .img-logo{

        height: 1.5em;

        width: 1.5em;

    }

    header .logo .text-logo{

        font-size: 1.3em;

    }

    header .header-info .sm-show

    {

        display: none;

    }

    header .header-info a img{

        width: 1.5em;

    }

    header .header-info .btn-login a{

        font-size: 1.25em;

    }

}

/* 横向放置的手机和竖向放置的平板之间的分辨率 */

@media (max-width: 767px) {

    header .logo{

        /*nav不显示时，靠logo将最右边的元素挤到最右*/

        flex:1;

    }

    header .logo .img-logo{

        height: 1.2em;

        width: 1.2em;

    }

    header .logo .text-logo{

        font-size: 1em;

    }

    header nav{

        display: none;

    }

    header .header-info a img{

        width: 1.2em;

    }

    header .header-info .btn-login a{

        font-size: 1em;

    }

}

/* 横向放置的手机及分辨率更小的设备 */

@media (max-width: 480px) {

    header .logo{

        /*nav不显示时，靠logo将最右边的元素挤到最右*/

        flex:1;

    }

    header .logo .img-logo{

        height: 1em;

        width: 1em;

    }

    header .logo .text-logo{

        font-size: 0.8em;

        display: none;

    }

    header nav{

        display: none;

    }

    header nav{

        display: none;

    }

    header .header-info a img{

        width: 1em;

    }

    header .header-info .btn-login a{

        font-size: 1em;

    }

}

/*

【web】一个自适应的导航栏前端设计（只含HTML+CSS）的更多相关文章

  1. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 通栏导航栏的制作，综合使用CSS属性，代码不超过30行

    这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...

  3. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

  4. [前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

    在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...

  5. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

  6. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  7. iOS系统中导航栏的转场解决方案与最佳实践

    背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...

  8. 前端设计的常用属性，CSS的盒模型，页面布局的利器

    在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...

  9. android布局学习-使用FrameLayout和LinearLayout制作QQ空间底部导航栏

    [声明:本博客通过学习“J灬叶小超 ”博客而写,链接:http://www.cnblogs.com/yc-755909659/p/4288260.html] --------------------- ...

  10. 【转】【iOS】导航栏那些事儿

    原文网址:http://www.jianshu.com/p/f797793d683f 参考文章 navigationItem UINavigationItem UINavigationBar UIBa ...

随机推荐

  1. Android usb广播 ACTION_USB_DEVICE_ATTACHED流程源码分析

    整体流程图 大概意思就是UsbHostManager启动监控线程,monitorUsbHostBus会调用usb_host_run函数(使用inotify来监听USB设备的插拔)不停的读取bus总线, ...

  2. 04-react的基本：条件渲染

    import reactDom from "react-dom" // 条件渲染 if else let loading = false // 写一个函数用于加载 const lo ...

  3. Kafka原理剖析之「Purgatory（炼狱 | 时间轮）」

    一.前言 本文介绍一下Kafka赫赫有名的组件Purgatory,相信做Kafka的朋友或多或少都对其有一定的了解,至少是听过它的名字.那它的作用是什么呢,用来解决什么问题呢?官网confluent早 ...

  4. 洛谷P1219八皇后问题

    [USACO1.5] 八皇后 Checker Challenge 题目链接 题目描述 一个如下的 \(6 \times 6\) 的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对 ...

  5. KubeSphere DevOps 系统功能实战

    James,Java 工程师,喜欢学习和记录当下热门技术并验证其优势和缺点,以及当下火热的云原生解决方案的实施与推广. 前言 基于 Jenkins 的 KubeSphere DevOps 系统是专为 ...

  6. 轻量级网络-RepVGG 论文解读

    背景知识 VGG 和 ResNet 回顾 MAC 计算 卷积运算与矩阵乘积 点积 ACNet 理解 ACBlock 的 Pytorch 代码实现 摘要 RepVGG 模型定义 RepVGG Block ...

  7. linux 排查项目问题常用命令

    查看日志 头部开始查询文件file.log前100中包含'测试'的记录前后一行,并形成文件为new.loghead -n 100 file.log|grep -1 '测试' > new.log ...

  8. byte,关于127+1等于多少

    public class Main { public static void main(String[] args) { Integer i1 = 100; Integer i2 = 100; Int ...

  9. 19、解析2_1（链、chunk、锁）

    解析 shared pool 图解: library cache里面,暂时可以认为存储着: 1.SQL以及对应的执行计划(所占空间比较小): 2.存储过程.函数.触发器.包,它们编译后的对象(所占空间 ...

  10. antlr的使用

    我从以下几个问题入手介绍ANTLR的相关知识. 1 ANTLR是什么? ANTLR, ANother Tool for Language Recognition, 是一个可以接受含有语法描述的语言描述 ...