重新認識切版 - 實作遇到的問題(持續更新中)
CSS 樣式小節作業
修改的建議:
- 字體樣式的設定,通常會放在
body
中做設定(ex: body { font-family: …; } ) - 除了
ul>li
結構,也可以嘗試使用ol>li
結構,可以變成有排序的項目列表。
省思:
字體的樣式須放在 body
。
優化 CSS 作業小節作業
修改的建議:
.container
可以自適應內容延伸,不需要設定height: 100%
.header
,.article
高度如需留白,可以增加 padding 設定,不建議寫死height
- 按鈕下載可用
a
標籤就好,不用再包一層button
標籤,並請增加 hover 樣式 footer
的height: 15%
也可以拿掉
省思:
最重要的,不要寫死高度。讓外容器去自適應內容,多使用padding
去撐寬。
課前作業一
修改的建議:
- footer mail, phone, 作品連結可用 a 標籤包住,讓他是可被點擊的。
- imgLogo 社群連結也可加上 a 標籤連結哦
- CSS 樣式建議不要直接寫死在 HTML 標籤上,例如:h2
SF Pro Text
是 Apple 的系統字體border
會包含的是padding
距離,margin
是border
外的間距,所以才會不包括在內。line-height
是行高設定,所以當line-height
為 1 時,元素高度就會等於本身的文字內容高度。
因此這邊要和文字等高的話,就需要變更行高設定(x1)。但通常文字內容或是標題的行高都會設定 1.5 或是 1.2,避免內容看起來太擠。
省思:
這邊終於釐清了一個觀念,就是line-height
的運用,設定 1 時,就會跟文字高度一樣,因為是乘 1 的效果。還有border
包含的間距,不會算到margin
。
像是下方這張圖,一開始 設定 border
時,總會突出去,後來才知道是因為 line-height
的緣故。
加上每一個 li,都設定了 margin-bottom,一開始的預期是 border 會一起突出去,但因為 margin 不影響到 border,就呈現了一個對齊的樣子。
行高的計算方式,以下來說就是 16 x 1.5 = 高度 27。
1 |
|
Flex 小節作業
需要注意的點:
因為給的 img 連結每張圖片大小都不同,會導致跑版。
看了其他同學的作業,助教給了一種建議,就是在 img
外加上 div
,然後設定 flex
,就可以使他們置中排列。
1 |
|
css reset
過後,li
的效果就不會出現,如果要出現的話,可以寫:
1 |
|
修改的建議:
- class 命成名上可以使用更具有語意,例如 course_img(代表”課程的圖片”)。
- CSS 中的 22 行,如果想根據
.course_items
中的 img 標籤修改: 可以像 29 行一樣用後代選取器處理,例如:.course_items img - 如果有替元素以 class 選擇器已經有命名(如 CSS 中 40 行),就可以針對 .list 進行設定囉~
Q1
關於建議3,想要請問,只要有命名的 Class 就只需要寫一個了嗎? 像是 CSS 40 行改成一個.list 就好。
A1
問題 2 : 是的!在撰寫 CSS 中,已經命名的 class 直接抓來用就可以了 XD
例如你提交的第二版 CSS 中第 22 行,如果把 .course_items 拿掉也可以發現 .img 是有作用的~
選擇器比一比
「後代選擇器」:利用元素的父子關係,選出特定出範圍的選擇器;同時元素間以「半形空格」分隔並列出元素標籤(像第 29 行)。
「群組選擇器」:用「逗號」串連多個選擇器一併管理,避免重複撰寫相同的 class 內容。
與你的第 22 行有點相像,但兩者不同~
省思:
因為自己習慣使用 meyerweb 的 css reset,所以他會將瀏覽器預設的樣式全部清除,當網頁上還是需要只用到li
的點點時,就可以使用list-style: disc;
。
在練習這邊的時候,還不太會使用後代選擇器。檢討之後,發現後代選擇器的好用之處。
下一個練習會發現自己不熟悉 css 選擇器的權重的觀念。
Flex 精神時光屋
此練習有三個關卡檢討。
修改的建議:
- 建議大中小區塊皆建議用 ul li 來顯示
- .mid, .big-content-last 因為元素本身就是由上到下排列,因此這邊也可以不用 flex
- 上述可以替換成,
text-align: center
也可以
省思:
- 有重複的區塊就可以使用
ul li
- 上下排的區塊就不用使用
flex
,需特別注意。因為,flex 預設就是上下排列(row)。
修改的建議:
- alt 屬性 要放入值
- font-family 建議最後都補上
sans-serif;
這邊問了一個問題。
Q1
第九關,想請問 css 第 40 行,當我想設定總計的價格時,選取了.total-price p ,不會有反應,需要設定成.total-box .total-price p 才可以改動字的大小。想請問~ 不是設定好 class 後,就可以直接選取到元素?
A1
是 CSS 權重的問題,.total-price
之所以沒有奏效,是因為 .total-box li p
權重較高,而 .total-box .total-price p
有奏效,是因為,它不僅放在最後面,也因為他權重比前兩者高。若不想計算權重問題,可以使用 !important
。
省思:
忽略了 css 有權重的問題,所以在更改樣式的時候會有問題。
在設定字形時,注意在後方加上sans-serif;
。
修改的建議:
- content 建議用 ul li 來顯示
- 焦糖甜甜圈, $450 是 p 標籤,本身即是區塊元素,所以外面不需要多包一層 div
省思:
ul li
結構的時候需要特別記得。
在練習這邊的時候,發現自己對區塊元素與行內元素有點模糊不清,又回去複習了一次。
div
是沒有語意化的,是一種區塊元素。區塊元素還包括,p
、h1
、ul>li
。
區塊元素會盡可能占滿版面,不管寬度設定多少,都還是會另起一行,當網頁大小更動時,會自適應佔滿頁面。span
、a
,都是屬於行內元素,較長用在段落之中,無法直接設定寬高。
課前最終作業二
修改的建議:
- 每個網頁上一定會有一個
h1
標籤,h1
是可以優化 SEO ,例如:許多網頁的 logo 都是頁面上重要的資訊,所以建議 .logo 可以使用 h1 標籤。 - 「產品列表」建議可以使用
ul > li
結構。 - 「產品名稱」建議可以使用
h3
標籤。 - 「加入購物車」外層的 div 建議可以移除,把 .buy 加在 a 標籤就好。
- 頁籤的箭頭建議也可以加上 hover 的效果唷。
- 建議可以直接針對 a 標籤直接下
text-decoration:none;
這樣就不用每段都需要加囉。( 可以直接在前面宣告這個 )
省思:
- 注意
ul>li
的使用 a
標籤可以加上 class- 第六個建議,一開始沒有加是因為會跑版,後來發現不需要再每一個
li
都加上 flex (flex 預設的線條導致跑版),才推到中間。只需要加上 padding 就可以。 - 可以直接對
a
標籤都下text-decoration:none;
。