0%

切版練習2

Posted on Edited on In

前言

這次要模仿的範例一樣是 FreeCodeCamp 中的 作業範例 經過一點小嘗試後，決定以下圖 html 架構來切版

架構預覽

剛開始嘗試主要遇到的問題是，要如何讓左邊問卷題目的部分全都靠右對齊，然後又要讓右邊填寫欄的部分靠左對齊，最後決定以一個 row為一個 div ，裡面左右兩邊再用各一個 div 包住後 display 的部分改為 inline-block ，html 架構及 css 如下程式碼所示，div 預設 display 為一個 block ，也就是一個 div 就會使用一個橫列，不會跟其他 block 屬性的物件並排， inline-block 可以讓彼此互相並排。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row">
    <div class="label"></div>
    <div class="right"></div>
</div>
<div class="row">
    <div class="label"></div>
    <div class="right"></div>
</div>
<div class="row">
    <div class="label"></div>
    <div class="right"></div>
</div>
<div class="row">
    <div class="label"></div>
    <div class="right"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.label{
    display: inline-block;
    position: relative;
    left:0px;
    top: 0px;
    text-align: right;
    width:45%;
    vertical-align: top;
}

.right{
    display: inline-block;
    position: relative;
    right:0px;
    top: 0px;
    text-align: left;
    width: 45%;
}

position 屬性有四種參數，分別是

  • static: 被套用到此設定的參數會依照瀏覽器的預設方式而排列，不會被定位。
  • relative: 套用到此設定的參數一樣會按照瀏覽器的預設方式而排列，但相對 static relative 可以被定位，且可以被 top, bottom, left, right 參數改變排列位置，例如 top:10px 為距離頂端 10px 的距離
  • absolute: 套用到此參數的元素一樣為可以被定位的元素，但是他所參考的相對位置為上一層可以被定位的元素，如果上一層為 static(不能被定位) ，則會參考 body 元素。此參數一樣可以套用 top, bottom, left, right。
  • fixed: 套用此設定的元素相對 absolute 參考的對象為上一層可被定義的元素 fixed 的定位是參考瀏覽器視窗，再根據 top, bottom, left, right 來調整位置。

這次切版多注意到了幾個實用的參數

  • input 標籤的 require 及 placeholder 參數
  • require: 設定此參數的 input 標籤為必填項目，如果未填，送出表單的時候會無法送出，如下左圖
  • placeholder: 此參數可以設定一個字串，效果為該欄未填寫任何東西時，會顯示一串文字說明該欄，如下右圖

===

成品參考

連結