ナレッジポイントコードアプリケーション

HTML構造

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/center.css">
  <script src="./js/index.js"></script>
</head>

<body>
  <!-- 三栏式布局 -->
  <div class="container">
    <div class="left">这是左边栏</div>
    <div class="middle">这是中边栏</div>
    <div class="right">这是右边栏</div>
  </div>
  <!-- 垂直居中 -->
  <div class="div1">
    <div class="div2"></div>
  </div>
  <div class="rotate">
    旋转
  </div>
</body>

</html>

垂直方向の中央に配置

/* 方案1 */
.div1{
  margin-top: 20px;
  margin-left: 20px;
  width: 100px;
  height: 100px;
  border: 1px black solid;
  position: relative;
}
.div2{
  width: 40px;
  height: 40px;
  border: 1px black solid;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/* 方案2 */
.div1{
  margin-top: 20px;
  margin-left: 20px;
  width: 100px;
  height: 100px;
  border: 1px black solid;
  display: flex;
  /* 纵向 */
  align-items: center;
  /* 横向 */
  justify-content: center;
}
.div2{
  width: 40px;
  height: 40px;
  border: 1px black solid;
}

3 列レイアウト

/* 方案1 */
*{
  margin:0;
  padding: 0;
}
.container{
  width:100%;
  height:100px;
  display: flex;
  /* 整体颜色灰度百分百 */
  filter: grayscale(100%); 
}
.left{
  width:200px;
  height:100%;
  background-color: red;
}
.right{
  width:120px;
  height:100%;
  background-color: orange;
}
.middle{
  height:100%;
  flex: 1;
  background-color: green;
}

/* 方案2 */
.container{
  width:100%;
  height:100px;
  position: relative;
}
.left{
  width:200px;
  height:100%;
  position: absolute;
  left: 0;
  background-color: red;
}
.right{
  width:120px;
  height:100%;
  position: absolute;
  right: 0;
  background-color: orange;
}
.middle{
  height:100%;
  position: absolute;
  left: 200px;
  right: 120px;
  background-color: green;
}

回転アニメーション

.rotate{
  width: 100px;
  height: 50px;
  margin-top: 20px;
  background-color: red;
}
.rotate:hover{
  /* transform: rotate(360deg);
  transition: transform 1s linear; */
  animation: rotate1 1s linear 1s infinite;
}
@keyframes rotate1 {
  0%{
    transform:rotate(0deg) skew(0deg) scale(1);
  }
  100%{
    transform:rotate(360deg) skew(0deg) scale(1);
  }
}

ネイティブJS構造

window.addEventListener('load', function () {
  let arr = ['v1', 'v1', 'v2', 'v3']
  let newArr = []
  arr.forEach((item) => {
    let caleData = arr.filter((el) => el === item)
    if (caleData.length > 1) {
      newArr = [...caleData]
    }
  })
  console.log(newArr)
  // 原生创建dom元素页面循环渲染数据
  newArr.forEach((item, index) => {
    // debugger
    let div1 = document.createElement('div')
    div1.setAttribute('id', `dom${index}`)
    div1.innerText = `${item}`
    document.body.appendChild(div1)
  })

  // 递归
  let obj = {
    'a.b.c': 1,
    'a.d': 2,
    e: 3
  }
  function flat(prop) {
    return Object.keys(prop).reduce((res, key) => {
      key.split('.').reduce((obj, k, index, arr) => {
        // debugger
        return (obj[k] = index == arr.length - 1 ? prop[key] : obj[k] || {})
      }, res)
      return res
    }, {})
  }
  console.log(flat(obj))

  // 随机在0-10之间取10个数排序
  function fn() {
    let arr = []
    for (let i = 0; i < 10; i++) {
      arr.push(Math.floor(Math.random(0, 10) * 10))
    }
    return arr.sort()
  }
  console.log(fn())

  let num1 = 2
  let obj1 = {
    num1: 1,
    fun1() {
      console.log(this.num1 * 2)
    },
    fun2: () => {
      console.log(this.num1 * 2 * Math.PI) // Math.PI ---圆周率3.141592653589793
    }
  }
  obj1.fun1() // 2   this指向调用的对象obj
  obj1.fun2() // NaN  箭头函数中的this指向不是指向调用的obj  箭头函数的 this 是指向父级的 this
})

ナレッジポイントコードアプリケーション

HTML構造

垂直方向の中央に配置

3 列レイアウト

回転アニメーション

おすすめ