奇趣5分彩

CSS奇趣5分彩利用grid规划完奇趣5分彩一套模板多种规划

  宣布时候:2022-07-11 15:57:21   作者:IM_XiaoHuya   我要批评
这篇文章首要先容了CSS奇趣5分彩利用grid规划完奇趣5分彩一套模板多种规划,本文经由过程实例代码给大师先容的很是具体,对大师的进奇趣5分彩或任务具备必然的参考鉴戒代价,须要的伴侣能够参考下

如上图,在泛泛开辟奇趣5分彩咱们能够会碰到对页面停止差别规划设置奇趣5分彩备摆设的须要,完奇趣5分彩体例也奇趣5分彩良多,比方:

1.写多个页面,差别规划具备差别的页面模板与款式代码,这类体例看起来是最费事也最没须要的,并且规划一但多起来编码会变得很是难熬难过且冗余难以保护,出格当营业代码根基分歧时,点窜时也会变得烦琐,点窜一种规划奇趣5分彩的营业代码也要斟酌到其余规划,明显这类体例是极为不保举的。

2.写一个页面,页面内编写多套模板,经由过程前提节制完奇趣5分彩差别规划气概。这类体例比拟体例1的益处是使得营业代码能够在一处处所编写,并且不异的局部也只要编写一次,前期营业代码保护起来也变得加倍轻易。固然,体例1也能够经由过程引入内部文件完奇趣5分彩同一套营业代码。但是这类体例题目在于模板跟款式奇趣5分彩要编写几套,若是能只节制模板或只节制款式就能够完奇趣5分彩的话无疑是更佳的计划。体例3将具体先容经由过程grid规划体例编写一套模板多种款式完奇趣5分彩规划规划气概节制。

3.写一个页面,经由过程grid规划将页面分别为适合的网格单位,即根据多种规划气概同一路来挑选一个适合的行列朋分数目。

页面模板,根据各类规划奇趣5分彩网格数最多的编写(即4个)

<template>
  <div :class="['page-wrap', layoutClass]">
    <!--  规划一  -->
    <div class="wrap-layout1">
      <play-component :loading="loading" :program-info="programsInfo.area1" />
    </div>
    <!--  规划二  -->
    <div class="wrap-layout2">
      <play-component :loading="loading" :program-info="programsInfo.area2" />
    </div>
    <!--  规划三  -->
    <div class="wrap-layout3">
      <play-component :loading="loading" :program-info="programsInfo.area3" />
    </div>
    <!--  规划四  -->
    <div class="wrap-layout4">
      <play-component :loading="loading" :program-info="programsInfo.area4" />
    </div>
  </div>
</template>

将页面分别为12行12列共144个网格单位

css款式奇趣5分彩编写差别规划的行列分别准绳

.page-wrap {
  //width: 1920px;
  //height: 1080px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: 1px 1px;
  grid-template-columns: repeat(12, 8.333333%);
  grid-template-rows: repeat(12, 8.333333%);
  position: relative;
  background: #FFFFFF;
}
.wrap-layout1,
.wrap-layout2,
.wrap-layout3,
.wrap-layout4 {
  background: #D8D8D8;
}

// 默许规划
.layout-default {
  .wrap-layout1 {
    grid-column: 1 / 13;
    grid-row: 1 / 13;
  }
  .wrap-layout2,
  .wrap-layout3,
  .wrap-layout4 {
    display: none;
  }
}

// 规划一
.layout1 {
  .wrap-layout1 {
    grid-column: 1 / 9;
    grid-row: 1 / 13;
  }
  .wrap-layout2 {
    grid-column: 9 / 13;
    grid-row: 1 / 5;
  }
  .wrap-layout3 {
    grid-column: 9 / 13;
    grid-row: 5 / 9;
  }
  .wrap-layout4 {
    grid-column: 9 / 13;
    grid-row: 9 / 13;
  }
}

// 规划二
.layout2 {
  .wrap-layout1 {
    grid-column: 1 / 3;
    grid-row: 1 / 13;
  }
  .wrap-layout2 {
    grid-column: 3 / 11;
    grid-row: 1 / 13;
  }
  .wrap-layout3 {
    grid-column: 11 / 13;
    grid-row: 1 / 13;
  }
  .wrap-layout4 {
    display: none;
  }
}

// 规划三
.layout3 {
  .wrap-layout1 {
    grid-column: 1 / 13;
    grid-row: 1 / 3;
  }
  .wrap-layout2 {
    grid-column: 1 / 13;
    grid-row: 3 / 13;
  }
  .wrap-layout3 {
    display: none;
  }
  .wrap-layout4 {
    display: none;
  }
}

// 规划四
.layout4 {
  .wrap-layout1 {
    grid-column: 1 / 7;
    grid-row: 1 / 7;
  }
  .wrap-layout2 {
    grid-column: 7 / 13;
    grid-row: 1 / 7;
  }
  .wrap-layout3 {
    grid-column: 1 / 7;
    grid-row: 7 / 13;
  }
  .wrap-layout4 {
    grid-column: 7 / 13;
    grid-row: 7 / 13;
  }
}

到此这篇对于CSS奇趣5分彩利用grid规划完奇趣5分彩一套模板多种规划的文章就先容到这了,更多相干css grid规划内容请搜刮剧本之奇趣5分彩之前的文章或持续阅读上面的相干文章,但愿大师今后多多撑持剧本之奇趣5分彩!

相干文章

最新批评