上一篇文章：【前端】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. ssr屏幕空间射线追踪

    本轮作业中,我们需要在一个光源为方向光,材质为漫反射 (Diffuse) 的场景 中,完成屏幕空间下的全局光照效果(两次反射). 为了在作业框架中实现上述效果,基于我们需要的信息不同我们会分三阶段 着 ...

  2. 1001 Attention 和 Self-Attention 的区别（还不能区分我就真的无能为力了）

    通过 pytorch 去构建一个 transformer 的框架 不是导包,不是调包侠 注意力机制是一个很宽泛(宏大)的一个概念,QKV 相乘就是注意力,但是他没有规定 QKV是怎么来的 通过一个查询 ...

  3. Nginx UI：全新的 Nginx 在线管理平台

    前言 Nginx在程序部署中扮演着至关重要的角色,其高性能.高安全性.易于配置和管理的特点,使得它成为现代Web应用部署中不可或缺的一部分.今天大姚给大家分享一款实用的 Nginx Web UI 工具 ...

  4. jacoco代码覆盖率工具配置

    参考文章: https://blog.csdn.net/skh2015java/article/details/121775806 解决引入jacoco依赖并配置后,执行maven clean tes ...

  5. appium-解决uiautomatorviewer不能定位android7以上版本元素的方法

    上图是android10模拟器,发现我们是无法连接模拟器识别的 解决方法: 在模拟器内打开指定页面然后截图,最后保存为uix文件,然后用adb拉到本地,一共四个命令,可以保存为.bat文件快捷执行(这 ...

  6. AI五子棋_07 落子点四周棋形获取

    AI五子棋 第七步 恭喜你到达第七步! 到这一步,你对战场环境就有了充分的了解.下面我们准备打造机器大脑了.你可能已经有你自己的想法了,不过别着急,先跟着我的思路做.我会提示你解决一些基本的问题. 棋 ...

  7. NES 系统架构

    主机 NES(FC.红白机.小霸王)的系统架构可用下图表示: 系统中最核心的组件是 CPU,其它组件都可以算作 CPU 的外设.CPU 的外设包括:PPU(图像处理器).APU(音频处理器).WRAM ...

  8. mysql 备份还原命令备忘

    1.备份 mysqldump -u username -p databasename tableName > backupfile.sql 2.还原 mysql -u username -p p ...

  9. 强化学习：如何计算被环境系统截断的terminated state的value值 —— (Bootstrap returns from value estimates if episode is terminated by timeout)

    本文主题:如何计算强化学习中被环境系统截断的terminated state的value值 首先解释一下什么是强化学习中的terminated state的value值,强化学习就是一个智能体(age ...

  10. pjsip编译、说明及vs2022使用示例

    环境: window10_x64 & vs2022 pjsip版本: 2.14.1   之前整理过pjsip 2.10的编译及python使用示例: https://www.cnblogs.c ...