欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 创投人物 > 小兔鲜儿:头部区域的logo,导航,搜索,购物车

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

2025/2/22 2:05:21 来源:https://blog.csdn.net/m0_63178019/article/details/144970422  浏览:    关键词:小兔鲜儿:头部区域的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

 

购物车区域:

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词