淘寶-靜態頁面編寫（4）--頭部搜尋/導航欄

阿新 • • 發佈：2020-12-29

頭部搜尋

分塊

在這裡插入圖片描述
首先我們觀察這部分，可清晰的將它分成三個模組，左邊的淘寶網，中間的搜尋欄以及右邊的二維碼。這裡我們需想一下怎麼把中間的搜尋欄放入中間位置，我採用的是先將左右兩側靠邊放置並設定浮動，那麼中間的搜尋欄就會上去，再設定margin：0 auto後就可以將搜尋欄居中啦

左邊淘寶網

淘寶網這裡是一個圖片，一般採用以圖換字的方法，使頁面在設計和可訪問性之間達到平衡，並且由於在頁面左側，將其設定為左浮動：

<h1 class="fl"><a href="#">淘寶網</a> 
</h1>

#headSearch h1 a{

	display: block;
	width: 190px;
	height: 58px;
	background: url(../img/logo.png) center no-repeat;
	/* 以圖換字，方便結構的檢視和，使頁面在設計和可訪問性之間達到平衡 */
	text-indent: -9999px;
	overflow: hidden;
	margin-top: 8px;
}

右邊二維碼

我們將二維碼這塊分成三塊，第一塊關閉的小圖示，第二塊手機淘寶這行文字，第三塊一張圖片，由於第一塊和第二塊處於同一行，所以我們將它們設定成行級元素span。而二維碼圖片在這行元素的下面，那麼我們就可以採用定位的方式：

        <div class="code fr">
            <span class="iconfont close">&#xe614;</span>
            <span class="c5">手機淘寶</span>
            <img src="img/code.png" alt="">
        </div>

#headSearch .code{
	width 
: 72px;
	height: 86px;
	border: 1px solid #eee;
	position: relative;
	margin-right: 110px;
	text-align: center;
}

#headSearch .code img{
	width: 62px;
	height: 62px;
}

#headSearch .close{
	position: absolute;
	left: -16px;
	top: -1px;
	width: 14px;
	height: 14px;
	line-height: 14px;
	font-size: 14px;
	border: 1px solid #eee;
	color: #ddd;
	cursor: pointer;
}

中間搜尋框

在這裡插入圖片描述
這部分就比較複雜，且聽我慢慢道來：

第一部分：
第一部分比較簡單，用一個ul配合三個li標籤即可，這裡寶貝這個標籤給他加上獨特的樣式，這裡注意漸變色的知識點：

 <ul class="searchTab clearfix">
                <li  class="active">寶貝</li>
                <li>天貓</li>
                <li>店鋪</li>
 </ul>

這裡行高和高度設定成一樣使文字居中

#headSearch .searchTab{
	height: 22px;
	padding-left: 17px;
}
#headSearch .searchTab li{
	float: left;
	width: 36px;
	line-height: 22px;
	margin-right: 4px;
	text-align: center;
	color: #f40;
	cursor: pointer;
}
#headSearch .searchTab li:hover{
	background-color: #ffeee5;
}

#headSearch .searchTab li.active{
	color: #fff;
	font-weight: bold;
    /* 漸變色，第一個屬性表示往哪裡漸變，第二個第三個表示從第二個顏色向第一個顏色變 */
	background-image: linear-gradient(to right,#ff9000,#ff5000);
	
	border-radius: 6px 6px 0 0;
}

第二部分
在這裡插入圖片描述
分層：
這整個是一個塊級元素但是這個塊級元素又分為了兩部分，一部分是輸入框向左浮動，一部分是搜尋按鈕向右浮動。
左邊是一個輸入框，那麼我們使用form表單和input來寫輸入框，又因為搜尋框內一部分是左浮動而另一部分是右浮動，所以我們這裡再嵌入一個塊級標籤

   <div class="search">
            <ul class="searchTab clearfix">
                <li  class="active">寶貝</li>
                <li>天貓</li>
                <li>店鋪</li>
            </ul>
            <div class="searchContent clearfix">
               <form action="#">
                <div class="searchBox fl">
                    <input type="text">
                    <!-- 放置放大鏡和隱藏的文字 -->
                    <!-- 左浮動 -->
                    <div class="placeholder">
                       <i class="iconfont">&#xe615;</i>
                       <span>網紅褲腰帶 洋氣 國際範 9.9包郵</span>
                    </div>
                    <!-- 右浮動 -->
                    <span class="iconfont imgSearch">&#xe6ba;</span>
               </div>       
               </form>
         
          <div class="btn fl">
              <button type="submit">搜尋</button>
          </div>
        </div>

#headSearch .searchBox input{
	width: 490px;
	height: 36px;
	line-height: 36px;
	outline: none;
	border: none;
	text-indent: 10px;

	position: absolute;
	z-index: 2;
	background-color: transparent;	/* 透明而不是白色，為了能夠看到後面的文字 */
}

#headSearch .placeholder{
	position: absolute;
	top: 6px;
	left: 14px;
}
#headSearch .placeholder span{
	color: #9c9c9c;
	vertical-align: 1px;
}
#headSearch .imgSearch{
	font-size: 28px;
	color: #9c9c9c;
	position: absolute;
	right: 20px;
	top: -2px;
	cursor: pointer;
}
#headSearch .searchContent button{
	width: 74px;
	height: 40px;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
	color: #fff;
	border: none;
	background-image: linear-gradient(to right,#ff9000,#ff5000);
	border-radius: 0 20px 20px 0;
}

第三部分

      </div>
            <div class="hotKey">
                <a href="#" class="c5">積木</a>
                <a href="#">網線</a>
                <a href="#" class="c5">爬行墊</a>
                <a href="#">時尚連衣裙</a>
                <a href="#">男士t恤</a>
                <a href="#" class="c5">時尚休閒褲</a>
                <a href="#">粽子</a>
                <a href="#">沙發</a>
                <a href="#">風扇</a>
                <a href="#">定製窗簾</a>
                <a href="#">男士內褲</a>
                <a href="#">涼蓆三件套</a>
                <a href="#">辦公桌</a>
            </div>
        </div>

#headSearch .hotKey{
	height: 25px;
	line-height: 25px;
	left:15px;
	position: relative;
}
#headSearch .hotKey a:hover{
	color: #f50;
}

導航欄

在這裡插入圖片描述
分成兩個部分：
這裡第一部分可以用標題標籤來表示，畢竟是一個標題
第二部分ul，li標籤即可，這裡注意一下點擊出現淘寶小圖示的技術寫法

  <div id="nav">
        <h2 class="fl">主題市場</h2>
            <ul>
                <li class="size"><a href="#">天貓</a></li>
                <li class="size"><a href="#">聚划算</a></li>
                <li class="size"><a href="#">天貓超市</a></li>
                <li class="line">|</li>
                <li><a href="#">淘搶購</a></li>
                <li><a href="#">電器城</a></li>
			    <li><a href="#">司法拍賣</a></li>
			    <li><a href="#">淘寶心選</a></li>
			    <li><a href="#">興農扶貧</a></li>
			    <li class="line">|</li>
			    <li><a href="#">飛豬旅行</a></li>
			    <li><a href="#">智慧生活</a></li>
			    <li><a href="#">蘇寧易購</a></li>
            </ul>
    </div>

#nav h2{
	width:190px;
	height:30px;
	text-align: center;
	background-color: #f50;
}

#nav ul{
	height: 30px;
	margin-left: 190px;
	background-image: linear-gradient(to right,#ff9000,#ff5000);
}
#nav ul li{
	float:left;
	line-height: 30px;
	text-align: center;
	font-size: 14px;
	margin: 0 7px;
	padding: 0 5px;
	position: relative;
}

#nav ul li a{
	color: #fff;
	font-weight: bold;
}

#nav ul li.size{
	font-size: 16px;
}
#nav ul li.line{
	margin: 0;
	padding: 0;
	color: #fff;
}

#nav ul li:hover:before{
	content: '';
	/* 定位定義那個小圖標出現在文字上面 */
	position: absolute;
	width: 23px;
	height: 13px;
	/* 點選的時候出現一個小圖示 */
	background-image: url(../img/ico_01.gif);

	top: -13px;
	left: 50%;
	margin-left: -12px;
}