头部搜索

分块

首先我们观察这部分，可清晰的将它分成三个模块，左边的淘宝网，中间的搜索栏以及右边的二维码。这里我们需想一下怎么把中间的搜索栏放入中间位置，我采用的是先将左右两侧靠边放置并设置浮动，那么中间的搜索栏就会上去，再设置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"></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"></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;
}

导航栏

分成两个部分：
这里第一部分可以用标题标签来表示，毕竟是一个标题
第二部分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;
}

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

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

淘宝-静态页面编写(2)--给淘宝写个头吧
标题首先我们看到html页面的头部: 技术点: 我们需要在标题内写入相关文字 <title>淘宝网 - 淘!我喜欢</title> 并且在左侧插入图标 <!--图片楼下 ...
淘宝静态页面html+css部分
淘宝静态页面html+css部分未来前端程序员为你提供一小点点的帮助,希望能够帮助你. 这是一个简简单单的淘宝静态页面,没有用到JavaScript部分.相信大家都知道,淘宝静态网页也不是特别的简单 ...
超详细实现淘宝静态页面(附全部代码)
文章目录一:基本结构与样式二:头部信息结构 1.淘宝小图标 2.目前效果 3.代码三:头部信息样式与自定义图标 1.设置收藏夹图标注意: 四:头部广告结构与样式 1.h标签的应用五:全部代码 ...
HTML+CSS实现淘宝静态页面
刚入门HTML+CSS,学习了一段时间后,为了练手,便写了这样一个静态的淘宝页面.就在刚才,终于完工.不得不说,内心有点小激动- 代码有点多,贴出来不太方便.如果大家有需要的话,直接去演示页面查看源代 ...
html,css 淘宝静态页面
源码素材下载地址点击我下载
淘宝装修新旺铺如何让店招导航栏透明？
http://www.i7gou.com/thread-7098-1-1.html 转载于:https://www.cnblogs.com/chenhaib/p/3313884.html
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
学生dreamweaver网页设计作业成品：电商网页设计——仿淘宝静态首页(HTML+CSS)
学生dreamweaver网页设计作业成品:电商网页设计--仿淘宝静态首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...

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

头部搜索

分块

左边淘宝网

右边二维码

中间搜索框

导航栏

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

最新文章

热门文章