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

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. 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。

font-size: 16px;
line-height:1.5;

Flex 小節作業

切版 - Flex 小節

需要注意的點:

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

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

.course_items .img{
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.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

關於建議３，想要請問，只要有命名的 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 是沒有語意化的，是一種區塊元素。區塊元素還包括，p、h1、ul>li。
  區塊元素會盡可能占滿版面，不管寬度設定多少，都還是會另起一行，當網頁大小更動時，會自適應佔滿頁面。

• span、a，都是屬於行內元素，較長用在段落之中，無法直接設定寬高。

課前最終作業二

切版 - 課前最終作業二

修改的建議:

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;。