導航條製作

接下來，開始製作京東的導航條。效果如下圖：

圖1

業務分析：
1.通欄盒子，並且有背景顏色
2.有版心。
3.版心裏面包含左右浮動的兩個盒子。
4.有下拉效果的盒子後面，有三角形標誌。
5.右邊的盒子裡面包含幾個li標籤。

分析完之後，對整個頭部的構架和要實現的功能都有簡單的了解，下面就是開始一步一步實現這些業務。

1.製作一個通欄的盒子，並設置背景顏色。

html代碼：

因為首頁頭部導航是共用的部分，所以樣式寫在base.css裡面。打開fireworks，用切片工具測量一下導航欄的高度為30px。（沒有樣本圖，抱歉。大家就不用測量了，直接用我給數據就行）。然後用吸管工具吸一下顏色，得到十六進位顏色為： #f1f1f1。寬度就是整個頁面，可以不用寫。
CSS代碼：

然後用瀏覽器打開，效果如下：

圖2

2.添加版心

版心就是網頁正中間，存放內容的盒子。通過測量版心的寬度為1210px。在上一篇css樣式格式化中，已經提取出來，並設置了寬度，這裡就不需要在單獨寫了，只需要添加一個盒子，帶w類就行。
html代碼：

可以給版心盒子增加高度，並設置一個背景顏色，看看效果：

圖3效果：

圖4

3.左邊盒子製作

版心盒子裡面包含兩個盒子，左邊的盒子內容是「送至：北京」，後面有三角符號。當點擊三角的時候，下拉列表會出現很多城市名，用戶可以自由選擇送達城市。
從語義上來講，這個盒子應該是個定義列表。所以，我就用定義列表做這個盒子。
HTML代碼：

效果：

圖5

文字出現在網頁中，但使沒有文本居中，所以要給父親盒子加行高，並使行高等於盒子的高度。

圖6

4.下拉小三角的製作

圖7

圖8

效果：

圖9

下面，只需要在CSS樣式裡面設置菱形的文本樣式，並給i盒子和s盒子的定位就行。

CSS代碼：

效果：

圖10

但是，我們想要是i盒子和菱形的下半部分重合，所以還需要給s盒子定位，使其再往上移一部分。

效果：

圖11

至此，小三角已經基本完工了，我們只需要給i盒子overflow：hidden，隱藏溢出部分，就留下了菱形下半部分。

圖12

效果：

圖13

好了，導航條左邊部分已經完工了，下篇接著做右邊部分。