淘宝-静态页面编写（4）--头部搜索/导航栏

怼烎@ 2022-12-29 01:56 145阅读 0赞

# 头部搜索 #

## 分块 ##

![在这里插入图片描述][2020121908233766.png]  
首先我们观察这部分，可清晰的将它分成三个模块，左边的淘宝网，中间的搜索栏以及右边的二维码。这里我们需想一下怎么把中间的搜索栏放入中间位置，我采用的是先将左右两侧靠边放置并设置浮动，那么中间的搜索栏就会上去，再设置margin：0 auto后就可以将搜索栏居中啦

## 左边淘宝网 ##

淘宝网这里是一个图片，一般采用以图换字的方法，使页面在设计和可访问性之间达到平衡，并且由于在页面左侧，将其设置为左浮动：

#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。而二维码图片在这行元素的下面，那么我们就可以采用定位的方式：

#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;
    }

## 中间搜索框 ##

![在这里插入图片描述][20201219195125121.png]  
这部分就比较复杂，且听我慢慢道来：

**第一部分：**  
第一部分比较简单，用一个ul配合三个li标签即可，这里宝贝这个标签给他加上独特的样式，这里注意渐变色的知识点：

这里行高和高度设置成一样使文字居中

#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;
    }

**第二部分**  
![在这里插入图片描述][20201219203440397.png]  
*分层：*  
这整个是一个块级元素但是这个块级元素又分为了两部分，一部分是输入框向左浮动，一部分是搜索按钮向右浮动。  
左边是一个输入框，那么我们使用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"></i>
                           <span>网红裤腰带 洋气 国际范 9.9包邮</span>
                        </div>
                        
                        <span class="iconfont imgSearch"></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;
    }

# 导航栏 #

![在这里插入图片描述][2020121920470192.png]  
分成两个部分：  
这里第一部分可以用标题标签来表示，毕竟是一个标题  
第二部分ul，li标签即可，这里注意一下点击出现淘宝小图标的技术写法

#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;
    }

ps：要相关素材可以评论区留言哟

[2020121908233766.png]: /images/20221120/ddefff88e7014f7f9c5c0181ea593632.png
[20201219195125121.png]: /images/20221120/42df03d689c941b88ad296faf7132c34.png
[20201219203440397.png]: /images/20221120/2a5c1c9695b148949e0c0e6cf4e06ab8.png
[2020121920470192.png]: https://img-blog.csdnimg.cn/2020121920470192.png