一，css進階篇：
等css哪些事兒看了兩三遍之後，需要對看過的知識綜合應用，這時候需要大量的實踐經驗，
簡單的想法：把qq首頁全屏另存為jpg然後通過ps工具切圖結合css轉換成html，有無從下手的地方可以用firebug, chrome調試工具分析網站結構樣式。如果技術熟練自信可以自己先寫，寫完之後在對比，以其來找尋自己的差距。結構是網站的骨架，如果寫的不合理，将是bug産生的重要根源，是以學習分析大型網站的布局樣式對初學者來說幫助是很大的。大多數初學者由于對技術的不自信，html結構往往寫的很少，而且期望在少的結構上盡可能多的實作頁面效果，這樣無非加大了html結構所承載的樣式屬性，衆多屬性交織在一起就會容易産生bug。qq,sina,163三大官網撸一遍，基本是熟練了。
二，js進階篇：
js進階，等妙味看的差不多，心裡難免癢癢，看老師用盡可能少的代碼來實作了衆多以前沒法實作的動态效果。然後自己想寫，但不知道寫啥東西，下面就這個問題做以建議，寫這些東西的目的有這麼幾個，一個是更加鞏固自己的知識，另外一個是積累面試的作品以及以後工作中的可複用的代碼片段：
1. 彈出層，
2. 月曆
3. 圖檔輪換
SuperSlide2.1所有案例+TouchSlide1.0觸屏滑動特效插件
4. 模拟滾動條
5. 模拟select，關聯
參照：
<a href="http://bbs.blueidea.com/thread-3009070-1-1.html" target="_blank">http://bbs.blueidea.com/thread-3009070-1-1.html</a>
<a href="https://github.com/yessky/selector" target="_blank">https://github.com/yessky/selector</a>
強大的selector
<a href="http://aui.github.io/popupjs/doc/selectbox.html" target="_blank">http://aui.github.io/popupjs/doc/selectbox.html</a>
糖餅 select
<a href="https://github.com/Johnqing/selectbox" target="_blank">https://github.com/Johnqing/selectbox</a>
模拟下拉框
6. js分頁
<a href="http://bbs.blueidea.com/thread-3105789-1-1.html" target="_blank">http://bbs.blueidea.com/thread-3105789-1-1.html</a>
另外建議可以适當的看一些源碼，看的目的無非是揭開神秘架構背後的代碼實作，另外一個是開闊自己的視野，看了源碼之後，不僅感歎到：原來js還可以這麼玩，而且還玩的這麼炫。當然有些源碼并不時依目前的積累能看懂的，比如jQuery，是非常晦澀難懂，但為了友善分享，就全部羅列出來：
1. ext
<a href="http://www.cnblogs.com/mogen_yin/archive/2009/04/30/1447236.html" target="_blank">http://www.cnblogs.com/mogen_yin/archive/2009/04/30/1447236.html</a>
ext 2.2 經典50篇 -- 閱讀ext源碼
<a href="http://www.cnblogs.com/gotolnc/archive/2009/03/10/1408063.html" target="_blank">http://www.cnblogs.com/gotolnc/archive/2009/03/10/1408063.html</a>
blog 資源彙總
<a href="http://yahaitt.iteye.com/blog/193271" target="_blank">http://yahaitt.iteye.com/blog/193271</a>
透析Extjs的Ext.js源碼（五）分析繼承的實作
<a href="http://www.cnblogs.com/peter-pc/articles/1612591.html" target="_blank">http://www.cnblogs.com/peter-pc/articles/1612591.html</a>
Ext源代碼閱讀-001
<a href="http://linder0209.iteye.com/category/58900" target="_blank">http://linder0209.iteye.com/category/58900</a>
源碼解讀系列文章(一直在看)
<a href="http://snandy.iteye.com/category/124734" target="_blank">http://snandy.iteye.com/category/124734</a>
snandy ext系列檔案(準備要看的)
<a href="http://liust1987.iteye.com/?page=2" target="_blank">http://liust1987.iteye.com/?page=2</a>
ext源碼系列(準備要看的)
<a href="http://linder0209.iteye.com/blog/1071818" target="_blank">http://linder0209.iteye.com/blog/1071818</a>
ext源碼分析(準備要看的)
<a href="http://blog.sina.com.cn/s/articlelist_1975505103_2_1.html" target="_blank">http://blog.sina.com.cn/s/articlelist_1975505103_2_1.html</a>
ext源碼分析( 比較零散，必看部分 )
<a href="http://extasp.net/" target="_blank">http://extasp.net</a>
extasp.net架構結構
ext繼承 iteye
<a href="http://yiminghe.iteye.com/category/64527" target="_blank">http://yiminghe.iteye.com/category/64527</a>
何玉的iteyey
<a href="http://lionheart.iteye.com/blog/232776" target="_blank">http://lionheart.iteye.com/blog/232776</a>
js 繼承
<a href="http://blog.csdn.net/zhangxin09" target="_blank">http://blog.csdn.net/zhangxin09</a>
ext高手blog
<a href="http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html" target="_blank">http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html</a>
js繼承
<a href="http://www.cnblogs.com/minakata/archive/2011/10/07/2199872.html" target="_blank">http://www.cnblogs.com/minakata/archive/2011/10/07/2199872.html</a>
js高程繼承
<a href="http://www.iteye.com/topic/1047795" target="_blank">http://www.iteye.com/topic/1047795</a>
ext其它擴充
<a href="http://www.iteye.com/topic/1120551?page=2" target="_blank">http://www.iteye.com/topic/1120551?page=2</a>
ext 2.3源碼分析，bbs格式（其中有event對象的整理）
<a href="http://www.cnblogs.com/iamlilinfeng/category/385121.html" target="_blank">http://www.cnblogs.com/iamlilinfeng/category/385121.html</a>
ext源碼分析
<a href="http://setting.iteye.com/category/53053" target="_blank">http://setting.iteye.com/category/53053</a>
ext基礎教程
<a href="http://andy-ghg.iteye.com/blog/1133456" target="_blank">http://andy-ghg.iteye.com/blog/1133456</a>
ext4的改變
<a href="http://www.cnblogs.com/fangsui/archive/2012/04/18/2455537.html" target="_blank">http://www.cnblogs.com/fangsui/archive/2012/04/18/2455537.html</a>
ext4開始
<a href="http://docs.sencha.com/ext-js/4-0/#!/api" target="_blank">http://docs.sencha.com/ext-js/4-0/#!/api</a>
ext線上api
<a href="http://www.aspxcs.net/HTML/094538320.html" target="_blank">http://www.aspxcs.net/HTML/094538320.html</a>
ext體系結構
<a href="http://linder0209.iteye.com/blog/865331" target="_blank">http://linder0209.iteye.com/blog/865331</a>
ext檔案結構
<a href="http://hi.baidu.com/study_discuss/blog/item/d3c28913f7cb64936438dbf8.html" target="_blank">http://hi.baidu.com/study_discuss/blog/item/d3c28913f7cb64936438dbf8.html</a>
extjs apply,applyif,override,extend 的差別
<a href="http://www.oecp.cn/hi/xuan/blog/page/2" target="_blank">http://www.oecp.cn/hi/xuan/blog/page/2</a>
ext源碼
<a href="http://www.open-open.com/home/space.php?uid=135360&do=blog&id=11658" target="_blank">http://www.open-open.com/home/space.php?uid=135360&do=blog&id=11658</a>
ext4.0基礎概念與總結
2. prototype
<a href="http://blog.csdn.net/qgy18/article/details/673117" target="_blank">http://blog.csdn.net/qgy18/article/details/673117</a>
prototype源碼閱讀
<a href="http://www.cnblogs.com/NNUF/archive/2012/05/10/2494579.html" target="_blank">http://www.cnblogs.com/NNUF/archive/2012/05/10/2494579.html</a>
prototype 源碼解讀
<a href="http://www.cnblogs.com/cangqiong/archive/2007/12/21/1008801.html" target="_blank">http://www.cnblogs.com/cangqiong/archive/2007/12/21/1008801.html</a>
prototype-1.4.0(轉載)
3. qwarp
<a href="http://dev.qwrap.com/resource/js/_docs/_youa/#/content.htm" target="_blank">http://dev.qwrap.com/resource/js/_docs/_youa/#/content.htm</a>
api
<a href="http://www.cnblogs.com/jkisjk/tag/QWrap/" target="_blank">http://www.cnblogs.com/jkisjk/tag/QWrap/</a>
4. mootools
<a href="http://www.cnblogs.com/oneroundseven/archive/2011/05/10/2041996.html" target="_blank">http://www.cnblogs.com/oneroundseven/archive/2011/05/10/2041996.html</a>
mootools 源碼分析之 Core.js
<a href="http://suyang119.iteye.com/blog/1671065" target="_blank">http://suyang119.iteye.com/blog/1671065</a>
Mootools源碼分析
<a href="http://hmking.blog.51cto.com/3135992/675856" target="_blank">http://hmking.blog.51cto.com/3135992/675856</a>
MooTools 1.4 源碼分析 - Class 修正版
5. jquery
<a href="http://james.padolsey.com/jquery/" target="_blank">http://james.padolsey.com/jquery/</a>
jquery源碼查詢
<a href="http://www.cnblogs.com/edison1105/archive/2012/07/31/2617518.html" target="_blank">http://www.cnblogs.com/edison1105/archive/2012/07/31/2617518.html</a>
這些年、我收集的JQuery代碼
<a href="http://hxq0506.iteye.com/blog/1046334" target="_blank">http://hxq0506.iteye.com/blog/1046334</a>
jquery1.6中的.prop()和.attr()異同
<a href="http://www.cnblogs.com/zyj469470971/archive/2012/02/17/2355890.html" target="_blank">http://www.cnblogs.com/zyj469470971/archive/2012/02/17/2355890.html</a>
jquery選擇器
<a href="http://www.cnblogs.com/sharpxiajun/archive/2011/09/22/2185566.html" target="_blank">http://www.cnblogs.com/sharpxiajun/archive/2011/09/22/2185566.html</a>
臨摹jquery
<a href="http://www.cnblogs.com/haogj/archive/2010/04/19/1715762.html" target="_blank">http://www.cnblogs.com/haogj/archive/2010/04/19/1715762.html</a>
jquery原型關系圖
<a href="http://www.ihiro.org/blog/wp-content/uploads/2010/08/sizzle_flow1.jpg" target="_blank">http://www.ihiro.org/blog/wp-content/uploads/2010/08/sizzle_flow1.jpg</a>
<a href="http://www.cnblogs.com/lovesueee/archive/2012/10/18/2729829.html" target="_blank">http://www.cnblogs.com/lovesueee/archive/2012/10/18/2729829.html</a>
jquery 1.8.2 源碼分析
<a href="http://www.cnblogs.com/nuysoft/archive/2011/11/14/2248023.html" target="_blank">http://www.cnblogs.com/nuysoft/archive/2011/11/14/2248023.html</a>
jquery 1.6源碼分析
<a href="http://www.cnblogs.com/justany/archive/2013/01/22/2868501.html" target="_blank">http://www.cnblogs.com/justany/archive/2013/01/22/2868501.html</a>
jquery事件分析
<a href="http://www.cnblogs.com/hxling/" target="_blank">http://www.cnblogs.com/hxling/</a>
jQuery工作原了解析以及源代碼示例
jquery easyui 作者
<a href="http://rapheal.sinaapp.com/" target="_blank">http://rapheal.sinaapp.com/</a>
jquery源碼閱讀
<a href="http://www.blog.highub.com/decoding-jquery/" target="_blank">http://www.blog.highub.com/decoding-jquery/</a>
jquery源碼閱讀英文資料
<a href="http://www.cnblogs.com/nuysoft/" target="_blank">http://www.cnblogs.com/nuysoft/</a>
jquery源碼閱讀，這位作者出了一本書叫jquery技術内幕
<a href="http://item.jd.com/1080321026.html" target="_blank">http://item.jd.com/1080321026.html</a>
<a href="http://adamed.iteye.com/category/207898" target="_blank">http://adamed.iteye.com/category/207898</a>
jq源代碼閱讀
<a href="http://adamed.iteye.com/" target="_blank">http://adamed.iteye.com/</a>
jquery源碼分析
<a href="http://www.cnblogs.com/krouky/archive/2011/12/27/Krouky.html" target="_blank">http://www.cnblogs.com/krouky/archive/2011/12/27/Krouky.html</a>
jquery架構分析
<a href="http://www.cnblogs.com/yaozhiyi/archive/2013/01/12/2855583.html" target="_blank">http://www.cnblogs.com/yaozhiyi/archive/2013/01/12/2855583.html</a>
jquery源碼 元素位置
<a href="http://www.oschina.net/news/46103/10-fresh-and-fantastic-jquery-plugins" target="_blank">http://www.oschina.net/news/46103/10-fresh-and-fantastic-jquery-plugins</a>
10個jquery插件，裡邊有個jquery滾動條寫的不錯。
<a href="http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385" target="_blank">http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385</a>
<a href="http://www.miaov.com/2013/miaovideo/miaovideo.html" target="_blank">http://www.miaov.com/2013/miaovideo/miaovideo.html</a>
[知識點類] 妙味課堂：一起學習jQuery源碼【逐行分析jQuery源碼的奧秘】
jquery 2.0.3源碼分析
<a href="http://www.cnblogs.com/aaronjs/p/3322466.html" target="_blank">http://www.cnblogs.com/aaronjs/p/3322466.html</a>
jquery 2.0.3源碼分析 分析Sizzle引擎 - 編譯函數（大篇幅）
<a href="https://github.com/mythz/jquip" target="_blank">https://github.com/mythz/jquip</a>
jquery 壓縮版
<a href="http://www.cnblogs.com/aaronjs/p/3342344.html" target="_blank">http://www.cnblogs.com/aaronjs/p/3342344.html</a>
jQuery 2.0.3 源碼分析 回調對象 - Callbacks
jquery源碼解讀-妙味
<a href="http://sunnylost.com/article/jquery.core1.html" target="_blank">http://sunnylost.com/article/jquery.core1.html</a>
jQuery 源碼閱讀
<a href="http://www.cnblogs.com/yangjunhua/" target="_blank">http://www.cnblogs.com/yangjunhua/</a>
淺析jQuery基礎架構
<a href="http://www.ihiro.org/sizzle-custom-selector" target="_blank">http://www.ihiro.org/sizzle-custom-selector</a>
sizzle源碼
<a href="http://www.cnblogs.com/52cik/p/jquery-source-position.html" target="_blank">http://www.cnblogs.com/52cik/p/jquery-source-position.html</a>
淺談jQuery事件源碼定位
<a href="http://www.cnblogs.com/suprise/p/3622760.html" target="_blank">http://www.cnblogs.com/suprise/p/3622760.html</a>
jquery 1.11源碼分析
<a href="http://blog.csdn.net/baozhifei/article/details/6959392" target="_blank">http://blog.csdn.net/baozhifei/article/details/6959392</a>
jQuery1.0源代碼分析之domManip方法（七）
<a href="http://blog.csdn.net/lihongxun945/article/category/1588879" target="_blank">http://blog.csdn.net/lihongxun945/article/category/1588879</a>
jquery2.0.4源碼分析
<a href="http://www.cnblogs.com/chyingp/category/546594.html" target="_blank">http://www.cnblogs.com/chyingp/category/546594.html</a>
jQuery源碼分析系列
<a href="http://www.cnblogs.com/baochuan/archive/2012/11/21/2781118.html" target="_blank">http://www.cnblogs.com/baochuan/archive/2012/11/21/2781118.html</a>
通過jQuery源碼學習javascript（一）
<a href="http://pashanhu.github.io/show_by_tag.html?tag=jQuery" target="_blank">http://pashanhu.github.io/show_by_tag.html?tag=jQuery</a>
學習jQuery源碼
<a href="http://www.zhihu.com/question/19671522?rf=20617754" target="_blank">http://www.zhihu.com/question/19671522?rf=20617754</a>
jQuery資料知乎
<a href="http://www.cn-cuckoo.com/deconstructed/jquery.html" target="_blank">http://www.cn-cuckoo.com/deconstructed/jquery.html</a>
李松峰的解構
<a href="http://www.iteye.com/topic/786984" target="_blank">http://www.iteye.com/topic/786984</a>
jquery1.43源碼分析之動畫部分
<a href="http://www.iteye.com/topic/783260" target="_blank">http://www.iteye.com/topic/783260</a>
jquery 隊列函數
<a href="http://www.cnblogs.com/guoyansi19900907/" target="_blank">http://www.cnblogs.com/guoyansi19900907/</a>
jquery 源碼分析-思思博士
6. Backbone
<a href="http://www.cnblogs.com/hao-dotnet/p/3444575.html" target="_blank">http://www.cnblogs.com/hao-dotnet/p/3444575.html</a>
Backbone源碼閱讀手記
7. seajs
<a href="http://seajs.org/docs/" target="_blank">http://seajs.org/docs/</a>
seajs
<a href="http://www.cnblogs.com/yinshen/p/3190429.html" target="_blank">http://www.cnblogs.com/yinshen/p/3190429.html</a>
seajs源碼分析
<a href="http://www.cnblogs.com/webstone/articles/3043119.html" target="_blank">http://www.cnblogs.com/webstone/articles/3043119.html</a>
seajs研究一二三
<a href="http://www.heiniuhaha.com/seajs/2012/08/14/seajs-combat/" target="_blank">http://www.heiniuhaha.com/seajs/2012/08/14/seajs-combat/</a>
seajs實戰參考 Supporting tagline
<a href="http://panxuepeng.github.io/seajslib" target="_blank">http://panxuepeng.github.io/seajslib</a>
SeaJS 元件庫
<a href="https://github.com/seajs/seajs/issues" target="_blank">https://github.com/seajs/seajs/issues</a>
seajs issues
本文轉自豪情部落格園部落格，原文連結：http://www.cnblogs.com/jikey/p/3601666.html，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)