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); */
}

元素寬高：