首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现京东首页之页面顶部、Logo和搜索框功能

Posted in Javascript onJanuary 12, 2017

    昨天我们主要讲了京东首页的基本布局，今天我们主要来逐步实现京东首页的页面顶部、Logo&搜索框。首先我们来看下我们今天将要实现的效果：

JS实现京东首页之页面顶部、Logo和搜索框功能

下面页面布局详细分析：

1、页面头部分三个部分依次实现：五角星图、收藏京东、右边文字部分（用列表实现）；

其中当鼠标停放在手机京东上，手机背景图发生变化，变成红色带jd的图案；当鼠标悬停在客服服务上，出现下拉列表。

2、Logo&搜索框分四个部分实现：左边京东Logo、中间搜索框（上部：快速搜索；下部：热门搜索）、右部我的京东&去购物车（步骤类似我的京东，省略）

分析图：

JS实现京东首页之页面顶部、Logo和搜索框功能

具体实现代码如下：

jd_index.html

<!doctype html>
<html>
  <head>
    <title>Insert your title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="jd_index.css">
  </head>
  <body>
    <!-- 1、网页头部 -->
    <header id="top">
      <!-- 1、五角星(左) -->
      <img class="lf" src="Images/star.jpg">
      <!-- 2、收藏京东(左) -->
      <a href="#" class="lf">收藏京东</a>
      <!-- 3、文字列表(右) -->
      <ul class="rt">
        <li>
          您好，欢迎来到京东
          <a href="#">[登录]</a>
          <a href="#">[免费注册]</a>
        </li>
        <li>
          <b></b> <!-- 边框 -->
          <a href="#">我的订单</a>
        </li>
        <li class="vip">
          <b></b> <!-- 边框 -->
          <a href="#">会员俱乐部</a>
        </li>
        <li class="dakehu">
          <b></b> <!-- 边框 -->
          <a href="#">企业频道</a>
        </li>
        <li class="app_jd">
          <b></b> <!-- 边框 -->
          <a href="#">手机京东</a>
        </li>
        <li class="service">
          <b></b> <!-- 边框 -->
          <a href="#">客户服务</a>
          <!-- 弹出菜单 -->
          <ul id="service_items">
            <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>
          </ul>
        </li>
        <li>
          <b></b> <!-- 边框 -->
          <a href="#">网站导航</a>
        </li>
      </ul>
    </header>
    <!-- 2、LOGO 和 搜索框 -->
    <div id="top_main">
      <!-- 1、LOGO -->
      <a href="#" class="lf">
        <img src="Images/logo-201305.png">
      </a>    
      <!-- 2、搜索框和搜索按钮 -->
      <div id="search_box">
        <!-- 1、搜索框和按钮 -->
        <div class="search">
          <input class="txtSearch">
          <button>搜索</button>
        </div>
        <!-- 2、热门搜索 -->
        <div class="hot_words">
          <span>热门搜索：</span>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
        </div>
      </div>
      <!-- 3、我的京东 -->
      <div id="my_jd">
        我的京东
        <b></b><!-- 向下箭头 -->
      </div>
      <!-- 4、去购物车结算 -->
      <!-- 5、追加空子元素，撑起top_main -->
      <div class="clear"></div>
    </div>
    <!-- 3、主导航-->
    <nav id="nav">主导航</nav>
    <!-- 4、banner广告部分-->
    <div id="banner">banner广告部分</div>
    <!-- 5、页面主体-->
    <section id="main">页面主体</section>
    <!-- 6、页面底部-配送方式 -->
    <footer id="foot_box">配送方式</footer>
    <!-- 7、页面底部-备案号 -->
    <footer id="footer">备案号</footer>
  </body>
</html>

外部样式：

jd_index.css

/*测试属性*/
#nav,#banner,#main,#foot_box,#footer{
  border:1px solid black;
}
/*通用*/
body{
  font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
  color:#666;
  margin:0;
}
ul,p,h1,h2,h3,h4,h5,h6,ol,dl,dd{
  margin:0;
  padding:0;
  list-style:none;
}
img{vertical-align:bottom;}
a{
  color:#666;
  text-decoration:none;
}
a:hover{
  color:#FF0700;
  text-decoration:underline;
}
.lf{float:left;}
.rt{float:right;}
.clear{clear:both;}
/**布局元素样式**/
#top,#top_main,#nav,#banner,#main,#foot_box,#footer{
  width:1211px;
  margin:0 auto;
}
/*******1、页面顶部**********/
#top{
  /*高度，行高，背景颜色，下边框*/
  height:30px;
  line-height:30px;
  background-color:#f7f7f7;
  border-bottom:1px solid #eee;
}
#top>img{
  margin-top:10px;
  margin-right:5px;
}
/*文字列表*/
#top>ul>li{
  float:left;
  margin-right:10px;
}
#top>ul b{
  border-left:1px solid #ddd;
  margin-right:10px;
}
/*会员俱乐部*/
li.vip a{
  padding-left:34px;
  background:url(Images/vip.jpg) no-repeat left center;
}
/*大客户*/
li.dakehu a{
  padding-left:31px;
  background:url(Images/dakehu.jpg) no-repeat left center;
}
/*手机京东*/
li.app_jd a{
  /*左内边距，行内块，高度，行高，背景*/
  padding-left:23px;
  display:inline-block;
  height:22px;
  line-height:22px;
  background:url(Images/iconlist_2.png) no-repeat -128px -360px;
}
li.app_jd a:hover{
  background-position:-128px -399px;
}
/*客户服务*/
li.service>a{
  /*左右内边距模拟宽度*/
  padding:0 15px;
  /*高度，行高*/
  display:inline-block;
  height:26px;
  line-height:26px;
  /*背景图像：水平偏右，垂直居中*/
  background:url(Images/jt_down.jpg) no-repeat 95% center;
  /*左右上边框：透明*/
  border:1px solid transparent;
  border-bottom:none;
}
/*客户服务-弹出菜单*/
li.service{
  /*相对定位：配合#service_items 做绝对定位*/
  position:relative;
}
#service_items{
  /*宽度，边框，背景颜色，文本水平居中，定位*/
  box-sizing:border-box;
  width:80px;
  border:1px solid #ddd;
  border-top:none;
  background-color:#fff;
  text-align:center;
  /*绝对定位*/
  position:absolute;
  top:28px;
  left:11px;
  /*默认隐藏*/
  display:none;
}
/*当鼠标移入到li.service上时，找到其子级#service_items ,并且显示*/
li.service:hover #service_items{
  display:block;
}
/*当鼠标移入到li.service上时，找到其直接子级a标记，设置样式*/
li.service:hover>a{
  border-color:#ddd;
  background-color:#fff;
  background-image:url(Images/jt_up.jpg);
}
/**********2、LOGO 和 搜索框************/
#top_main{
  padding:10px 0;
}
/*搜索框和搜索按钮和热门搜索*/
#search_box{
  /*左浮动，宽度，左右外边距，min-height*/
  float:left;
  width:500px;
  margin:0 80px 0 40px;
  min-height:30px;
}
#search_box div.search{
  /*高度，背景颜色*/
  height:30px;
  background-color:#e4393c;
  /*边框*/
  padding:3px;
}
#search_box input{
  /*宽度，高度，取消边框*/
  width:410px;
  height:30px;
  border:none;
  box-sizing:border-box;
  padding-left:10px;
}
#search_box button{
  /*宽度，高度，取消边框，背景颜色*/
  width:80px;
  height:28px;
  border:none;
  background-color:#E4393C;
  /*文字：大小，颜色，加粗*/
  font-size:14px;
  color:#fff;
  font-weight:bold;
}
/*热门搜索*/
#search_box div.hot_words{
  /*上外边距*/
  margin-top:5px;
  /*宽度，高度，溢出隐藏*/
  width:500px;
  height:16px;
  overflow:hidden;
}
#search_box div.hot_words span{
  color:#999;
}
#search_box div.hot_words a{
  color:#999;
}
/*我的京东*/
#my_jd{
  /*左浮动，边框，背景*/
  float:left;
  border:1px solid #EFEFEF;
  background-color:#f7f7f7;
  /*高度，左内边距，背景图像*/ /*20*17*/
  padding-left:30px;
  height:27px;
  line-height:27px;
  background-image:url(Images/iconlist_2.png);
  background-repeat:no-repeat;
  background-position:-116px -25px;
  padding-right:5px;
}
#my_jd:hover{
  background-color:#fff;
  background-position:-116px -55px;
}
#my_jd b{
  /*行内块，宽度，高度，边框 */
  display:inline-block;
  width:0px;
  height:0px;
  border:5px solid transparent;
  border-top-color:#ccc;
  /*相对定位：实现该元素的位置微调*/
  position:relative;
  top:3px;
}

以上所述是小编给大家介绍的JS实现京东首页之页面顶部、Logo和搜索框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

JS实现京东首页之页面顶部、Logo和搜索框功能

- Author -

Andone_hsx

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 #Javascript
原生js实现焦点轮播图效果
Jan 12 #Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 #Javascript
vuejs父子组件通信的问题
Jan 11 #Javascript
bootstrap 表单验证使用方法
Jan 11 #Javascript
原生js实现无缝轮播图效果
Jan 11 #Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 #Javascript
字符画(1) Vite(1) hook(1) expdp(1) callback(1) 脚本(1) dict(1) 热力图(1) cudnn(1) 数据备份(2)
You might like
php url路由入门实例
2014/04/23 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python调用C++程序的方法详解
2017/01/24 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python 生成器，迭代，yield关键字，send()传参给yield语句操作示例
2019/10/12 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
法学专业毕业生自荐信范文
2013/12/18 职场文书
《假如》教学反思
2014/04/17 职场文书
环保宣传标语
2014/06/12 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
学校远程教育工作总结
2015/08/11 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript