当前位置: 首页 > 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

 

购物车区域:

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

http://www.lryc.cn/news/516486.html

相关文章:

  • 什么是VLAN?
  • WPS计算机二级•数据查找分析
  • 计算机网络 (28)虚拟专用网VPN
  • 【Python学习(七)——序列、列表、元组、range、字符串、字典、集合、可变类型不可变类型】
  • MATLAB常用建模方法——常用非参数检验
  • 【多线程初阶篇 ²】创建线程的方式
  • 纵览!报表控件 Stimulsoft Reports、Dashboards 和 Forms 2025.1 新版本发布!
  • 游戏引擎学习第75天
  • Java 23 集合框架详解:Set 接口及实现类(HashSet、TreeSet、LinkedHashSet)
  • ARMv8架构 CortexR52+ 内核 coresight_soc400介绍
  • 1.Python浅过(语法基础)
  • ioremap_nocache函数
  • 【235. 二叉搜索树的最近公共祖先 中等】
  • 构建智能企业:中关村科金大模型企业知识库的技术解析与应用
  • C++进阶——用Hash封装unordered_map和unordered_set
  • b612相机 13.5.5解锁会员hook
  • iOS - 弱引用表(Weak Reference Table)
  • C#语言的网络编程
  • 【操作系统】课程 4调度与死锁 同步测练 章节测验
  • 如何查看已经安装的python版本和相关路径信息
  • 设计模式-结构型-适配器模式
  • 鸿蒙操作系统(HarmonyOS)
  • 基于海思soc的智能产品开发(camera sensor的两种接口)
  • 解密LLM结构化输出:代码示例与原理分析
  • Go语言的数据类型
  • 复杂园区网基本分支的构建
  • 如何很快将文件转换成另外一种编码格式?编码?按指定编码格式编译?如何检测文件编码格式?Java .class文件编码和JVM运行期内存编码?
  • 《C++11》Lambda 匿名函数从入门到进阶 优缺点分析 示例
  • 连接Milvus
  • Linux——修改文件夹的所属用户组和用户