仿寫複雜頁面之學習心得

1，首先對整個頁面進行分析。得到草圖。footer,header,nav,aside,section等部分的劃分。
2，引入rest.css。防止瀏覽器兼容問題的不一致（但是對seo有影響）。將頁面字體字色字號等設置在rest.css中，爲默認字體
3，對每個部分的佈局分析。position:absolute/relative/fixed（具體如何分析，請查看我的博客:http://blog.csdn.net/qq_28300493/article/details/52327449）
4，對每個部分設置一個class.當製作複雜頁面是，會設計各種css樣式。很多重合很多不一樣。對每個部分設置class，既可以保證css文件定義可複用，還可以在引用是使用元素之間的父子等關係，定位到每一個元素，而不需要爲每個元素定義id
5，之後便具體到每一部分。頭部和底部很容易。主要就是格式對齊。
6，中間部分。
6.1，中間輪播，輪播代碼請看我的git: https://github.com/zyd317/demo-funny/blob/master/carouselShow.html
當然也可以css實現。方法很多，看需要什麼樣的效果。
6.2，菜單（：hover時display:block。）
6.3，圖片浮動效果（css3 transform等）
6.4，圖片柵格佈局
6.5，背景顏色的半透明background-color(rgba(0,0,0,0.5);顏色不會被繼承)
6.6，圖片格式。需要高清的圖片jpeg，webp(兼容有問題),小圖片base64,gif,png等
7，兼容問題
8，性能。資源的分佈，資源壓縮加密等