当前位置: 首页 > news >正文

小兔鲜儿:头部区域的logo,导航,搜索,购物车

头部:logo ,导航,搜索,购物车

头部总体布局:
设置好上下外边距以及总体高度, flex布局让总体一行排列

logo:

logo考虑搜索引擎优化,所以要使用 h1中包裹 a 标签,a 里边写内容(到时候直接将字号设置为0,就不影响logo图片的展示了)

导航区域

调整 导航中 li 的布局样式

 

调整 li 中  文字样式(base.css中  文字样式字体·已经设置为 16而且文字颜色设置为了#333,所以文字样式要是这两个那么就不用再设置了)

设置鼠标悬停时,a 中出现底部绿色边框线,以及文字颜色是变成绿色。

padding加给 a ,当鼠标悬停时,边框线出现以及文字内容变成绿色

搜索区域:
浏览器优先生效 input标签宽度,所以设置 flex:1;不生效,所以先将input宽度width 置0

 

购物车区域:

  • 设置购物车字体图标
  • 设置右上角商品数量(子绝父相,设置商品数量文字左对齐,右对齐的话内容向左撑开,可能盖住其他内容)

相关文章:

小兔鲜儿:头部区域的logo,导航,搜索,购物车

头部:logo ,导航,搜索,购物车 头部总体布局: 设置好上下外边距以及总体高度, flex布局让总体一行排列 logo: logo考虑搜索引擎优化,所以要使用 h1中包裹 a 标签,a 里边写内容(到时候…...

什么是VLAN?

VLAN(Virtual Local Area Network,虚拟局域网)是一种将物理局域网划分成多个逻辑上独立的虚拟网络的技术。VLAN不依赖于设备的物理位置,而是通过逻辑划分,将局域网内的设备虚拟地组织到同一组。这种技术允许网络管理员…...

WPS计算机二级•数据查找分析

听说这里是目录哦 通配符🌌问号(?)星号(*)波形符(~) 排序🌠数字按大小排序以当前选定区域排序以扩展选定区域排序 文字按首字母排序 快速筛选分类数据☄️文字筛选数字筛选颜色筛选…...

计算机网络 (28)虚拟专用网VPN

前言 虚拟专用网络(VPN)是一种在公共网络上建立私有网络连接的技术,它允许远程用户通过加密通道访问内部网络资源,实现远程办公和安全通信。 一、基本概念 定义:VPN是一种通过公共网络(如互联网&#xff09…...

【Python学习(七)——序列、列表、元组、range、字符串、字典、集合、可变类型不可变类型】

Python学习(七)——序列、列表、元组、range、字符串、字典、集合、可变类型&不可变类型 本文介绍了序列、列表、元组、range、字符串、字典、集合、可变类型&不可变类型,仅作为本人学习时记录,感兴趣的初学者可以一起看…...

MATLAB常用建模方法——常用非参数检验

常用非参数检验 在用样本数据对正态总体参数作出统计判断(例如参数估计和假设检验)时,要求样本数据应服从正态分布,这种数据分布类型已知的总体参数的假设检验称为参数假设检验。 与参数假设检验相对应的还有非参数假设检验&#…...

【多线程初阶篇 ²】创建线程的方式

目录 二、多线程代码 1.继承Thread类 2.实现Runnable接口 3.匿名内部类 3.1 创建Thread⼦类对象 3.2 创建Runnable⼦类对象 4.lambda表达式(推荐) 小结: 🔥面试题:Java中创建线程都有哪些写法 二、多线程代码 …...

纵览!报表控件 Stimulsoft Reports、Dashboards 和 Forms 2025.1 新版本发布!

Stimulsoft 2025.1 新版发布,旨在增强您创建报告、仪表板和 PDF 表单的体验!此最新版本为您带来了许多改进和新功能,使数据处理更加高效和用户友好。亮点包括对 .NET 9 的支持、Microsoft Analysis Services 的新数据适配器、发布向导中适用于…...

游戏引擎学习第75天

仓库:https://gitee.com/mrxiao_com/2d_game_2 Blackboard: 处理楼梯通行 为了实现楼梯的平滑过渡和角色的移动控制,需要对楼梯区域的碰撞与玩家的运动方式进行优化。具体的处理方式和遇到的问题如下: 楼梯区域的过渡: 在三维空间中&#x…...

Java 23 集合框架详解:Set 接口及实现类(HashSet、TreeSet、LinkedHashSet)

📚 Java 23 集合框架详解:Set 接口及实现类(HashSet、TreeSet、LinkedHashSet) 📖 概述 Set 是 Java 集合框架中用于存储 无序、不重复元素 的接口。它的实现类包括 HashSet、TreeSet 和 LinkedHashSet,它…...

ARMv8架构 CortexR52+ 内核 coresight_soc400介绍

前言:笔者在工作中接触到了一款多核芯片,其采用的处理器为CortexR52,使用的架构为ARMv8,我通过CoreSight SOC-400组件完成了对该芯片烧录代码的开发。这里芯片型号就不透露了,本文仅介绍我自己从ARM官网上提供的R52核等…...

1.Python浅过(语法基础)

1.简介 Python是一种面向对象的解释型高级编程语言,是强类型的动态脚本语言。 解释型语言跨平台性比编译型语言(如c语言)好。 print("hello world")2.Bug,Debug 多看,多思考,多尝试、查资料、记录 3.prin…...

ioremap_nocache函数

ioremap_nocache 是 Linux 内核中用于将物理地址映射到内核虚拟地址空间的函数,特别是用于 I/O 内存映射,并且禁用缓存。 一、基本语法 void __iomem *ioremap_nocache(phys_addr_t phys_addr, size_t size); 二、基本功能 将物理内存地址映射到内核虚拟…...

【235. 二叉搜索树的最近公共祖先 中等】

题目: 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个结点 p、q,最近公共祖先表示为一个结点 x,满足 x 是 p、q 的祖先且 x 的深度尽可能大(一…...

构建智能企业:中关村科金大模型企业知识库的技术解析与应用

在数字化转型的浪潮中,企业对智能化知识管理的需求日益增长。知识作为企业的核心资产,其高效管理和应用对于提升企业运营效率和决策质量至关重要。中关村科金大模型企业知识库凭借其强大的技术架构和广泛的应用场景,成为构建智能企业的重要工…...

C++进阶——用Hash封装unordered_map和unordered_set

目录 前言 源码怎么说 为什么要兼容? 兼容的具体做法? 为什么要把Key转为整数(HashFcn)? 模拟实现 一、建立框架 二、迭代器 运算符重载 迭代器兼容大法 三、[ ]重载 四、实现不能修改key 实现及测试代码 …...

b612相机 13.5.5解锁会员hook

工具 lspatch(点击选最新版本下载) shizuku(点击选最新版本下载) SimpleHook(点击选最新版本下载) b612(自行百度下载) 效果图 教程 [{"packageName":"com.camp…...

iOS - 弱引用表(Weak Reference Table)

1. 基本数据结构 // 弱引用表的基本结构 struct weak_table_t {weak_entry_t *weak_entries; // 保存所有的弱引用对象size_t num_entries; // 当前存储的弱引用数量uintptr_t mask; // 哈希表大小掩码uintptr_t max_hash_displacement; /…...

C#语言的网络编程

C#语言的网络编程 引言 随着互联网的飞速发展,网络编程成为了软件开发中的一个重要领域。C#语言作为一种现代编程语言,凭借其丰富的类库、良好的可读性和强大的功能,广泛应用于开发各种网络应用程序。无论是Windows应用、Web应用还是云服务…...

【操作系统】课程 4调度与死锁 同步测练 章节测验

4.1知识点导图 处理机调度与死锁相关内容的文字整理: 基本准则 资源利用率:使系统中的处理机和其他所有资源都尽可能地保持忙碌状态。系统吞吐量:单位时间内系统所完成的作业数。公平性:使各进程都获得合理的CPU时间,而…...

docker详细操作--未完待续

docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...

无法与IP建立连接,未能下载VSCode服务器

如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识:什么是 B-Tree 和 BTree? B-Tree(平衡多路查找树) BTree(B-Tree 的变种) 二、结构对比:一张图看懂 三、为什么 MySQL InnoDB 选择 BTree? 1. 范围查询更快 2…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端(即页面 JS / Web UI)与客户端(C 后端)的交互机制,是 Chromium 架构中非常核心的一环。下面我将按常见场景,从通道、流程、技术栈几个角度做一套完整的分析,特别适合你这种在分析和改…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...