上一篇文章：【前端】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. 如何增加kasan 出现问题 重启

    要通过启动参数启用或配置 Kernel Address Sanitizer (KASAN) 并设置相关的行为,你可以在启动 Linux 内核时添加以下参数: 启用 KASAN:使用 kasan=1 来 ...

  2. Pytorch常用的交叉熵损失函数CrossEntropyLoss()详解

    本篇借鉴了这篇文章,如果有兴趣,大家可以看看:https://blog.csdn.net/geter_CS/article/details/84857220 1.交叉熵:交叉熵主要是用来判定实际的输出 ...

  3. JDK线程池详解（全网最全-原理解析、源码详解）

    频繁创建新线程的缺点? 不受控风险 系统资源有限,每个人针对不同业务都可以手动创建线程,并且创建标准不一样(比如线程没有名字).当系统运行起来,所有线程都在疯狂抢占资源,毫无规则,不好管控. 另外,过 ...

  4. dockerfile构建docker镜像

    1.dockerfile构建nginx镜像,准备nginx.repo文件 [root@localhost dockerfile]# cat nginx.repo [nginx] name = ngin ...

  5. schedule-执行周期性任务

    模块介绍 该模块主要用于python的任务调度,使用简便友好的python语法定期运行python函数或者一些其他的调用对象,这个模块就类似于windows的任务计划和linux的crontab,都是 ...

  6. OGRE 渲染引擎 Windows 平台构建及编译

    0 OGRE 机器人领域常见的Rviz和Gazebo可视化的渲染后端. 1 无数的坑 这东西真的可恶,官方教程文档以及项目构建的方式是真的繁琐,在Windows上. CMake 的构建必须要使用 CM ...

  7. 网页转换为PDF的方法 Python

    前言 近期有些文档是在网站上的,量非常大.加之对于纸质书的喜爱,想把他们整合到一个PDF文档中,然后交由拼多多的老熟人打印店给打一下. 但是这个网站网页转PDF有很多在线网站可以用,不过只能转一个页面 ...

  8. Python311新特性-特化指令specializing adaptive interpreter-typing-asyncio

    Python3新特性 python3.11增加了许多特性,让python更快更加安全,本文从应用层面来讲一下python3.11的这些新特性 特化自适应解析器是什么,如何利用特化写出更高性能的代码 如 ...

  9. 基于Java+SpringBoot+Mysql实现的古诗词平台功能设计与实现四

    一.前言介绍: 1.1 项目摘要 随着信息技术的迅猛发展和数字化时代的到来,传统文化与现代科技的融合已成为一种趋势.古诗词作为中华民族的文化瑰宝,具有深厚的历史底蕴和独特的艺术魅力.然而,在现代社会中 ...

  10. 22.使用Rancher2.0搭建Kubernetes集群

    使用Rancher2.0搭建Kubernetes集群 中文文档:https://docs.rancher.cn/docs/rancher2 安装Rancher2.0 使用下面命令,我们快速的安装 # ...