微信小程序

zing_2

于 2021-02-05 09:34:09 发布

阅读量90

点赞数

分类专栏： J2EE 文章标签：小程序

本文链接：https://blog.csdn.net/qq_40712058/article/details/113180449

版权

J2EE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

WXSS

在这里插入图片描述

组件

在这里插入图片描述

.index_floor{
  
  .floor_group{
    .floor_title{
      padding: 10rpx 0;
      image{
        width: 100%;
      }
    }
    .floor_list{
      // 清除浮动
      overflow: hidden;
      navigator{
        float: left;
        width: 33.33%;

      /* 后四个超链接 */
      &:nth-last-child(-n+4){
      /* 原图的宽高 232 *386 */
      // 232 / 386 = 33.33vw / height
      // 第一张图片的高度 height:33.33vw * 386 /  232
      height:33.33vw * 386 /  232 /2 ;

      border-left: 10rpx solid #fff;
      }

      /* 2 3 两个超链接 */
      &:nth-child(2),
      &:nth-child(3){
        border-bottom: 10rpx solid #fff;
      }
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }