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

2017-01-13 08:21:46来源:作者:人点击

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



下面页面布局详细分析:

1、页面头部分三个部分依次实现:五角星图、收藏京东、右边文字部分(用列表实现);

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

2、Logo&搜索框分四个部分实现:左边京东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和搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

Android仿京东首页画轴效果
Android仿京东首页轮播文字效果
利用AngularJs实现京东首页轮播图效果

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台