任務目的
- 通過實現一個較為復雜的頁面，加深對於HTML，CSS的實戰能力
- 實踐代碼的復用、優化
任務描述
- 通過HTML及CSS實現設計稿 設計稿PSD文件（點擊下載），效果如 效果圖（點擊打開）
- 整個頁面內容寬度固定，但頭部的藍色導航和瀏覽器寬度保持一致
任務注意事項
- 只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
- tab只需要實現樣式，有能力余力的同學可以嘗試實現不使用JavaScript的情況下，實現Tab切換
- 所有的下拉菜單（Select）均要求按照設計稿樣式實現，下拉后的樣式自定義，不需要實現下拉選擇的功能，但樣式要實現
- 在Chrome中完美實現與設計稿的除了文字以外的各項圖片、字體、顏色、布局、內外邊距等樣式
- 有能力的同學可以嘗試跨瀏覽器的兼容性
- 有能力的同學可以在實現一遍后嘗試用less, sass或者stylus等再實現一次
任務完成與總結：
一個人搞這個頁面，肝有點不行，索性不切圖了，計划直接把大概的頁面寫出來，然而寫到第二天的時候完全失去耐心Zzzz，這次任務算是考驗到我了。算了，還是分析其他人的代碼吧，不過自己的代碼還是要貼上，知道這次完成的十分不好，不管怎么說，畢竟是親兒子（自己寫出來的），就不嫌它丟人了。
https://cruxf.github.io/BaiduTask/test9.html
下面是一個做的比較好的團隊作品：
http://zaiye.github.io/test1/
現在我來分析下一些自己覺得有技巧的效果實現方式：
1、搜索框與登錄效果的實現
代碼：
利用padding-left值空出來的位置，然后調整背景圖x、y軸的坐標；登錄效果的實現也是如此。
2、類似雙重邊框的實現
代碼（父元素）：
代碼（子元素）：
通過兩個背景顏色不一的圓疊加，營造出雙重邊框的效果。
3、CSS3制作一個tab選項卡：
開發步驟一：將父元素設置為相對定位；
開發步驟二：將li元素設置為浮動；
開發步驟三：隱藏input以及承載表格的div；
開發步驟四：設置id為tab開頭的、屬性為checked的元素以及當下一個id以tab_menu開頭的元素被點擊時的樣式，這個為核心代碼：
開發步驟五：相關原理與開發步驟四類似：
4、ul元素的巧用：
中間三大塊利用ul中li元素中嵌套div進行設置和布局，這實在是我一開始想不到的，比我的方法簡潔了許多。果然腦子是個好東西。
5、元素的空內容應用：
頭部使用li元素，中間使用浮動的p元素設置寬高，p元素內含兩個子元素，其中空白的部分只是沒有添加內容而已，只怪自己當初想的太復雜。
7、類進度條的制作：
還是老技巧，利用父元素與子元素的重疊。其實用HTML 新元素progress處理也是可以，只不過背景顏色處理上有些麻煩，以及它的兼容性問題。