利用flex来布局顶部菜单栏

安装vscode插件

css peek:快速定位到css定义的位置
微软的live preview 替换live server 因为这个好像不支持utf8

前置css知识

  • span标签是一个行内容器,用于标记文本的一部分,或文档的一部分。它与 div 非常相似,但 div 是块级元素,而 span 是行内元素。
  • p段落标签,可设置line-height属性
  • text-align 设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似,但是是水平方向的。
  • padding-block 设置块元素的上下内边距,在这里设置为 padding-block: 0.875rem;
  • margin-inline 设置内容的左右边距,margin-inline: auto;意为左右居中。 margin-right: auto; 意为左对齐
  • justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content
  • align-items 属性设置所有直接子元素。在 Flexbox 中,它控制子元素在交叉轴上的对齐。在 Grid 布局中,它控制了子元素在其网格区域内的块向轴上的对齐。
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items
  • calc 计算,注意变量与计算符号之间用空格隔开,否则会因为歧义出错 calc(var(--header-height) + 2.5rem);
  • column-gap 属性用来设置元素列之间的间隔(gutter)大小。同理 grid-gap: 20px; 就是元素行列之间的距离
  • flex-grow 设置flex中直接项所占比例 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow 其中有测试的网站 https://developer.mozilla.org/zh-CN/play
  • grid样式设置repeat(3, 1fr):repeat 函数用于重复指定的值。在这里,它重复了三次 1fr。1fr 是一个网格单位,表示可用空间的一等份。因此,repeat(3, 1fr) 将网格容器的宽度划分为三等份,每列占据一份。这通常用于响应式设计,因为你可以根据需要改变列的数量或大小,以适应不同的屏幕尺寸和布局需求。
  • 菜单通常用ul无序列表
  • grid布局详细解释 https://segmentfault.com/a/1190000022713952 配合 msdn https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column

设置内容居中

.container {max-width: 1320px;margin-inline: auto;padding-inline: 0.75rem;
}

设置容器中元素布局

.header__container{display: flex;justify-content: space-between;align-items: center;
}

子绝父相实现搜索框

div.search>input.form__input+button.search__btn

.search {width: 340px;position: relative;
}
.form__input {width: 100%;
}
.form__input {border: 1px solid var(--border-color-alt);padding-inline: 1rem;height: 45px;border-radius: 0.25rem;font-size: var(--small-font-size);
}
.search__btn {position: absolute;top: 24%;right: 1.25rem;cursor: pointer;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35765.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构——带头双向循环链表(c语言实现)

目录 1.单链表和双向链表对比 2.双向链表实现 2.1 创建新节点 2.2 链表初始化 2.3 尾插 2.4 头插 2.5 尾删 2.6 头删 2.7 查找 2.8 指定位置后插入数据 2.9 删除指定节点 2.10 销毁链表 2.11 打印链表 前言: 我们在前几期详细地讲解了不带头单…

vue下载本地xls模版静态文件

需求导入的下载模版不想放在服务器放在前端本地下载静态资源最简单的方式直接访问 public 文件夹下的文件 方法一:使用静态文件路径 将文件放在 public 文件夹中: 把你的文件从 src/assets 移动到 public 文件夹。例如:public/template.xls。…

【高考志愿】电气工程

目录 一、专业概述 二、专业特点 三、就业前景 四、选择学校 高考志愿选择电气工程是一个极具智慧和远见的决定,因为电气工程在当今社会中扮演着至关重要的角色。以下是对电气工程专业更为详细的解析: 一、专业概述 电气工程及其自动化专业&#xf…

一个项目学习Vue3---快速认识JSX

JSX(JavaScript XML)是一种用于在React框架中编写UI组件的语法扩展。它允许开发者将HTML标记直接嵌入到JavaScript代码中,使得在React组件中编写界面变得更加直观和高效。在编译过程中,JSX会被转换成普通的JavaScript对象&#xf…

工业液晶屏G065VN01 V2规格书简介

G065VN01 V2 背面实物图 2. 概述 G065VN01 V2 专为 VGA (640 x RGB x 480) 分辨率和 16.2M(RGB 6 位 FRC)或 262k 色(RGB 6 位)的工业显示应用而设计。它由TFT-LCD面板、驱动IC、控制和电源电路板以及包括…

css3实现水纹进度条

其实有一个mask-image属性 挺有意思,在元素上面实现遮罩层的效果,不过这玩意有些兼容性问题 需要处理,所以单纯可以通过渐变色的方式来实现 同时加上动画效果 .jianbian {width: 100%;height: 16px;background-color: #eee;display: flex;bor…

华三中小企业组网

一、组网需求 在中小园区中,S5130系列或S5130S系列以太网交换机通常部署在网络的接入层,S5560X系列或 S6520X系列以太网交换机通常部署在网络的核心,出口路由器一般选用MSR系列路由器。 核心交换机配置VRRP保证网络可靠性。园区网中不同的…

MySQL进阶——锁

目录 1全局锁—一致性数据备份 1.1全局锁介绍 1.2语法 1.3 一致性备份案例 1.4 全局锁特点 2表级锁 2.1表锁 2.1.1共享读锁 2.1.2独占写锁 2.2元数据锁 2.3元数据锁 MySQL中的锁,按照锁的粒度分,分为以下三类: (1&…

GitLab配置免密登录之后仍然需要Git登录的解决办法

GitLab配置免密登录之后仍然需要Git登录的解决办法 因为实习工作需要,要在本地拉取gitlab上的代码,设置了密钥之后连接的时候还需要登录的token,摸索之后有了下面的解决办法。 方法一: 根据报错的提示,去网站上设置个人…

动手学自然语言处理:解读大模型背后的核心技术

自从 ChatGPT 横空出世以来,自然语言处理(Natural Language Processing,NLP) 研究领域就出现了一种消极的声音,认为大模型技术导致 NLP “死了”。在某乎上就有一条热门问答,大家热烈地讨论了这个问题。 有…

【STM32】看门狗

1.看门狗简介 看门狗起始就是一个定时器,从功能上说它可以让微控制器在程序发生意外(程序进入死循环或跑飞)的时候,能重新恢复到系统刚上电状态,以保障系统出问题的时候可以重启一次。说的简单一点,看门狗…

用英文介绍孟买:Mumbai India‘s Transforming MEGACITY

Mumbai: India’s Transforming MEGACITY Link: https://www.youtube.com/watch?vtWD_-Rzrn8o Summary First Paragraph: Mumbai, India’s financial and entertainment capital, is undergoing a major transformation. With its contiguous urban population nearing 25…

神经网络实现AND门:逻辑运算的智能化飞跃

神经网络实现AND门:逻辑运算的智能化飞跃 在人工智能的早期探索中,人们就梦想着用机器模拟人脑的逻辑思考能力。AND逻辑函数作为最基本的逻辑运算之一,其在神经网络中的实现,标志着我们向智能化迈出了坚实的一步。本文将详细解释…

web图片怎么导入ps?这个方法给你轻松解决!

随着WebP格式图片因其体积小、加载快的优势在网站中日益普及,对于图片编辑者来说,能够直接在Photoshop中打开和编辑WebP文件变得尤为重要。 WebPShop插件应运而生,它是一个专为Photoshop设计的模块,支持打开和保存WebP图像&#…

ATFX汇市:澳大利亚5月CPI大增0.4百分点,降息预期显著降温

ATFX汇市:据澳大利亚统计局数据,澳大利亚5月加权CPI年率为4%,高于前值3.6%,高于预期3.8%,显示出澳大利亚通胀率颇具韧性。5月份数据公布之前,月度CPI年率平均波幅不足0.1个百分点,呈现出横盘震荡…

《数字图像处理》实验报告六

一、实验任务与要求 比较采用不同的色彩空间对彩色图像处理的效果,处理包括: a)直方图均衡化 b)图像增强 二、实验报告 (一)RGB色彩空间的直方图均衡化 / 锐化处理 1、matlab 实现代码: %…

C语言 用getchar函数读入两个字符给c1和c2,然后分别用putchar函数和printf函数输出

用getchar函数读入两个字符给c1和c2,然后分别用putchar函数和printf函数输出这两个字符并且解答以下三个问题: 1.变量c1和c2应定义为字符型,整形,还是二者皆可? 2.要求输出c1和C2的ASCII码,应如何处理&am…

推荐系统(LLM去偏?) | (WSDM24)预训练推荐系统:因果去偏视角

::: 大家好!今天我分享的文章是来自威斯康星大学麦迪逊分校和亚马逊AWS AI实验室的最新工作,文章所属领域是推荐系统和因果推理,作者针对跨域推荐中的偏差问题提出了一种基于因果去偏的预训练推荐系统框架PreRec。 ::: 原文:Pre-t…

【MySQL进阶之路 | 小结篇】MySQL键约束KEY与索引INDEX

1. 键约束 关键字key 比如UNIQUE KEY就是一个唯一性约束,用于确保表中的某一列或多列的组合具有唯一性,不允许有重复值.当定义一个唯一性约束的时候,会自动创建一个唯一性索引来支持这一约束,这意味着它同时也起到了索引的作用.…

mobaXterm上传文件进度一直为0%

在这里修改了senssion、重启都没有用 最后发现是文件存放的路径中不能有中文,改了之后就成功上传了