昨天我们主要讲了京东首页的基本布局,今天我们主要来逐步实现京东首页的页面顶部、Logo&搜索框。首先我们来看下我们今天将要实现的效果:
下面页面布局详细分析:
1、页面头部分三个部分依次实现:五角星图、收藏京东、右边文字部分(用列表实现);
其中当鼠标停放在手机京东上,手机背景图发生变化,变成红色带jd的图案;当鼠标悬停在客服服务上,出现下拉列表。
2、Logo&搜索框分四个部分实现:左边京东Logo、中间搜索框(上部:快速搜索;下部:热门搜索)、右部我的京东&去购物车(步骤类似我的京东,省略)
分析图:
具体实现代码如下:
jd_index.html
<!doctype html>
<
1