因為是筆記，寫的很亂，總之自己記錄一下。
Amos分享
- 使用id優於class的原因：因為id是唯一，所以當瀏覽器讀到對應的id，底下其他的html就不需要繼續讀。但若使用class，由於class可以重複使用，因此即使一個頁面只使用過一次class，瀏覽器還是要把整頁html掃過。因此就效能來說，使用id優於class
- 頁碼如何置中且保留可擴充數目：將頁碼使用inline-block排排站之後，父元素設定text-align:center;後，就能讓頁碼置中。
os.我之前都是使用父元素設定一個寬之後，用 margin:auto;的方式設定置中，但若頁碼未滿最滿的數目（例如10頁），這個方法就會有問題，得讓程式動態修改寬度。等於多一道工，Amos的方法比較聰明。 - 網頁導覽麵包屑，常會在階層間加入例如>或箭頭圖，這種屬於裝飾的圖可以使用after的方式用css的content=””的方式寫入
- 這次的版商品內容的樣式是每三張圖底下有一條橫線。如果直接加在商品border-bottom會遇到若商品未滿三個，線會沒有從頭畫到尾的問題，Amos提供的解法是第四個li內容不放，css用li:nth-child(4n)的方式，寫css去除高度、寬度設定100%
os.我完全沒去管未滿三個線沒有畫到底這件事XDDDD，整個很偷懶直接加在li上。 - 上方單元連結，每個連結被選到時底下會有一個倒三角形，可設定after的content:””;然後四個邊都設定有框線，若四邊顏色都設不同，這時框線之間的接合處會是斜角。再把寬高設成0，左右下框線設定成透明，上框線就會變成三角形
- 常用 icon 可用 icon font，不用自己作圖，用純css的方式解。參考網址：http://fortawesome.github.io/Font-Awesome/
Paul、Troie與大家討論
因為是討論時提到的內容，分不清楚是誰說的（也有可能是其他人講的），就寫一起囉。
- copyright可用small，因為在html5內是有copyright的語意
- 在a裡面加上title有強化說明的意思。所以例如more的連結，在該a內的title可以這樣下：title=”商品詳細說明”，讓more的標示更為清楚，而不是就只是一個more
- 使用img時，若直接在html加上寬高，而不是不設寬高用css指定的好處：瀏覽器因為讀的到寬高，會預留空間，畫面跑出來時不會有圖片尺寸彈跳的狀況。據說google也建議要加。
- 特殊符號像是>，在文件裡面因為這個跟原始碼重複，所以不要直接打，要用編碼去寫
- 有時候看版面，會加上border去看位置，但這樣有個壞處是四邊都加，那寬高會各多至少2px，而可能造成跑版，所以可以改用outline屬性去寫（內容寫法跟border相同），就不會有多出來的寬高
- hover效果，一般底線會使用text-decoration:underline;做但如果要做的比較漂亮，例如滑鼠移上去顯示虛線，可改用border-bottom，但要注意到這時候不要使用padding-bottom，不然線會跟內容有距離。
- 預設的form的focus，在不同瀏覽器呈現的差異很大，若要統一要使用css修正。
呼，寫到一半踢到電源差點發生悲劇….結束收工！