Hong的前端之路-蘇寧易購首頁制作2

• 三、主體內容頂部的制作
• • 1.框架分析
  • 2.body_head 制作
  • • 1.具體分析（排版）
    • 2.CSS樣式添加
    • • 1.搜索框的制作
      • 2.body_head_logo的添加
      • 3,接下來進行下一大塊的制作

①Hong的前端之路-蘇寧易購首頁制作1

三、主體內容頂部的制作

接下來我們要制作的就是包含logo，搜索框，以及下面菜單的這一塊內容

1.框架分析

這塊內容可以劃分為5塊，蘇寧logo，搜索框，全部商品分類，右邊的圖片以及中間的菜單。我們又可以將logo和搜索框劃分為一塊（這一塊我起名為body_head），剩下的3部分為一塊（可以起名為body_menu）.

2.body_head 制作

1.具體分析（排版）

1.我們給body_head容器一個固定大小，一般就是版心的大小，然后將搜索框在容器中居中，再用定位將logo定位到容器左端。
2.這里有一個小技巧，在確定容器大小之后，可以給容器先添加邊框，以便于我們對每一塊的調整。等到CSS樣式添加完成之后，將添加的邊框去掉。如果邊框去掉后出現(xiàn)了一些問題再根據(jù)問題進行微調。
3.雖然我們沒有設計稿，但是我們可以直接在官網(wǎng)打開控制臺，直接查看元素的寬高，顏色，字體大小等。沒有必要自己去測量，這樣可以節(jié)省很多時間。關鍵的是一個思路，以及語法的細節(jié)。

2.CSS樣式添加

1.搜索框的制作

1.我們先給搜索框一個容器大小，添加一個邊框便于我們的調整。利用margin 0 auto； 進行居中。

.body_head .body_head_search {width: 600px;height: 100px;margin: 0 auto;position: relative;border :1px solid red;
}

2.接下來我們將本塊分為三部分，一個是搜索框input，一個是搜索按鈕 button，另一塊就是緊挨搜索框的菜單。先進行input的制作，先給這一塊加一個邊框，這個邊框加在了search_body的上面。

<div class="search_body"><span class="iconfont icon-sousuo"></span><input type="text" placeholder="輸入關鍵字搜索商品/品牌/店鋪"></div>

3. 接下來，我們通過定位將div定位，上下一定是居中，左右就要通過一些計算，定位的時候，要給父容添加相對定位，給自身添加絕對定位。一定要找準父容器。
   調整好位置之后，由于這個區(qū)域本身是有邊框的，我們直接修改邊框的大小，顏色，注意，搜索框沒有右邊框。

.body_head .body_head_search .search_body {position: absolute;top: 30px;width: 420px;height: 40px;border: 2px solid #fa0;border-right: none;margin: 30px 120px 30px 60px;position: relative;
}

4.我們進行區(qū)域內部樣式的添加，要清楚input 是有默認樣式的，不僅僅是邊框，而且當你鼠標點擊的時候，還會有一個邊框，這時候就需要用 outline:none;來取消默認樣式。input左邊的“放大鏡”可以通過添加矢量圖標進行添加。改變input輸入框的大小，讓它的大小和父容器相匹配。同時，我們可以看到，輸入框中當我們沒有輸入的時候，默認會有一些輸入內容，這時候我們就可以用input屬性placeholder來添加。

矢量圖標的調整：

.body_head .body_head_search .search_body span {font-size: 18px;line-height: 40px;color: #cccccc;padding-left: 5px;
}

input輸入框的調整：

.body_head .body_head_search .search_body input {width: 390px;height: 40px;font-size: 12px;border: 0px;outline: none;position: absolute;top: 0;
}

5.input輸入框的右邊，有一個搜索按鈕。有兩種方法來實現(xiàn)，第一種方法，我們取消按鈕的默認樣式，并調整合適的大小，將按鈕定位到input右邊，同時引入圖片將圖片定位到同一位置實現(xiàn)覆蓋。
第二種方法就是通過修改按鈕的樣式來達到同樣的效果。會有一個手型的變化

.body_head .body_head_search button {width: 120px;height: 44px;position: absolute; //手型的添加right: 4px;top: 30px;border: none;background: #ff9900;font-size: 18px;color: #ffffff;font-weight: bold;outline: none;
}

我們可以觀察到，當鼠標移動上去的時候背景也會發(fā)生變化。我們通過添加hover來實現(xiàn)。

.body_head .body_head_search button:hover {background: #ff8800;cursor: pointer;
}

6.接下來進行search_foot,也就是緊挨輸入框的菜單,菜單中的九個選項都是a鏈接,我們可以直接在div中嵌套9個a鏈接.然后通過調整選項之間的間距等,給div添加絕對定位,調整位置.可以看到每一個選項之間看到一條灰色的豎線.有兩種方法添加,一種是"手動添加",在每兩個a鏈接之間通過 i 標簽 添加一條豎線 " | ",這種無疑是比較low的,我采用第二種方法,直接給a鏈接添加一個左邊框.
定位菜單的位置

.body_head .body_head_search .search_foot {position: absolute;left: 53px;bottom: 3px;
}

菜單選項a鏈接的設置

.body_head .body_head_search .search_foot a {font-size: 12px;color: #999999;padding: 0 7px 0 8px;border-left: 1px solid #dddddd;
}

7.這時看到“電風扇”的左邊也有了邊框，實際上是沒有的，所有我們使用:nth-child() 偽類選擇器來進行調整。

.body_head .body_head_search .search_foot a:nth-child(1) {border: none;
}

8.有兩個選項的顏色與其他的不同，我們同樣通過偽類選擇器進行選擇添加。

.body_head .body_head_search .search_foot a:nth-child(2) {color: #ff6600;
}
.body_head .body_head_search .search_foot a:nth-child(4) {color: #ff6600;
}

9.a鏈接在選中的時候還會變色，我們再添加一個hover，

.body_head .body_head_search .search_foot a:hover {color: #ff6600;
}

至此，搜索框的制作就完成了

2.body_head_logo的添加

這塊內容就很簡單了，把logo定位到對應位置之后，調整大小就ok

<div class="body_head_logo"><img src="./img/logo.png" alt="蘇寧易購"></div>

.body_head .body_head_logo img {position: absolute;top: 0;left: 0;display: block;width: 190px;height: 90px;
}

3,接下來進行下一大塊的制作

1.這一塊內容分為了三塊，左邊的a鏈接，中間的menu，右邊的圖片(圖片中也是有鏈接的)

<div class="body_head_foot"><a href="#" class="body_head_foot_left"><span class="iconfont icon-liebiao"></span>全部商品分類</a><div class="body_head_foot_menu"><a href="#">天天低價</a><a href="#">紅孩子</a><a href="#">蘇寧超市!-- <img src="./img/index.png" alt=""> </a><a href="#">電器城</a><a href="#">生活家電</a><a href="#">時尚服飾</a><a href="#">蘇寧國際</a><a href="#">蘇寧Outlets</a><a href="#">金融</a></div><a href="#"><img src="./img/156810604991255454.png" alt=""></a>

2.接下來一塊一塊的調整，左邊調整，先將a鏈接轉成塊，否則a的大小由內容的大小決定，自定義的大小是無效的，為了便于調整，給“全部商品分類”添加了 i 標簽，注意一點：i 標簽默認是斜體，必須通過 font-style:normal 來調整成為正常字體.為了使字體居中,可以設置行高等于容器的高度.

.body_head_foot .body_head_foot_left {display: block;width: 190px;height: 38px;line-height: 38px;color: #ffffff;background: #ff9900;
}
.body_head_foot .body_head_foot_left span {font-size: 13px;padding-left: 4px;
}
.body_head_foot .body_head_foot_left i {font-size: 13px;font-style: normal;
}

此外,還有一個hover效果

.body_head .body_head_foot.body_head_foot .body_head_foot_left:hover {background: #ff6600;
}

3.進行menu和right 的定位

.body_head .body_head_foot .body_head_foot_menu {padding-left: 10px;position: absolute;left: 190px;bottom: 0;
}.body_head .body_head_foot .body_head_foot_right {position: absolute;right: 0;top: 0;
}

4.下來我們先進行right的定位,

.body_head .body_head_foot .body_head_foot_right {position: absolute;right: 0;top: 0;
}
.body_head .body_head_foot .body_head_foot_right img {width: 170px;height: 38px;
}

5.下面對menu進行處理
對menu進行CSS樣式的添加,很簡單,調整字體大小,設置margin或者padding調整選項的距離.需要注意的地方是:蘇寧超市后面有一個小圖標,那個是通過 雪碧圖 來進行引用,就是下面這張圖.

5.先進行menu其他樣式的添加先把a鏈接模塊化,之后就是正常的浮動,padding等

.body_head .body_head_foot .body_head_foot_menu {padding-left: 10px;position: absolute;left: 190px;bottom: 12px;
}
.body_head .body_head_foot .body_head_foot_menu a {float: left;display: block;padding: 0 14px 0 11px;font-size: 15px;font-weight: bold;line-height: 38px;
}

6.menu在選擇時有變色效果,添加hover

.body_head .body_head_foot .body_head_foot_menu a:hover {color: rgb(255, 102, 0);
}

7.最后我們來進行雪碧圖的添加.添加雪碧圖首先需要絕對定位position,通過背景圖 backgrou-image:url();來引用,然后用 background-position 來定位.然后設置所引用區(qū)域的大小.

.body_head .body_head_foot .body_head_foot_menu .hot {position: absolute;width: 14px;height: 17px;background-image: url(../img/index.png);background-position: -345px -213px;
}

總結

以上是生活随笔為你收集整理的苏宁易购首页制作2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。