JS实现京东首页之页面顶部、实现京东首页之页面顶部、Logo和搜索框功能和搜索框功能
昨天我们主要讲了京东首页的基本布局，今天我们主要来逐步实现京东首页的页面顶部、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>
weixin_38728277
- 粉丝: 3
- 资源: 864
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论5