1F - 9x9 乘法表

竹白記事本，筆記紀錄。

tags: JS 地下城

BOSS 弱點

1. 【特定技術】需使用 JS for 迴圈技巧，裡頭數字不能直接寫在 HTML 上，需使用 JS 印出。
2. 需使用 HTML、CSS、JS 技術
3. 介面需與設計稿一致

下載資源

UI 線上設計稿

排版

• Bootstrap 4 格線系統
• flex
• BEM 命名規範

<div class="container h-mt-80 h-mb-40">
  <div class="row">
    <div class="col-md-6 col-xl-4 h-mb-40">
      <div class="titleBlock">
        <h1 class="titleBlock__title">九九乘法表</h1>
        <span class="titleBlock__subTitle">MULTIPLICATION CHART</span>
        <div class="titleBlock__decos">
          <div class="titleBlock__deco"><span></span></div>
          <div class="titleBlock__deco"><span></span></div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xl-4 h-mb-40">
      <div class="numBlock">
        <ul class="numBlock__list">
          <li class="numBlock__item"><h2 class="numBlock__listTitle">2</h2></li>
          <li class="numBlock__item"><p class="numBlock__number">2 × 1 ＝ 2</p></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<footer class="footer">
  <div class="container">
    Copyright © 2019 HexSchool. All rights reserved.
  </div>
</footer>

CSS Tools: Reset CSS

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');

// variables
$primary: #2eb738;
$secondary: #f0f0f0;
$light: white;

// mixin
@mixin full {
  width: 100%;
  height: 100%;
}

// reboot
*,
*::after,
*::before {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: $primary;
}

body {
  background-color: $secondary;
  min-width: 500px;
  color: $primary;
  font-family: Helvetica, 'Noto Sans TC', sans-serif;
}

// h
.h-mt-80 {
  margin-top: 80px !important;
}

.h-mb-40 {
  margin-bottom: 40px !important;
}

// m
.titleBlock {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  max-width: 350px;
  height: 366px;

  &__title {
    font-size: 56px;
    line-height: 84px;
    font-weight: 600;
  }
  &__subTitle {
    font-size: 24px;
    line-height: 36px;
  }

  &__decos {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  &__deco {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    > span {
      width: 280px;
      border: 0.5px solid $primary;
    }
    &::after,
    &::before {
      content: 'x';
    }
  }
}

.numBlock {
  border-radius: 100px 0px 30px 0px;
  box-shadow: 0px 3px 10px #d8d8d8;
  background-color: $light;
  margin: 0 auto;
  padding: 64px 40px;
  max-width: 350px;
  height: 366px;

  &__list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  &__item {
    display: flex;
    align-items: center;
    height: (100%/6);
    &:nth-child(1) {
      justify-content: center;
      height: (100%/6 * 3);
    }
  }

  &__listTitle {
    font-size: 128px;
    text-align: center;
    font-weight: bold;
    text-shadow: 4px 3px 0 #f0f0f0;
  }

  &__number {
    font-size: 24px;
  }
}

.footer {
  background-color: $primary;
  color: $light;
  text-align: right;
  padding: 8px 0;
}

攻略 1

原生 JS

攻略 2

使用 Vue.js

攻略 3

CodePen

CodePen