任務九：使用HTML/CSS實現一個複雜頁面

標籤：複雜   總結   com   alt   開啟   http   rip   元素   tab   

任務目的

• 通過實現一個較為複雜的頁面，加深對於HTML，CSS的實戰能力
• 實踐代碼的複用、最佳化

 

任務描述

• 通過HTML及CSS實現設計稿 設計稿PSD檔案（點擊下載），效果如 （點擊開啟）
• 整個頁面內容寬度固定，但頭部的藍色導航和瀏覽器寬度保持一致

 

任務注意事項

• 只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
• tab只需要實現樣式，有能力餘力的同學可以嘗試實現不使用JavaScript的情況下，實現Tab切換
• 所有的下拉式功能表（Select）均要求按照設計稿樣式實現，下拉後的樣式自訂，不需要實現下拉選擇的功能，但樣式要實現
• 在Chrome中完美實現與設計稿的除了文字以外的各項圖片、字型、顏色、布局、內外邊距等樣式
• 有能力的同學可以嘗試跨瀏覽器的相容性
• 有能力的同學可以在實現一遍後嘗試用less, sass或者stylus等再實現一次

 

任務完成與總結：

 一個人搞這個頁面，肝有點不行，索性不切圖了，計劃直接把大概的頁面寫出來，然而寫到第二天的時候完全失去耐心Zzzz，這次任務算是考驗到我了。算了，還是分析其他人的代碼吧，不過自己的代碼還是要貼上，知道這次完成的十分不好，不管怎麼說，畢竟是親兒子（自己寫出來的），就不嫌它丟人了。

 

 

 

下面是一個做的比較好的團隊作品：

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處理也是可以，只不過背景顏色處理上有些麻煩，以及它的相容性問題。

 

任務九：使用HTML/CSS實現一個複雜頁面