任務地址：http://ife.baidu.com/task/detail?taskId=9 點我直接飛機
想起來最近好久沒有更新博客了，就把這個任務放上吧~
百度前端技術學院，出了好幾個題，這個應該是最麻煩的吧。。不能說是最難。花一段時間做完了跟大家交流交流。
我ps掛了。看着他的預覽圖做的網頁，真是醉了。不過看他們做的出了一些問題，也還有百度給的一些坑。。看你們找全了嗎~
一。兩欄布局。
不知道大家是怎樣布局的。左邊固定，右邊自適應嗎？顯然都做成固定不太好吧。任務要求如下：
- 整個頁面內容寬度固定，但頭部的藍色導航和瀏覽器寬度保持一致
他這么說這是全固定的意思？反正我是在左邊設置的23%的寬，右邊77%的寬，float+min-width的布局，算是布局還ok吧，放很大就很難看了。縮小出滾動條。但是這樣就不行了。這是某團隊的提交:
當我一縮小瀏覽器。就亂了，顯然右邊欄的min-width沒設。布局亂了。
這次布局主要是這個問題，我當時也被這個問題所困擾：
這是咋了。。header是設置的width 100%；但是下面的內容超出100%了。100%怎么會被超過呢？？其實這個100%是相對於父元素的，追究到根，100%也就是瀏覽器的寬，如果沒設置的話。我瀏覽器寬1349px；然而下面的內容大於了這個值，下面的內容超過一屏，出來滾動條，然而上面的100%還是1349px。這就是上面這個例子的問題。
咋辦呢。
一種方法，把header放到內容里，顯然這里不可能。第二種，display：fiexd。然后也沒有這種需求。那咋辦。改布局唄。。。
先看這種方法咋布局的，左邊float，右邊margin-left左邊的寬。這是最簡單的左固定右自適應。然而的div是適應了。里面的內容沒寫適應。。超出div了。解決的方法就是這個div設置min-width，不能讓他很小了。然后里面所有的內容都得寫自適應，這樣你外層div變了，里層才能適應，而不是超出div。
我這里是怎么做的呢？開始說了。兩邊都是百分比，直接設置min-width，保持內容的wrapper總是100%寬。這樣就可以了。
二、自定義下拉框
百度給的下拉樣式是這樣的：
，然后我瀏覽器是這樣的：
，這就是需要自定義下拉框了。自定義下拉框怎么做呢?
這是我作品的截圖：
最重要的就是-webkit-appearance:
這里border padding，形成外管，那個下拉框的箭頭用了圖片背景。。checkbox的基本相同。
三、hover中的border
這里每次hover加一個border咋辦。直接加boder？不行，這樣試試你就知道內容會”一動一動“的。這是怎么了。
多加了這幾px的border對於下面的10：00am來說就得移位。因為10：00am是margin-top定位的，每次加border都會下移。
解決方法有兩個，一個是hover之前給他一個透明的border。這樣hover就是改了border的顏色。所以不會移動。
二呢，是改變定位。讓內容不在margint-top，position：absolute。對於這種定位，你border愛變不變，反正跟我沒關系。。
四、table布局的空隙
table布局，一不注意就直接寫完了。。然后效果是這樣的：
能看到。如果相鄰的td元素都有border這個border就重了。怎么給他加空隙呢？我試了td加padding，tr加padding，td加margin，tr加margin。然而都不起作用。但是width可以起作用。這樣也不行阿。
width也不能讓他有空隙阿。
這就要上這兩個東西了border-collapse:
border-spacing 屬性設置相鄰單元格的邊框間的距離（僅用於“邊框分離”模式）。
不多解釋了，大家親自試一下吧~效果呢是這樣的：
已經完美的分割開~
五、div滾動條
不知道是不是psd設計圖上面的東西，好多人給了div的滾動條，如下效果：
我作品里沒有做這個，我就提一下，用到屬性是overflow-y:
六、css的tab切換
- tab只需要實現樣式，有能力余力的同學可以嘗試實現不使用JavaScript的情況下，實現Tab切換
這是要求之一。tab切換呢，我沒做。就大體說一下吧。其實css的tab切換怎么辦呢，就是tab的顯示和隱藏的問題。但是css沒有點擊事件，怎么觸發顯示和隱藏呢（當然hover觸發就簡單多了）。這里css有偽類的選擇：
可以用到：focus，：checked等等。把標簽當作input，每次點擊就是一個focus，然后觸發關系選擇，選擇到下面相應的tab控制他的隱藏和顯示。：checked也是同樣的道理。
個人覺得是蠻麻煩的，就沒做。當然還是有不少大神做了的。大家可以參考一下他們的作品。
all over！
大體就需要注意這些，我的作品也還有一些細節沒處理好，大家共同學習進步。歡迎大家star和follow~~