我們先來看看改版前後的首屏效果：
從對比圖上來看，主要有以下的變化：
我們來看看兩個頁面中頭部資訊的設定
舊頁面：
頁面從html4.01的宣告改為了html5的宣告
字元編碼從gb2312改為utf-8
優先使用 ie 最新版本和 chrome
前幾個做的改版頁面，只是在原頁面上進行了簡單的css修改。這次新聞首頁的改版，是從零開始寫的乙個新頁面。因此自主權更大，能把優化做到最大；不過因為各種客觀和主觀的原因，依然還有很大進步的空間。
我在編寫頁面時盡量把css放在前面，js放到尾部。不過頁面裡有很多公共的頁面片，只能include進來，因此這些頁面片裡的js也跟著include進來。
2.1 懶載入
當滾動條滾動到當前區域時，則把area1區域裡name的值是page_cnt_1的都載入完成，而area2則在滾動條再次滾動到相應的距離時才載入。
2.2 頁卡的新聞延遲載入
在第3條新聞和第4條新聞中間有13個頻道的頁卡，使用者可以通過把滑鼠放到某個頁卡上獲取當前頁卡的新聞，點選頁卡時跳轉到相應的頻道。除要聞頁卡外，其他頁卡的新聞均是通過ajax的方式獲取的。
考慮到使用者可能頻繁的切換頁卡，或者使用者可能只是想簡單從第1個頁卡移動到第5個頁卡。這種情況下，是沒有必要請求第2，3，4個頁卡里的內容的。因此為頁卡切換設定了延時請求，當滑鼠在當前頁卡停留240ms以上，才認為使用者確實想看這個頁卡的內容，否則認為滑鼠只是從當前頁卡滑過，而不是真的想看其內容。
var timer_0 = null;
$('.news .title').on('mouseenter', 'a', function()
// 滑鼠hover到這個頁卡時，取消上個頁卡的請求
timer_0 && cleartimeout(timer_0);
var $self = $(this);
timer_0 = settimeout(function(), 240);
}).on('mouseout', function());
這3個都是最基本的優化原則。背景能合併的則合併，不能合併的則通過工具進行壓縮，js和css也進行相應的壓縮。
除了頁面基本的功能外，也還有其他的幾個亮點提公升使用者的體驗。
3.1 hover放大效果
整個頁面左側的，滑鼠hover時有放大的效果，這裡是使用到了css3的transition屬性，因此在ie8及以下是看不到這種效果的。
img
img:hover
.yingxiangli .con img
.yingxiangli .con img:hover
拖拽相應的頻道，完成後儲存即可。下次開啟頁面時，就會展示之前拖拽好的順序。
其實在點選「儲存」後，程式會將調整後的頁卡順序儲存到cookie中，以後每次開啟頁面時，都會檢查是否存在這個cookie，若存在cookie則展示相應的順序，否則展示頁卡的預設順序。
新頁面上線後，還會有很多後續的功能需要新增。在此也只是做個改版的階段性總結，望大家批評改正。
本人部落格：
爬取校園新聞首頁的新聞
1.用requests庫和beautifulsoup庫，爬取校園新聞首頁新聞的標題 鏈結 正文 show info。2.分析info字串，獲取每篇新聞的發布時間，作者，攝影等資訊。import requests newsurl res requests.get newsurl 返回response物...
爬取校園新聞首頁的新聞
1.用requests庫和beautifulsoup庫，爬取校園新聞首頁新聞的標題 鏈結 正文 show info。import requests from bs4 import beautifulsoup newsurl res requests.get newsurl res.encoding ...
爬取校園新聞首頁的新聞
1.用requests庫和beautifulsoup庫，爬取校園新聞首頁新聞的標題 鏈結 正文 show info。2.分析info字串，獲取每篇新聞的發布時間，作者，攝影等資訊。import requests from bs4 import beautifulsoup from datetime ...