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> </li> <li> <b></b> <!-- 边框 --> <a href="#">网站导航</a> </li> </ul> </header> <!-- 2、LOGO 和 搜索框 --> <div id="top_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、追加空子元素,撑起top_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;} /**布局元素样式**/ #top,#top_main,#nav,#banner,#main,#foot_box,#footer{ width:1211px; margin:0 auto; } /*******1、页面顶部**********/ #top{ /*高度,行高,背景颜色,下边框*/ height:30px; line-height:30px; background-color:#f7f7f7; border-bottom:1px solid #eee; } #top>img{ margin-top:10px; margin-right:5px; } /*文字列表*/ #top>ul>li{ float:left; margin-right:10px; } #top>ul b{ border-left:1px solid #ddd; margin-right:10px; } /*会员俱乐部*/ li.vip a{ padding-left:34px; background:url(Images/vip.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-top:none; background-color:#fff; text-align:center; /*绝对定位*/ position:absolute; top: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 和 搜索框************/ #top_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-top: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; /*高度,左内边距,背景图像*/ /*20*17*/ 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-top-color:#ccc; /*相对定位:实现该元素的位置微调*/ position:relative; top:3px; }
以上所述是小编给大家介绍的JS实现京东首页之页面顶部、Logo和搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
在JavaScript中查找字符串中最长单词的三种方法(推荐)
这篇文章主要介绍了在JavaScript中查找字符串中最长单词的三种方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-01-01JS获取当前日期 YYYY-MM-DD hh-mm-ss的示例代码
在编写JavaScript代码时,遇到需要获取当前日期和时间并将其格式化为 yyyymmddhhmmss 字符串的情况,可以使用本文中介绍的几种实现方式中的任意一种,2024-02-02
最新评论