DPFE2013 聚會心得筆記

因為是筆記,寫的很亂,總之自己記錄一下。

Amos分享

  1. 使用id優於class的原因:因為id是唯一,所以當瀏覽器讀到對應的id,底下其他的html就不需要繼續讀。但若使用class,由於class可以重複使用,因此即使一個頁面只使用過一次class,瀏覽器還是要把整頁html掃過。因此就效能來說,使用id優於class
  2. 頁碼如何置中且保留可擴充數目:將頁碼使用inline-block排排站之後,父元素設定text-align:center;後,就能讓頁碼置中。
    os.我之前都是使用父元素設定一個寬之後,用 margin:auto;的方式設定置中,但若頁碼未滿最滿的數目(例如10頁),這個方法就會有問題,得讓程式動態修改寬度。等於多一道工,Amos的方法比較聰明。
  3. 網頁導覽麵包屑,常會在階層間加入例如>或箭頭圖,這種屬於裝飾的圖可以使用after的方式用css的content=""的方式寫入
  4. 這次的版商品內容的樣式是每三張圖底下有一條橫線。如果直接加在商品border-bottom會遇到若商品未滿三個,線會沒有從頭畫到尾的問題,Amos提供的解法是第四個li內容不放,css用li:nth-child(4n)的方式,寫css去除高度、寬度設定100%
    os.我完全沒去管未滿三個線沒有畫到底這件事XDDDD,整個很偷懶直接加在li上。
  5. 上方單元連結,每個連結被選到時底下會有一個倒三角形,可設定after的content:"";然後四個邊都設定有框線,若四邊顏色都設不同,這時框線之間的接合處會是斜角。再把寬高設成0,左右下框線設定成透明,上框線就會變成三角形
  6. 常用 icon 可用 icon font,不用自己作圖,用純css的方式解。參考網址:http://fortawesome.github.io/Font-Awesome/

Paul、Troie與大家討論

因為是討論時提到的內容,分不清楚是誰說的(也有可能是其他人講的),就寫一起囉。

  1. copyright可用small,因為在html5內是有copyright的語意
  2. 在a裡面加上title有強化說明的意思。所以例如more的連結,在該a內的title可以這樣下:title="商品詳細說明",讓more的標示更為清楚,而不是就只是一個more
  3. 使用img時,若直接在html加上寬高,而不是不設寬高用css指定的好處:瀏覽器因為讀的到寬高,會預留空間,畫面跑出來時不會有圖片尺寸彈跳的狀況。據說google也建議要加。
  4. 特殊符號像是>,在文件裡面因為這個跟原始碼重複,所以不要直接打,要用編碼去寫
  5. 有時候看版面,會加上border去看位置,但這樣有個壞處是四邊都加,那寬高會各多至少2px,而可能造成跑版,所以可以改用outline屬性去寫(內容寫法跟border相同),就不會有多出來的寬高
  6. hover效果,一般底線會使用text-decoration:underline;做但如果要做的比較漂亮,例如滑鼠移上去顯示虛線,可改用border-bottom,但要注意到這時候不要使用padding-bottom,不然線會跟內容有距離。
  7. 預設的form的focus,在不同瀏覽器呈現的差異很大,若要統一要使用css修正。

呼,寫到一半踢到電源差點發生悲劇….結束收工!