今天要講的是金魚都能懂的網頁切版 : 網頁頁尾版塊 NO006，
應該很少網頁沒有頁尾吧！
所以就把他學起來吧！

本篇關鍵字

• :focus、outline
• input[type="email"]
• flex-grow

範例檔

HTML

<footer>
  <div class="main-footer">
    <div class="container">
      <div class="item">
        <h3>關於 Zombie@Dump</h3>
        <ul class="nav">
          <li><a href="#"><i class="fa fa-angle-right"></i> 個人背景</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> 文章</a></li>
        </ul>
      </div>
      <div class="item">
        <h3>鐵人賽</h3>
        <ul class="nav">
          <li><a href="#"><i class="fa fa-angle-right"></i> 喪屍黑白切</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> 網頁學習雜記</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> 敬請期待</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> 可能不會有</a></li>
        </ul>
      </div>
      <div class="item">
        <h3>聯絡方式</h3>
        <ul class="nav">
          <li><a href="#"><i class="fa fa-angle-right"></i> Email</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Mobile</a></li>
          <li><a href="#"><i class="fa fa-angle-right"></i> Address</a></li>
        </ul>
      </div>
      <div class="item subs">
        <h3>訂閱電子報</h3>
        <form>
          <input type="email" placeholder="給我你的email!">
          <button>訂閱</button>
        </form>
      </div>
    </div>
  </div>
  <div class="copyright">©Zombie@Dump</div>
</footer>

CSS

.main-footer {
  padding: 100px 0;
  background-color: #488286;
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
}

.item {
  width: 270px;
  margin: 0 15px;
}

.item h3 {
  color: #fff;
  padding-bottom: .5em;
  margin-bottom: .5em;
  border-bottom: 1px dotted #fff;
}

.item li {
  margin-bottom: 15px;
}

.item li a {
  color: #fff;
  text-decoration: none;
}

.item li a:hover {
  color: #fed766;
}

.subs form {
  display: flex;
  width: 100%;
  margin: auto 0px;
}

.subs input[type="email"],
.subs button {
  border: none;
  padding: 5px 10px;
}

.subs input[type="email"]:focus,
.subs button:focus {
  outline: none;
}

.subs input[type="email"]:focus::placeholder {
  color: transparent;
}

.subs input[type="email"] {
  width: 0;
  flex-grow: 1;
  color: #f56476;
}

.subs button {
  color: #fff;
  background-color: #0a090c;
  cursor: pointer;
}

.copyright {
  background-color: #0a090c;
  padding: 5px 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

喪屍分解

• 認識 footer 標籤
• input 跟 button 被 :focus 時會有外框線，可以設定 outline: none 來解決他
• 認識 input 標籤的各種 type，例如：
  • text
  • number
  • email
  • password
  • radio
  • checkbox
  • submit
  • ...還有一堆，可以看 MDN
• flex-item 設定 flex-grow: 1，可以讓物件自動補足剩餘空間
• caret-color 可以設定 input 內游標顏色
• 常見border-style
  • solid
  • dotted
  • dashed

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是表格。