JS实现京东首页之页面顶部、Logo和搜索框功能
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要实现京东的页面顶部，logo和搜索框功能，本文有效果展示，页面布局详细分析，具体实现代码，介绍的非常详细，具有参考借鉴价值，需要的的朋友参考下吧
昨天我们主要讲了京东首页的基本布局，今天我们主要来逐步实现京东首页的页面顶部、Logo&搜索框。我们来看下我们今天将要实现的效果
狼蚁网站SEO优化页面布局详细分析
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="">
<!-- 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="">
<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="_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、追加空子元素，撑起_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;}
/布局元素样式/
#,#_main,#nav,#banner,#main,#foot_box,#footer{
width:1211px;
margin:0 auto;
}
/1、页面顶部/
#{
/高度，行高，背景颜色，下边框/
height:30px;
line-height:30px;
background-color:#f7f7f7;
border-bottom:1px solid #eee;
}
#>img{
margin-:10px;
margin-right:5px;
}
/文字列表/
#>ul>li{
float:left;
margin-right:10px;
}
#>ul b{
border-left:1px solid #ddd;
margin-right:10px;
}
/会员俱乐部/
li. a{
padding-left:34px;
background:url(Images/.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-:none;
background-color:#fff;
text-align:center;
/绝对定位/
position:absolute;
: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 和 搜索框/
#_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-: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;
/高度，左内边距，背景图像/ /2017/
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--color:#c;
/相对定位实现该元素的位置微调/
position:relative;
:3px;
}
以上所述是长沙网络推广给大家介绍的JS实现京东首页之页面顶部、Logo和搜索框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
上一篇：js仿京东轮播效果 选项卡套选项卡使用
下一篇：JS百度地图搜索悬浮窗功能
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程