js实现了京东主页的首页、徽标和搜索框功能。
昨天我们主要谈到了京东主页的基本布局。今天，我们主要来了解京东主页和罗搜索框的首页，首先，让我们来看看我们今天将要达到的效果。下面页面布局的详细分析：
1，在把三部分页面头部：五角星，京东的收集、正确的文本部分（列表）；
当鼠标移动到京东手机上时，手机的背景地图发生了变化，并随着JD转变成红色模式。当鼠标悬停在客户服务服务上时，会有一个下拉列表。
2、LO搜索框分为四部分：左景东咯、中间搜索框（上一部分：快速搜索；底部：热搜索）；右侧我的京东购物车（步骤如我的Jingdong，省略）。
分析图：
具体实现代码如下：
jd_index.html
插入你的标题
收集京东
你好，欢迎来到景东
{登录}
{免费注册}
我的订单
会员俱乐部
企业频道
手机京东
客户服务
帮助中心
帮助中心
帮助中心
帮助中心
帮助中心
网站导航
搜索
热门搜索：
十一月家纺
彩虹电热毯
超过
霞珍
十一月家纺
彩虹电热毯
超过
霞珍
十一月家纺
彩虹电热毯
超过
霞珍
十一月家纺
彩虹电热毯
超过
霞珍
十一月家纺
彩虹电热毯
超过
霞珍
十一月家纺
彩虹电热毯
超过
霞珍
我的Jingdong
主导航
横幅广告的一部分
页体
分布模式
记录编号
外部样式：
jd_index.css
测试属性
# NAV，#旗帜，#主，# foot_box，#页脚{
border: 1px solid黑；
}
一般
体{
微软雅黑字体：12px
颜色：# 666；
保证金：0；
}
UL、P、H1、H2、H3、H4、H5、H6、OL、DL、DD {
保证金：0；
填充：0；
列表样式：无；
}
img {垂直对齐：底部；}
一个{
颜色：# 666；
文字装饰：无；
}
答：悬停{
颜色：# ff0700；
文字装饰：下划线；
}
{浮点数：左；}
浮点：正确；}
清除{两个}；}
布局样式元素**
#顶，# top_main，# NAV，#旗帜，#主，# foot_box，#页脚{
宽度：1211px；
保证金：0汽车；
}
******* / 1，页面的顶部/ **********
#顶{
高度、线条高度、背景色、边框。
身高：30px；
行高：30px；
背景颜色：# f7f7f7；
底部边框：1px solid # Eee；
}
#顶> img {
边距：10px；
右边距：5px；
}
/文本列表
#顶> 李{
浮点数：左；
右边距：10px；
}
#顶> UL B {
左边界：1px solid # DDD；
右边距：10px；
}
俱乐部
li.vip一{
左：34px填充；
背景：网址（图片/ VIP）不重复左中心；
}
客户
li.dakehu一{
左：31px填充；
背景：URL（图像/ dakehu .jpg）没有重复左中心；
}
移动电话Jingdong
li.app_jd一{
行、块、高、行高、背景中的左填充。
左：23px填充；
显示：内联块；
身高：22px；
行高：22px；
背景：URL（图像/ iconlist_2。PNG）没有重复128px - 360px；
}
li.app_jd：悬停{
背景位置：- 128px - 399px；
}
客户服务
李。服务> {
关于填充宽度*模拟
填充物：0 15px；
高度，高度。
显示：内联块；
身高：26px；
行高：26px；
背景：右图像的水平，垂直中心
背景：URL（图像/ jt_down .jpg）没有重复95%中心；
在边界周围：透明
border: 1px solid透明；
边界底部：无；
}
客户服务-弹出菜单
李，服务{
相对定位：用# service_items / * * /绝对定位
职位：相对；
}
# service_items {
宽度，边框，背景颜色，文字水平，定位。
盒尺寸：边框框；
宽度：80px；
边境：1px solid # DDD；
边界顶：无；
背景颜色：# FFF；
文本对齐：中心；
绝对定位
位置：绝对；
上图：28px；
左：11px；
默认情况下隐藏
显示：无；
}
当鼠标移动到* li.service，找到孩子# service_items，并显示。
李。服务：悬停# service_items {
显示块；
}
当鼠标移动到* li.service，发现的标志直接的孩子，设置样式。
李：服务：悬停> {
Border-color:#ddd;
背景颜色：# FFF；
背景图像：URL（图像/ jt_up .jpg）；
}
2 / **********，Lo和************ /搜索框
# top_main {
填料：10px 0；
}
搜索框和搜索按钮和搜索。
# search_box {
左，宽，左外边缘，最小高度*
浮点数：左；
宽度：500px；
保证金：0 80px 0 40px；
最小高度：30px；
}
# search_box div.search {
高度，背景色
身高：30px；
背景颜色：# e4393c；
边界
填料：3px；
}
# search_box输入{
宽度，高度，取消边界。
宽度：410px；
身高：30px；
边界：无；
盒尺寸：边框框；
左：10px填充；
}
# search_box按钮{
宽度，高度，取消帧，背景色。
宽度：80px；
身高：28px；
边界：无；
背景颜色：# e4393c；
*文字：大小，颜色，粗体字。
字体大小：14px；
颜色：# FFF；
字体粗细：粗体；
}
热门搜索
# search_box div.hot_words {
边缘
边距：5px；
宽度，高度，溢出隐藏。
宽度：500px；
身高：16px；
溢出：隐藏；
}
# search_box div.hot_words跨度{
颜色：# 999；
}
# search_box div.hot_words一{
颜色：# 999；
}
我是京东
# my_jd {
左，边框，背景。
浮点数：左；
边境：1px solid # efefef；
背景颜色：# f7f7f7；
高度、左填充、背景图像 * 20 * 17 *
左：30px填充；
身高：27px；
行高：27px；
背景图像：URL（图像/ iconlist_2。PNG）；
后台重复：不重复；
背景位置：- 116px - 25px；
填充右：5px；
}
# my_jd：悬停{
背景颜色：# FFF；
背景位置：- 116px - 55px；
}
# my_jd B {
在块，宽度，高度，框架。
显示：内联块；
宽度：0px；
身高：0px；
边境：5px固体透明；
边境上的颜色：# CCC；
相对定位：元素位置的微调。
职位：相对；
上图：3px；
}
以上是JS是由小编介绍给你，这就实现了网页的功能，Lo和Jingdong首页搜索框。希望能对你有所帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。