10. 參考資料

• 所有事件類型與事件物件

• ECMAScript 支援情況

• ASCII Code Table

• 信用卡產生器

web4.html：

HTML

<ul class="list">
  <li>
    <button type="button" class="del">刪除</button>
    這是文字1
  </li>
  <li>
    <button type="button" class="del">刪除</button>
    這是文字2
  </li>
</ul>

CSS

ul.list{
  border: 1px solid black;
}

ul.list > li{
  border: 1px solid red;

  /*
  opacity: 1;
  transition: opacity 1s;
  */
}

/*
ul.list > li.-remove{
  opacity: 0;
}
*/

ul.list > li::after{
  content: "";
  display: block;
  clear: both;
}
button.del{
  float: right;
}
/*
button[disabled].del{
  background-color: black;
  color: white;
}
*/

web5.html：

HTML

<div class="parent_block">

  <div class="left_block">
    <ul class="list">
      <li><a href="#" id="link1" class="link -on">一</a></li>
      <li><a href="#" id="link2" class="link">二</a></li>
      <li><a href="#" id="link3" class="link">三</a></li>
    </ul>
  </div>

  <div class="right_block" id="scroll_block">
    <div class="each_block" data-id="link1">內容一</div>
    <div class="each_block" data-id="link2">內容二</div>
    <div class="each_block" data-id="link3">內容三</div>
  </div>

</div>

CSS

*{
  box-sizing: border-box;
}
div.parent_block{
  border: 1px solid black;
  display: flex;
}
div.left_block{
  border: 1px solid red;
  flex-basis: 100px;
  flex-shrink: 0;
}
div.left_block a.link{
  text-decoration: none;
}
div.left_block a.-on{
  background-color: black;
  color: white;
}
div.right_block{
  border: 1px solid blue;
  flex-grow: 1;
  height: 300px;
  overflow-y: auto;
  
  /* offsetTop 才會相對於這個元素 */
  position: relative;
}
div.each_block{
  border: 1px solid orange;
  
  height: 500px;
  /* min-height: 100%; */
  /* min-height: calc(100% + 2px); */
}

元素寬高：

web6.html

HTML

<form action="#" method="#" id="the_form">

  <div class="group">
    <label>帳號：</label>
    <input type="text" id="account">
  </div>

  <div class="group">
    <label>email：</label>
    <input type="email" id="email">
  </div>

  <div class="group">
    <label>信用卡卡號：</label>
    <input type="text" class="card" maxlength="4">
    <input type="text" class="card" maxlength="4">
    <input type="text" class="card" maxlength="4">
    <input type="text" class="card" maxlength="4">
  </div>

  <div class="group">
    <label>商品數量：</label>
    <input type="range" min="1" max="10" value="5" class="product_count">
    <span class="num" data-default="5">5</span>
  </div>

  <div class="group">
    <button type="reset">清空</button>
    <button type="submit">資料送出</button>
  </div>

</form>

<script>
  // 一、介面調整：
  // 1、信用卡介面：keydown、keyup(或change)、focus
  // 2、商品數量的介面：input 事件
  // 3、表單：reset 事件
  
  // 二、資料送出時(submit)，資料驗證：
  // 1、帳號必填
  // 2、email：符合格式
  // 3、信用卡卡號：符合格式
</script>

CSS

* {
  box-sizing: border-box;
}
input.card{
  width: 42px;
}
.-error{
  border: 1px solid red;
}