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

前端之家收集整理的这篇文章主要介绍了JS实现京东首页之页面顶部、Logo和搜索框功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

这里写图片描述

下面页面布局详细分析:

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

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

2、logo&搜索框分四个部分实现:左边京东logo、中间搜索框(上部:快速搜索;下部:热门搜索)、右部我的京东&去购物车(步骤类似我的京东,省略)

分析图:

这里写图片描述

具体实现代码如下:

jd_index.html

Insert your title <Meta charset="utf-8">

猜你在找的JavaScript相关文章