头部:logo ,导航,搜索,购物车
头部总体布局:
设置好上下外边距以及总体高度, flex布局让总体一行排列
logo:
logo考虑搜索引擎优化,所以要使用 h1中包裹 a 标签,a 里边写内容(到时候直接将字号设置为0,就不影响logo图片的展示了)
导航区域
调整 导航中 li 的布局样式
调整 li 中 文字样式(base.css中 文字样式字体·已经设置为 16而且文字颜色设置为了#333,所以文字样式要是这两个那么就不用再设置了)
设置鼠标悬停时,a 中出现底部绿色边框线,以及文字颜色是变成绿色。
padding加给 a ,当鼠标悬停时,边框线出现以及文字内容变成绿色
搜索区域:
浏览器优先生效 input标签宽度,所以设置 flex:1;不生效,所以先将input宽度width 置0
购物车区域:
- 设置购物车字体图标
- 设置右上角商品数量(子绝父相,设置商品数量文字左对齐,右对齐的话内容向左撑开,可能盖住其他内容)