首页
所有分类
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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
全面解析Bootstrap中tab（选项卡）的使用方法
Jun 06 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 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
apply(1) sortInts(1) WebSockets(3) agg(1) 数据处理(2) GUI(2) Tkinter(4) Hudi(1) feDisplacementMap(1) Pool(1)
You might like
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python迭代器实例简析
2014/09/25 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
北美大型运动类产品商城：Champs Sports
2017/01/12 全球购物
美国婚戒购物网站：Anjays Designs
2017/06/28 全球购物
Dyson戴森波兰官网：Dyson.pl
2019/08/05 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
安全生产责任书范本
2014/04/15 职场文书
离婚协议书范本样本
2014/08/19 职场文书
升学宴祝酒词
2015/08/11 职场文书
七年级英语教学反思
2016/02/15 职场文书
英文诗歌翻译方法（赏析）
2019/08/16 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书