上一篇文章：【前端】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. day04-常用DOS命令

    打开cmd的方式 开始-W-windows系统-命令提示符 win键+R键 鼠标在任意文件夹上, shift+鼠标右键 资源管理器的地址栏前面加cmd,然后回车 管理员方式运行:选择命令提示符右键以管 ...

  2. Oracle 数据泵 定时全库备份&&删除备份文件【注意点】

    一.概述 在给客户部署的数据泵备份&&删除过期备份脚本时,脚本删除部分未生效,导致存储空间占用非常大. 手动执行该删除命令时,执行成功: 最后发现需要增加 find.rm 等命令的PA ...

  3. 噢！JavaScript (2)：对数组要小心使用delete

    最近在重写我自己的静态博客生成器,虽然遇到的小问题挺多,但今早这个问题令我印象深刻. 发现问题 博客的文章基础数据储存在main.json中,其中专门有数组dateindex来储存经过排列后的文章顺序 ...

  4. python语言中三个奇妙的返回值

    从公众号看到的,记录下 d = {} d[5] = "test1" d[5.0] = "test2" d["5"] = "test ...

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

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

  6. 蚂蚁图团队GraphRAG支持社区摘要——Token相比微软直降50%

    今年5月份,我们在DB-GPT v0.5.6版本发布了蚂蚁首个开源GraphRAG框架,支持了多种知识库索引底座,并在文章<Vector | Graph:蚂蚁首个开源GraphRAG框架设计解读 ...

  7. SaaS多租户的3种隔离模式

    大家好,我是汤师爷~ 在SaaS模式下,多租户之间的资源隔离是基础且关键的一环.SaaS服务商需要在确保运营效率和控制成本的前提下,搭建一个让多个租户能够同时访问的共享环境. 虽然大家都在用同一套Sa ...

  8. [Windows]文件搜索利器Everything(附zip)

    前言 写代码过程中,老大突然发一条信息 老大:这周周报发一下. 我:好的. 然后我就 显示桌面 打开-我的电脑 找到E盘,找到周报文件夹 寻找到所有周报中今天的周报 复制发送 当我用上Everythi ...

  9. 初识GO语言--并发

  10. 基于surging 的木舟平台如何通过Tcp或者UDP网络组件接入设备

    一.概述 上篇文章介绍了木舟通过HTTP网络组件接入设备,那么此篇文章将介绍如何利用Tcp或者UDP网络组件接入设备. 木舟 (Kayak) 是什么? 木舟(Kayak)是基于.NET6.0软件环境下 ...