重新認識切版 - 實作遇到的問題(持續更新中)

CSS 樣式小節作業

切版 - CSS 樣式

修改的建議:

  1. 字體樣式的設定,通常會放在 body 中做設定(ex: body { font-family: …; } )
  2. 除了 ul>li 結構,也可以嘗試使用 ol>li 結構,可以變成有排序的項目列表。

省思:

字體的樣式須放在 body

優化 CSS 作業小節作業

切版 - 優化 CSS 作業

修改的建議:

  1. .container 可以自適應內容延伸,不需要設定 height: 100%
  2. .header, .article 高度如需留白,可以增加 padding 設定,不建議寫死 height
  3. 按鈕下載可用 a 標籤就好,不用再包一層 button 標籤,並請增加 hover 樣式
  4. footerheight: 15% 也可以拿掉

省思:

最重要的,不要寫死高度。讓外容器去自適應內容,多使用padding去撐寬。

課前作業一

切版 - 課前最終作業一

修改的建議:

  • footer mail, phone, 作品連結可用 a 標籤包住,讓他是可被點擊的。
  • imgLogo 社群連結也可加上 a 標籤連結哦
  • CSS 樣式建議不要直接寫死在 HTML 標籤上,例如:h2
  • SF Pro Text 是 Apple 的系統字體
  • border 會包含的是 padding 距離,marginborder 外的間距,所以才會不包括在內。
  • 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
2
font-size: 16px;
line-height:1.5;

Flex 小節作業

切版 - Flex 小節

需要注意的點:

因為給的 img 連結每張圖片大小都不同,會導致跑版。

看了其他同學的作業,助教給了一種建議,就是在 img 外加上 div,然後設定 flex,就可以使他們置中排列。

1
2
3
4
5
6
.course_items .img{
height: 140px;
display: flex;
align-items: center;
justify-content: center;
}

css reset過後,li 的效果就不會出現,如果要出現的話,可以寫:

1
2
3
4
5
.list{
line-height:1.5;
list-style: disc;
margin-left: 20px;
}

修改的建議:

  1. class 命成名上可以使用更具有語意,例如 course_img(代表”課程的圖片”)。
  2. CSS 中的 22 行,如果想根據 .course_items 中的 img 標籤修改: 可以像 29 行一樣用後代選取器處理,例如:.course_items img
  3. 如果有替元素以 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 也可以

省思:

  1. 有重複的區塊就可以使用 ul li
  2. 上下排的區塊就不用使用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 是沒有語意化的,是一種區塊元素。區塊元素還包括,ph1ul>li
    區塊元素會盡可能占滿版面,不管寬度設定多少,都還是會另起一行,當網頁大小更動時,會自適應佔滿頁面

  • spana,都是屬於行內元素,較長用在段落之中無法直接設定寬高

課前最終作業二

切版 - 課前最終作業二

修改的建議:

  1. 每個網頁上一定會有一個 h1 標籤,h1 是可以優化 SEO ,例如:許多網頁的 logo 都是頁面上重要的資訊,所以建議 .logo 可以使用 h1 標籤。
  2. 「產品列表」建議可以使用 ul > li 結構。
  3. 「產品名稱」建議可以使用 h3 標籤。
  4. 「加入購物車」外層的 div 建議可以移除,把 .buy 加在 a 標籤就好。
  5. 頁籤的箭頭建議也可以加上 hover 的效果唷。
  6. 建議可以直接針對 a 標籤直接下 text-decoration:none; 這樣就不用每段都需要加囉。( 可以直接在前面宣告這個 )

省思:

  • 注意 ul>li 的使用
  • a 標籤可以加上 class
  • 第六個建議,一開始沒有加是因為會跑版,後來發現不需要再每一個 li 都加上 flex (flex 預設的線條導致跑版),才推到中間。只需要加上 padding 就可以。
  • 可以直接對 a 標籤都下 text-decoration:none;

重新認識切版 - 實作遇到的問題(持續更新中)
https://phoebeho.com/切版/20210605/3540446617/
作者
Phoebe
發布於
2021年6月5日
許可協議