昨天我们主要讲了京东首页的基本布局，今天我们主要来逐步实现京东首页的页面顶部、Logo&搜索框。首先我们来看下我们今天将要实现的效果：
下面页面布局详细分析：
1、页面头部分三个部分依次实现：五角星图、收藏京东、右边文字部分（用列表实现）；
其中当鼠标停放在手机京东上，手机背景图发生变化，变成红色带jd的图案；当鼠标悬停在客服服务上，出现下拉列表。
2、Logo&搜索框分四个部分实现：左边京东Logo、中间搜索框（上部：快速搜索；下部：热门搜索）、右部我的京东&去购物车（步骤类似我的京东，省略）
分析图：
具体实现代码如下：
jd_index.html
Insert your title
收藏京东
-
您好，欢迎来到京东
[登录]
[免费注册]
-
我的订单
-
会员俱乐部
-
企业频道
-
手机京东
-
客户服务
-
帮助中心
-
帮助中心
-
帮助中心
-
帮助中心
-
帮助中心
-
网站导航
热门搜索：
家纺11月大促
彩虹电热毯
博洋家纺
霞珍
家纺11月大促
彩虹电热毯
博洋家纺
霞珍
家纺11月大促
彩虹电热毯
博洋家纺
霞珍
家纺11月大促
彩虹电热毯
博洋家纺
霞珍
家纺11月大促
彩虹电热毯
博洋家纺
霞珍
家纺11月大促
彩虹电热毯
博洋家纺
霞珍
我的京东
banner广告部分
页面主体
外部样式：
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;
}
#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{
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:hover #service_items{
display:block;
}
li.service:hover>a{
border-color:#ddd;
background-color:#fff;
background-image:url(Images/jt_up.jpg);
}
#top_main{
padding:10px 0;
}
#search_box{
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;
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和搜索框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
