品优购项目笔记1

如何做出如下效果?
导航栏
通过ul,ul中可以包含多个li
HTML
每个li都是块级元素,独占一行,如果要做出如图效果,需要让li浮动(这里没有定义宽度,让宽度根据内容自动调节)
css
从图1可以看出,每个元素之间都有距离,这里通过给li的子元素a添加padding撑开(不使用和添加宽度),但由于a是行内元素,所以需要先转换为块级元素(还有一种方式,见下一篇文章)
css

从图1可以看到最后一个元素后面还有一个符号,可以通过给最后一个元素添加after伪元素(将字体图标引入),如果元素之间有距离,可以考虑两种方式:一、在after伪元素中添加padding/margin;二、使用定位(子绝父相或其他)
注意:after伪元素是最后一个元素的子元素(伪元素一定要有content)
小符号
最后效果如图
效果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值