頁面中的可改進部分:
關(guān)于導航
當前頁面中迹缀,頁面滾動的時候會有一個導航固定在頂部,然后hover過去會有一個高亮顯示, 高亮的樣式是在a:hover
里面添加了一個border-bottom: 2px solid #FF5A92;
這樣做的話魔眨,導航其實會在鼠標滑過的時候不斷地抖動,因為hover狀態(tài)讓導航增加了2px的高度研底。
可以考慮用:after
:before
偽類配合定位來畫這條線踱阿,或者考慮讓border-bottom
的高度一直存在泽疆,:hover
的時候只是改變border-bottom-color
關(guān)于輪播圖
1.點擊事件和自動播放有點沖突户矢,而且在快速連續(xù)點擊不同按鈕的時候定時器沒有清掉,輪播圖會掛殉疼。
2.可以考慮做成無縫滾動梯浪。
3.現(xiàn)在的輪播圖是線性動畫,也可以考慮添加Tween
算法瓢娜,做成緩動效果挂洛。
4.可以考慮添加lazyload
, 即一開始只加載第一屏的圖片,后續(xù)幾個輪播的圖片只在即將滾動到該屏的時候再去請求資源進行加載眠砾。
關(guān)于圖片列表
電商網(wǎng)站的圖片比較多虏劲,也可以考慮懶加載。
關(guān)于CSS部分
里面的last-child
ie8支持度不高(現(xiàn)在的PC大多數(shù)還是需要兼容到ie8的, 特別360瀏覽器還是個雙核的,它的兼容模式是個ie7)
關(guān)于css3選擇器的兼容性柒巫,可以查詢 can i use 網(wǎng)站励堡,然后再做處理。
另外還可以添加meta頭來處理
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
關(guān)于原生js部分####
原生js api getElementsByClassName
的確存在堡掏,但是ie8不支持应结,會報錯,所以需要自己封裝.class
的DOM獲取函數(shù)泉唁。
關(guān)于index.js
使用了jquery, 并使用load方法保證了頁面加載的順序,但是這種加載類似ajax加載鹅龄,作為電商網(wǎng)站的話, 這樣的處理可能會影響SEO。