上一篇文章：【前端】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. element输入天数，获取当前时间加上天数 【时间获取】

    handleInput (val) { // console.log(this.formModel.ITEM_PM) if (!(/[^\d]/g).test(val)) { // console.l ...

  2. element设置table某个列的样式

    <el-table style="width: 100%;" height="250" :data="tableData" borde ...

  3. Vue 如何实现组件切换的时候，让组件缓存，不会被销毁

    使用场景:我们开发项目的时候,会遇到组件之间的切换,一般都是创建组件销毁组件来回切换 :但是现在需求是切换组件的时候,另一个组件不会销毁: 基于这个需求 ,我们使用 keep-live 组件包裹起来要 ...

  4. 谈一谈 vuex 中的核心属性

    1. state 保存数据的位置 : 2. mutations 唯一修改 state 数据的方式 : 3. getter 监听 state 数据的变化 : 4. actions 执行异步代码,通过 c ...

  5. ROS入门21讲(5)

    九.服务数据的定义与使用 1.服务模型 2.自定义服务数据 Person.srv string name uint8 sex uint8 age uint8 unknown = 0 uint8 mal ...

  6. 人形机器人是未来？6只手臂加AI模型，异形机器人重塑种植业。

    图源:reddit user IlustriousTea 近日,一则视频在媒体上引起了人们的讨论.国外一处苹果园里,机械嗡鸣声中,六只机械手熟练且快速地采摘成熟的苹果. 这是2018年于美国加利福尼亚 ...

  7. CSPS2024题目总结

    T1 决斗 签到题,考场上10min就做出来了. 我的方法是排序之后贪心打怪,就是用尽量小的怪去打现在场上最小的怪.用一个同侧双指针实现. \(O(nlogn)\). 另一种方法注意到了值域很小,可以 ...

  8. DB GPT本地安装部署

    源码下载 git clone https://github.com/eosphoros-ai/DB-GPT.git Miniconda环境安装 Miniconda 安装 mkdir -p ~/mini ...

  9. meta-analysis初学--笔记摘抄

    meta-analysis的定义 Meta-analysis是指对研究的研究,可以翻译为元分析.后设分析.整合分析.荟萃分析等.最常用的翻译是荟萃分析.Meta-analysis是用统计的概念与方法, ...

  10. 从0搭建一个FIFO模块-02（系统架构）

    一.异步FIFO需要注意的问题 所谓异步FIFO,指的是写时钟与读时钟可以不同步,读时钟可以比写时钟快,反之亦然.思考一下,这样会直接地造成两个问题: 由于异步FIFO的基本存储单元是双端口RAM,因 ...