到目前為止html和css的課程已經結束，進入了jd首頁的靜態頁面練習中。一步步去寫的時候才現工程量還是挺大的，很多功能也不知道是如何實現的，不過經過查資料以及在老師與同學們的幫助下都基本上完成了（不牽涉JS）。
總結了一下自己遇到的一些問題也分享給大家。當我們看到這個頁面的時候首先是去看，去分析，整個頁面的布局（中間固定寬度，兩邊自適應），然后從大到小的去細化，再整理信息。我們可以把有共性的樣式放到一個common.css里面，把所有需要清除元素默認樣式的文件放在一個reset.css文件里/normalize.css。
標簽上面的icon
<link href="./favicon.ico" rel="icon" type="image/x-icon"/>
favicon.ico文件放在文件根目錄下。
定位
對于各種定位一定要熟習，然后在適合的地方用適合的方法去實現。
jd頁面的頂排分左右。我用的float去實現，當然大家也可以用其它自己用起來好用的方法。
下拉菜單
然后就是頭部的下拉菜單。這里分享一個學習方法，就是遇到弄不明白的東西，先查資料，然后去js bin里練習，各種嘗試，越是難以理解的東西，花的時間越多，最后完成的成就感也最強，記憶也越深，然后是學會總結與分享。
之前分享的鏈接 http://www.lxweimin.com/p/622165979fa0
還有一個問題就做之前一定要先看，深入分析。
頂部那么多的下拉菜單，他們都有哪些共同的屬性，然后把所有共有的屬性定義一個單獨的名字去寫那些共有樣式，這點很重要(也包括其它元素的共性分析)。
jd旋轉箭頭的實現
這里我沒有用圖片，也沒有用旋轉，而是用的定位去實現，大家也可以對比。
鏈接 http://www.lxweimin.com/p/928bffc7af02
也可以在這里下載圖標制作箭頭：http://www.bootcss.com/p/font-awesome/
hover效果下加邊框會破壞原有的排版
在做的時候沒有仔細去想，做完之后發現，每次hover后整個頭部的排板都在跟著動。因為hover之前是沒有邊框的，hover之后加了邊框2px的寬度進來，自然排把也跟著動了。
解決辦法：可以設置hover之前也有邊框，只是讓它不顯示，或者設置與背景色一致。
圖片
雪碧圖合成：
CSS圖像合并技術，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。
http://csssprites.com/
圖片壓縮：
無損壓縮，大小可以縮小到原來的三分之一但效果不會有什么改變。
https://tinypng.com/
css里引入圖片寫法如：background: url(../img/logo-2015.png) 0 0 no-repeat;
html里a鏈接引入圖片： <a href="#"><img border="0" src="img/banner.jpg" width="1210" height="80" ></a>
css3動畫做時鐘
參考demo: http://js.jirengu.com/koc/2/edit
這里之前同學說打不開demo,重寫了一個，這個只支持chrome，另外，并不能說是一個功能完全的時鐘效果，因為其實本身時針是永遠沒動的。
CSS3 @keyframes很重要，沒有它是動不起來的，具體參考：
http://www.runoob.com/cssref/css3-pr-animation-keyframes.html
animation的各種屬性：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
到這里頁面已經有了基本的樣子，小有成就感。在這里要感謝饑人谷的老師和同學對我的幫助O(∩_∩)O！
附上作業:
http://book.jirengu.com/jirengu-inc/jrg-fe7/%E4%BD%9C%E4%B8%9A/%E6%9B%BE%E8%90%8D/%E4%BA%AC%E4%B8%9C%E9%A6%96%E9%A1%B5/index.html
