首页
所有分类
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 相关文章推荐
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
微信小程序：数据存储、传值、取值详解
May 07 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) VOLVO(1) ETON(1) R601SW(1) 军机(1) 矿石收音机(1) 沃尔沃(1) S900(1) 66-XI(1) E1-XM(1)
You might like
精通php的十大要点(上)
2009/02/04 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php定界符
2014/06/19 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
兼容IE和FF的js脚本代码小结（比较常用）
2010/12/06 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
document.write的几点使用心得
2014/05/14 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
python求pi的方法
2014/10/08 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
python机器学习之神经网络（一）
2017/12/20 Python
django的model操作汇整详解
2019/07/26 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
美国网上花店：JustFlowers
2017/02/12 全球购物
韩国现代百货官网：Hmall
2018/03/21 全球购物
迪奥官网：Dior.com
2018/12/04 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
标准的毕业生自荐信
2014/04/20 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
起诉状范本
2015/05/20 职场文书
教务处教学工作总结
2015/08/10 职场文书
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python