HTML \ CSS 初學者易混淆觀念 + 表單樣式實作


Posted by 小小碼農 on 2021-05-18

請找出三個課程裡面沒提到的 HTML 標籤並一一說明作用。

  • 標記定義一篇文章
  • 標記定義外部的可互動的內容或外掛 比如 flash
  • 標記定義有標記的文字 (黃色選中狀態)

請問什麼是盒模型(box modal)

  • 每一個元素都可視為盒模型
    盒模型
  • 盒模型由 content、padding、border、margin 組成
    • content:要放的內容物
    • padding:內距,內容物跟 border 的距離,換句話說,在元素內容的周圍加上我們所指定大小的空間;而如果我們沒有指定元素的寬高時,那麼該元素的內容就會受到 padding 所擠壓
    • border:邊框,盒模型的最外框,計算元素實際的寬高時,一定要將 border 納入
    • margin:元素與其他元素間的邊界距離

請問 display: inline, block 跟 inline-block 的差別是什麼?

  • 塊級元素:佔領頁面的一行,之後的塊級元素自動換行,可設定寬高、margin、padding 等,但設置後也同樣佔一行。
  • 行級元素:和其他元素在同一行,寬高不可設定,寬高由內容由內容元素的寬高決定,多個相鄰的行內元素排在同一行裏,直到頁面一行排列不下,才會換新的一行。

  • inline

    • 屬於行級元素
    • 常見元素: input、img、strong、em
    • 使用時機:要讓他跟其他資料一起排列時
  • block

    • 屬於塊級元素
    • 常見元素:div、form、p、h1
    • 使用時機:自成一橫列,不與其他元素做排列,想做比較重要的訊息或較顯眼的資訊時
  • inline-block

    • 上面兩者優點混合
    • 可在同一行內做元素寬高的設定、同時可以一起做排列,block 的寬度高度特性 + inline 的同行特性
    • 使用時機:導覽列

請問 position: static, relative, absolute 跟 fixed 的差別是什麼?

  • static

    • 預設定位,無法定義 top、left、bottom、right、z-index
    • 使用時機:一般狀況
  • relative

    • 元素與 static 位置相同 (元素實際還是在 static 的位置,並非偏移過後的位置)
    • 可定義 top、left、bottom、right、z-index
      • right 40px 相對於原本的位置,向右移動 40px
    • 使用時機:把 static 改成 relative 以達到讓 absolute 或是 relative 追蹤的效果
  • absolute

    • 移出資料流,做獨立編排。將預設的 static 設為 absolute,他就會往外層元素找 position:absolute|fixed |relative 的元素,若是都沒有就會以該網頁頁面 body 的左上角為定位點
    • 可設定 top、left、bottom、right,移動方式同 relative
    • 使用時機:跳出廣告關閉的 XX 按鈕
  • fixed

    • 移出資料流,以目前瀏覽器視窗定位,固定在視窗固定位置,不隨滾動捲軸移動,
    • 使用時機:廣告或彈出視窗

實做一個活動報名表單

新拖延運動

HTML 部分:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
    />
    <title>新拖延運動報名表單</title>
  </head>
  <body>
    <div class="body__wrapper">
      <div class="form">
        <div class="wrapper">
          <h1 class="title">新拖延運動報名表單</h1>
          <div class="title__desc">
            <p>活動日期:2020/12/10 ~ 2020/12/11</p>
            <p>活動地點:台北市大安區新生南路二段1號</p>
            <div class="must">* 必填</div>
          </div>
        </div>

        <div class="wrapper">
          <div class="name">
            <div class="sub__title required">暱稱 </div>
            <input name="name" class="input__space" placeholder="您的回答" />
          </div>
          <div class="email">
            <div class="sub__title required">電子郵件 </div>
            <input name="email" class="input__space" placeholder="您的電子郵件" />
          </div>
          <div class="phone">
            <div class="sub__title required">手機號碼 </div>
            <input name="phone" class="input__space" placeholder="您的手機號碼" />
          </div>
          <div class="type">
            <div class="sub__title required">報名類型 </div>
            <label>
              <input 
              type="radio"
              name="option"
              value="bed"
            /> 躺在床上用想像力實作
            </label>
            <br /><br />
            <label>
              <input 
              type="radio"
              name="option"
              value="floor"
            /> 趴在地上滑手機找現成的
            </label>
          </div>
          <div class="know">
            <div class="sub__title required">你怎麼知道這個活動的? </div>
            <input name="know" class="input__space" placeholder="您的回答" />
          </div>
          <div class="other">
            <div class="sub__title">其他 </div>
            <p>對活動的一些建議</p>
            <input name="answer" class="input__space" placeholder="您的回答" />
          </div>
          <div class="submit">
            <button type="submit">提交</button>
            <p>請勿透過表單送出您的密碼。</p>
          </div>
        </div>
      </div class="form">
    </div>
    <footer class="footer">
        <p>© 2020 © Copyright. All rights Reserved.</p>
    </footer>
  </body>
</html>

CSS 部分:

* {
  margin: 0;
  padding: 0;
  font-family: MicrosoftJhengHei, sans-serif;
  /* border: 1px solid green; */
}
body {
  background: #eee;
}
button {
  background: #fad312;
  padding: 13px 31px 13px 32px;
  border-radius: 3px;
  border: none;
  letter-spacing: 1px;
}
.other p {
  margin-bottom: 20px;
}
.submit p {
  margin-top: 15px;
}
.title__desc {
  margin-top: 30px;
}
.title__desc p {
  margin-bottom: 8px;
}
.body__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 100px 50px 100px 50px;
}
.form {
  background: #ffffff;
  border-top: 7px solid #fad312;
  box-shadow: 1.8px 2.4px 5px 0px rgba(0, 0, 0, 0.3);
  width: 645px;
}
.wrapper {
  margin: 30px;
}
.name,
.email,
.phone,
.type,
.know,
.other,
.submit {
  margin-bottom: 60px;
  letter-spacing: 1px;
  font-weight: 200;
}
.name {
  padding-top: 20px;
}

.sub__title {
  margin-bottom: 13px;
  font-weight: 400;
  font-size: 20px;
}
.must {
  margin-top: 25px;
  color: #e74149;
  font-size: 16px;
  font-weight: 400;
}
.input__space {
  width: 280px;
  height: 23px;
  border: 1px solid #d0d0d0;
}
::placeholder {
  color: #d0d0d0;
}
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #999999;
  font-size: 13px;
  padding: 18px 0;
  margin-top: 70px;
}
.required:after {
  content: "*";
  color: #e74149;
}
@media (max-width: 768px) {
  .wrapper {
    margin-left: 20px;
  }
}

剛開始接觸切版,一切都還不是那麼熟練,接下來會開始實做功能部分,例如表單驗證等功能,上述如有缺漏,歡迎告訴我!


#html #css







Related Posts

MVC、部署心得、Node.js 後端跟 PHP 差異

MVC、部署心得、Node.js 後端跟 PHP 差異

Leetcode JS 2627. Debounce

Leetcode JS 2627. Debounce

[MTR04] W1 D4 搞懂 Git 交作業流程

[MTR04] W1 D4 搞懂 Git 交作業流程


Comments