# 網頁切版心得
# 什麼是切版?
簡單來說切版就是將==畫面分類成一個一個的區塊==，然後開始進行版面的美編、設計
主要是利用`div` `span`標籤來控制

---

### 範例:

  <div style="background-color:#abd7fa;">
    區塊一
  </div>
  <div style="background-color:#ffa088;">
    區塊二
  </div>

### 成果:
藉由 `div`將頁面分割區塊，搭配上css美化就是切版的核心概念
## 基本語法介紹
### 除了`div` `span`外，我們再介紹一些基礎的切版語法
1. `class` `id`:切版會大量分割畫面，我們需要藉由給予`id`來個別控制
2. css選擇器:在選擇器前面加`#`可以允許我們指向`id`、`.`指向`class`
3. `height` : 設定我們版面的高度
4. `width` : 設定我們版面的寬度
5. `background-color` : 設定背景顏色
6. `position`:控制版面位置，有`fixed`、`abosolute` 等不同模式

---

### 範例:

<div class="menu"></div>
<div class="content"></div>

 .menu {
     height: 100vh;
     width: 300px;
     background-color: #7C7C7C;
     float: left;
 }
.content {
     width: 100vw;
     height: 100vh;
     background-color: rgb(226, 129, 129);
 }

### 成果:
簡單的把畫面切成了2個部分。三欄式網頁就是以此為基礎延伸
# 實作:
## 1.==簡易導覽列==
### 語法補充:
* `ul`、`li`:創造簡單的清單
* `display: flex`: 達成元素橫向排列以及靠邊排列
* `justify-content`:以主軸線來對齊排版的語法，[點我看更多](https://w3c.hexschool.com/flexbox/4a029043)
* 使用`transition` 設定 `:hover` 效果時間

---

### 範例:

 <input type="checkbox" id="navbarToggle">
        <header class="main-header">
          <div class="container">
            <h1><a href="#">*-*</a></h1>
            <nav>
              <ul class="main-menu">
                <li><a href="https://gordan12.github.io/">關於我</a></li>
                <li>
                  <a href="#">作品們</a>
                  <ul class="sub-menu">
                    <li><a href="https://gordan12.github.io/world-flipper.html">彈射世界</a></li>
                    <li><a href="https://gordan12.github.io/arknights.html">明日方舟</a></li>
                  </ul>
                </li>
                <li><a href="#">角色</a>
                        <ul class="sub-menu">
                          <li><a href="#team1">銀灰</a></li>
                          <li><a href="#team2">小羊</a></li>
                          <li><a href="#team3">能天使</a></li>
                            <li><a href="#team4">小火龍</a></li>
                          <li><a href="#team5">推王</a></li>
                          <li><a href="#team6">塞媽</a></li>
                          <li><a href="#team7">星熊</a></li>
                        </ul>
                      </li>
              </ul>
            </nav>
            <label for="navbarToggle"><span class="material-icons">expand_more</span></label>
          </div>
        </header>

a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.main-header {
  width: 100%;
  background-color: rgb(232, 48, 21);
  position: relative;
  transform: translateY(-100%);
  transition: 1s;
}

#navbarToggle {
  display: none;
}

#navbarToggle:checked~.main-header {
  transform: translateY(0);
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.main-header h1 {
  line-height: 60px;
  margin: 0 15px;
}

.main-menu {
  display: flex;
  position: relative;
}

.main-menu li {
  position: relative;
  transition: .5s;
}

.main-menu li a {
  padding: 0 15px;
  line-height: 60px;
}

.main-menu>li::after {
  content: '';
  position: absolute;
  height: 4px;
  left: 50%;
  right: 50%;
  bottom: 0;
  background-color: #fff;
  transition: .5s;
}

.main-menu li:hover {
  background-color: rgb(176, 41, 20);
}

.main-menu>li:hover::after {
  left: 0;
  right: 0;
}

.sub-menu {
  position: absolute;
  left: 50%;
  background-color: rgba(232, 48, 21, 0.8);
  width: 150%;
  text-align: center;
  transform: translateX(-50%);
  display: none;
}

.main-menu li:hover .sub-menu {
  display: block;
}

### 成果:
#### 有興趣可以直接到[我的網站](https://gordan12.github.io/world-flipper.html)看實際運作方式

## 2.==頁尾設計==
## 語法補充:
* `footer`:用來定義一個頁尾或結尾區塊
* `input` 跟 `button`被` :focus `時會有外框線，可以設定` outline: none`取消
* `caret-color` 可以設定 `input`內游標顏色進而達到選取效果
* 認識`input`標籤的各種type進而搭配css產生特效(可參考[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input))
---
### 範例:

<footer>
          <div class="main-footer">
            <div class="container">
              <div class="item">
                <h3>關於 *-*</h3>
                <ul class="nav">
                  <li><a href="https://gordan12.github.io/"><i class="fa fa-angle-right"></i> 個人介紹</a></li>
                </ul>
              </div>
              <div class="item">
                <h3>作品們</h3>
                <ul class="nav">
                  <li><a href="https://gordan12.github.io/world-flipper.html"><i class="fa fa-angle-right"></i> 彈射世界六屬點評</a></li>
                  <li><a href="https://gordan12.github.io/arknights.html"><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="https://mail.google.com/mail/u/0/#inbox"><i class="fa fa-angle-right"></i> Email</a></li>
                  <li><a href="https://www.facebook.com/profile.php?id=100009460474086"><i class="fa fa-angle-right"></i> Facebook</a></li>
                  <li><a href="https://twitter.com/tzygmfQEIdW7nuK"><i class="fa fa-angle-right"></i> Twitter</a></li>
                </ul>
              </div>
                </form>
              </div>
            </div>
          </div>
          <div class="copyright">*-*</div>
        </footer>

.main-footer {
  padding: 25px 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;
}

### 成果:
#### 快到[我的網站](https://gordan12.github.io/world-flipper.html)看更多
# 心得:
起初我接觸切版只是想要在沒有javascript的基礎下，美編網頁
想著只有css、html~~難度會下降很多吧~~，但我錯的徹底，切版是一個深不可測的領域，這次做的排版、頁尾雖然都只是基礎稍微延伸，卻都耗費了我大量的時間，尤其是`input`不同type結合css的部分，但經過這段時間的練習使我對html、css的互動有更進一步的理解，也開始會把腦中構思的網頁設計，切成不同部份分別實作，接下來我也會朝切版之路更繼續向前，下一份作品目標是以三欄式為基礎設計，並融合漢堡選單及時間軸對話框。==一個好的網頁除了精密的後端外，我相信一個美觀、人性化的頁面也是不可或缺的一部分==