請找出三個課程裡面沒提到的 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;
}
}
剛開始接觸切版,一切都還不是那麼熟練,接下來會開始實做功能部分,例如表單驗證等功能,上述如有缺漏,歡迎告訴我!