welcome

ricardo-simple

导航

微博底部栏分析

![微博底部栏]( https://document.youkeda.com/P3-3-HTML-CSS/4/1.jpg?x-oss-process=image/resize ,w_800/watermark,image_d2F0ZXJtYXNrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzEwMA==,t_60,g_se,x_10,y_10)

微博底部栏的开发和副导航类似

justify-content: space-between;

主要使用flex的水平布局

第二项是头像,宽度不一样

footer.footer {
  .item {
    // 将每一项的宽度设置为固定宽度
    // px2rem是处理尺寸的自定义函数
    width: px2rem(30);
  }
}

align-self可以让子元素不遵循父元素的对齐方式
图标大小不一样,使用align-items:flex-end

posted on 2022-04-27 21:07  RicardoSimple  阅读(96)  评论(0)    收藏  举报