HW1 - 基本 HTML/CSS 練習：以 Twitch 為例
tags: 前端
示意圖：
Demo
https://hui190822.github.io/frontend-intermediate-course/answers/hw1/index.html
Git Fork專案
作業方法
1. 如何幫背景圖片加上一層半透明顏色的遮罩 ?
- CSS:幫背景圖加上一層半透明顏色的遮罩
- background-blend-mode: 背景圖片的混合模式
為CSS 屬性是針對背景圖片進行 (類似ps圖層混合模式效果) - mix-blend-mode: 圖層混合模式
demo: http://wcc723.github.io/WorkShop-gh-pages/cssBlendMode/ - linear-gradient
1
2
3
4# 使用 background-blend-mode
background-color: rgba(0, 0, 0, .5);
background-image: url(../img/bg-default.jpg);
background-blend-mode: multiply;1
2# 使用 linear-gradient
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.7)), url(../img/bg-default.jpg);
2. flex排版置中方式
- 需在多了解flex排版
- 垂直置中方式: https://ithelp.ithome.com.tw/users/20112550/ironman/2092
1 |
|
自我練習
1. 請問 CSS 的屬性position有哪幾種值？
- static /absolute /relative /fixed/
2. 承上，請問那幾種值有哪些區別？請講出適合應用的地方。
- position: relative 相對定位
- position: absolute 絕對定位 (搭配相對定位父層)
與搭配top/bottom/left/right屬性做位置變化 - position: fixed 的元素會相對於瀏覽器視窗來定位
3. display的三個值inline, block, inline-block有什麼異同？可以試著舉出幾個例子嗎？
- display: inline為行內元素，不能設置寬高大小
- display: block為區塊元素，佔內容一行，可設置寬高
- display: inline-block為行內但有區塊形式，可設置寬高
4. 有哪些 HTML 元素是 inline, 哪些是 block？
- 每個HTML元素分為inline與block兩種屬性
- inline : span, img, a
- block : div, h1-h6, figure, p
5. 當我設定一個元素的width為300px，並且padding設成10px之後，這個元素的寬度應該會是多少？
- 元素width為320px (300+20px推內距)
- 若有
box-sizing: border-box;盒模型為300px
6. 這次實作的畫面當頻道名稱字太多的時候，會超出一格的大小或者會直接被卡掉，有沒有辦法讓字太多的時候在尾巴顯示…？例如原本名稱叫做：「1234567」，顯示的時候變成：「12345…」？
- 讓多行文字超出時自動隱藏，並出現…
- text-overflow: ellipsis
- codepen: