请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

使用Grid来实现的首页图标布局

<style lang="stylus" scoped>
@import '~@styles/variables.styl'
.icons
  height: 50vw
  display grid
  grid-template-columns repeat(4,1fr)
  .icon
    overflow hidden
    position relative
    .icon-img-layer
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: .44rem
      box-sizing: border-box
      padding .1rem
      img
        height 100%
        display block
        margin 0 auto
    .icon-img-desc
      position: absolute
      left: 0
      right: 0
      bottom: 0
      height .44rem
      line-height .44rem
      text-align: center
      color $darkTextColor
</style>

跟着老师视频的思路来改写的,感觉比视频中的好理解一些。请老师和同学们指正。

正在回答 回答被采纳积分+3

1回答

提问者 hustnzj 2020-02-26 19:58:17

看了下一节视频开头,居然加了swiper后样式就失效了。。郁闷中。。

0 回复 有任何疑惑可以回复我~
  • 提问者 hustnzj #1
    最后还是用视频中老师的传统方法来做成了,flex布局的写法估计加上swiper后也会失效。
    回复 有任何疑惑可以回复我~ 2020-02-27 15:39:17
  • 刘思远2746398 回复 提问者 hustnzj #2
    我刚看这个视频,我还正想用flex布局呢,看老师这样的写法,我还真是第一次见,看的我感觉都不会写布局了?
    回复 有任何疑惑可以回复我~ 2020-04-20 21:53:15
问题已解决,确定采纳
还有疑问,暂不采纳
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号