网页设计作业`京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载
2024-06-14 20:56:40
HTML5期末大作业：京东网站设计——仿京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载
文章目录
- HTML5期末大作业：京东网站设计——仿京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、学习资料
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Keywords" content="关键词123"><meta name="Description" content="描述"><link rel="shortcut icon" href="/picture/1.ico" /><link rel="stylesheet" type="text/css" href="public/css/base.css"><!-- 引入base.css --><link rel="stylesheet" type="text/css" href="css/shortcut.css"><!-- 头部导航 --><link rel="stylesheet" type="text/css" href="css/header.css"><!-- 头部搜索栏 --><link rel="stylesheet" type="text/css" href="./css/navjd.css" /><!-- 文字导航，轮播图 --><link rel="stylesheet" type="text/css" href="./css/tab.css" /><!-- 选项卡 --><script src="public/js/jquery-3.1.1.js"></script><title>京东(JD.COM)综合网购首选</title><style type="text/css"></style>
</head><body><div id="shortcut"><div class="w"><ul class="fl"><!-- 所在城市区块 --><li class="dropdown" id="ttbar-mycity"><div class="dt cw-icon"><i class="iconfont"></i><span>北京</span></div><!-- 所在城市区块下拉菜单 --><div class="dd dropdown-layer"><div class="item"><a class="selected" href="">北京</a></div><div class="item"><a href="">上海</a></div><div class="item"><a href="">天津</a></div><div class="item"><a href="">重庆</a></div><div class="item"><a href="">河北</a></div><div class="item"><a href="">山西</a></div><div class="item"><a href="">河南</a></div><div class="item"><a href="">辽宁</a></div><div class="item"><a href="">吉林</a></div><div class="item"><a href="">黑龙江</a></div><div class="item"><a href="">内蒙古</a></div><div class="item"><a href="">江苏</a></div><div class="item"><a href="">山东</a></div><div class="item"><a href="">安徽</a></div><div class="item"><a href="">浙江</a></div><div class="item"><a href="">福建</a></div><div class="item"><a href="">湖北</a></div><div class="item"><a href="">湖南</a></div><div class="item"><a href="">广东</a></div><div class="item"><a href="">广西</a></div><div class="item"><a href="">江西</a></div><div class="item"><a href="">四川</a></div><div class="item"><a href="">海南</a></div><div class="item"><a href="">贵州</a></div><div class="item"><a href="">云南</a></div><div class="item"><a href="">西藏</a></div><div class="item"><a href="">陕西</a></div><div class="item"><a href="">甘肃</a></div><div class="item"><a href="">青海</a></div><div class="item"><a href="">宁夏</a></div><div class="item"><a href="">新疆</a></div><div class="item"><a href="">港澳</a></div><div class="item"><a href="">台湾</a></div><div class="item"><a href="">钓鱼岛</a></div><div class="item"><a href="">海外</a></div></div></li></ul><!-- 导航栏右侧 --><ul class="fr"><li id="ttbar-login"><a href="" class="link-login">您好 , 请登录 </a><a href="" class="link-regist">免费注册</a></li><li class="spacer"></li><li><div class="dt"><a href="">我的订单</a></div></li><li class="spacer"></li><li id="ttbar-myjd" class="dropdown"><div class="dt cw-icon"><a href="">我的京东</a><i class="iconfont"></i><!-- 我的京东下拉菜单 开始--><div class="dd dropdown-layer"><div class="userinfo"><div class="u-pic"><a href=""><img src="picture/shortcut/user.jpg" alt="" width="60px" height="60px"></a></div><div class="u-name u-login"><a href="">你好，请登录</a></div><div class="u-extra"><a href="">优惠券<span></span></a> | <a href="">消息<span></span></a></div></div><!-- userinfo end --><div class="otherlist"><div class="fore1"><div class="item"><a href="">待处理订单<span></span></a></div><div class="item"><a href="">我的问答<span></span></a></div><div class="item"><a href="">降价商品<span></span></a></div><div class="item"><a href="">返修退换货<span></span></a></div></div><div class="fore2"><div class="item"><a href="">我的关注<span></span></a></div><div class="item"><a href="">我的京豆<span></span></a></div><div class="item"><a href="">我的理财<span></span></a></div><div class="item"><a href="">京东白条<span></span></a></div></div></div><!-- otherlist结束 --></div><!-- dd end 下拉菜单结束 --></div><!-- dt end控制左右边距 结束--></li><li class="spacer"></li><li><div class="dt"><a href="">京东会员</a></div></li><li class="spacer"></li><li><div class="dt"><a href="">企业采购</a></div></li><li class="spacer"></li><li id="ttbar-serv" class="dropdown"><div class="dt cw-icon"><a href="">客户服务</a><i class="iconfont"></i><div class="dd dropdown-layer"><div class="item-client">客户</div><div class="item"><a href="">帮助中心</a></div><div class="item"><a href="">售后服务</a></div><div class="item"><a href="">在线客服</a></div><div class="item"><a href="">电话客服</a></div><div class="item"><a href="">意见建议</a></div><div class="item"><a href="">客服邮箱</a></div><div class="item fn-clear"><a href="">金融咨询</a></div><div class="item-business">商户</div><div class="item"><a href="">京东商学院</a></div><div class="item"><a href="">商家入驻</a></div></div></div></li><li class="spacer"></li><li class="dropdown" id="ttbar-navs"><div class="dt cw-icon"><a href="">网站导航</a><i class="iconfont"></i><div class="dd dropdown-layer"><dl class="fore1"><dt>特色主题</dt><dd><div class="item"><a href="">品牌街</a></div><div class="item"><a href="">好物100</a></div><div class="item"><a href="">京东预售</a></div><div class="item"><a href="">尖er货</a></div><div class="item"><a href="">京东首发</a></div><div class="item"><a href="">今日团购</a></div><div class="item"><a href="">优惠券</a></div><div class="item"><a href="">闪购</a></div><div class="item"><a href="">京东会员</a></div></ul></div><!-- 粗略写整体页面结束 --><script src="js/shortcut.js"></script><script src="public/js/banner.js"></script><script type="text/javascript">//*****************左侧导航***************//var cate = $(".cate");var num = $(".cate .cate_menu li").length;var oleftli = $(".cate .cate_menu li"); //显示区块var ofloatli = $(".navfloat ul li"); //隐藏区块bannerplay(cate, ofloatli, oleftli, 15, false, 1);//***************中间轮播图************//var slider_main = $(".slider_main");var picli = $(".slider_main .picban li");var lilen = picli.length;var leftbtn = $(".slider_main .left");var rightbtn = $(".slider_main .right");for (var i = 1; i <= lilen; i++) { //创建图片个数相对应的底部数字个数var li = "<li>" + i + "</li>"; //创建li标签，并插入到页面中$(".slider_main .num_btn").append(li);}var numli = $(".slider_main .num_btn li")bannerplay(slider_main, picli, numli, lilen, true, 0, leftbtn, rightbtn);//右侧选项卡bannerplay($(".mod_tab_head"), $(".mod_tab_content_item"), $(".mod_tab_head_item"), 2, false, 2);//*****************左侧楼梯导航*******************//$(".lift ul li").click(function() {//alert("dianji ");var index = $(this).index();//让滚动条移动到对应页面位置var topslide = $(".floor").eq(index).offset().top;$("html,body").animate({"scrollTop": topslide}, 1000);})//滚动条事件$(window).scroll(function() {var topslide = $(window).scrollTop();$(".floor").each(function(i) {if (topslide >= $(this).offset().top) {$(".lift ul li").eq(i).addClass("active").siblings().removeClass("active");}})//显示楼梯导航if (topslide > 1600) {$(".lift").show();} else {$(".lift").hide();}//显示搜索栏if (topslide > 660) {$("#search").addClass("search-fix");} else {$("#search").removeClass("search-fix");}})// $(document).mousemove(function(e){ //显示鼠标位置// console.log("X: " + e.pageX + ", Y: " + e.pageY);});</script></body></html>四、学习资料
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号
网页设计作业`京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载相关推荐
- HTML5期末大作业：京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载
HTML5期末大作业:京东网站设计--仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人. ...
- HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作 ...
- 静态HTML网页设计作品——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业 文章目录 HTML5期末大作业 一.作品展示 二.文件目录 三.代码实现 四.学习资料 五.完整源码 一.作品展示 二.文件目录 三.代码实现 <!DOCTYPE html ...
- HTML期末大作业——医药用品购物商城首页(1页) HTML+CSS+JavaScript HTML+CSS大作业_ 医药用品购物网页制作作业_医药用品购物页设计...
HTML5期末大作业:医药用品购物网站设计--医药用品购物商城首页(1页) HTML+CSS+JavaScript 文章目录 HTML5期末大作业:医药用品购物网站设计--医药用品购物商城首页(1页) ...
- TML5期末大作业：红色自适应网上鲜花网站设计——浪漫红色自适应网上鲜花店(16页) HTML+CSS+JavaScript 大学生鲜花网页作品 植物网页设计作业模板 学生网页制作源代码下载
HTML5期末大作业:红色自适应网上鲜花网站设计--浪漫红色自适应网上鲜花店(16页) HTML+CSS+JavaScript 大学生鲜花网页作品 植物网页设计作业模板 学生网页制作源代码下载 常见网 ...
- HTML5期末大作业：电影网站设计——电影我不是药神响应式页播(4页) HTML+CSS+JavaScript 大学生电影网页作品 影视网页设计作业模板 学生网页制作源代码下载
HTML5期末大作业:电影网站设计--电影我不是药神响应式页播(4页) HTML+CSS+JavaScript 大学生电影网页作品 影视网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 ...
- HTML5期末大作业：重庆火锅网站设计——代码质量好-重庆火锅(5页) HTML+CSS+JavaScript 大学生网页制作期末作业
HTML5期末大作业:重庆火锅网站设计--代码质量好-重庆火锅(5页) HTML+CSS+JavaScript 大学生网页制作期末作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
- HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网 ...
- HTML5期末大作业：游戏网站网站设计——仙灵游戏网站首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品
HTML5期末大作业:游戏网站网站设计--仙灵游戏网站首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
最新文章
- CountDownTimer的简单使用
- 读后感与机翻《理解工具:面向任务的对象建模、学习和识别》
- python下载不下来_Python不能下载zip文件，而Browser/Selenium可以下载，这是为什么？...
- c语言的内存管理方式,c语言内存管理
- 2019 CES展即将开启 思岚科技将会带来哪些超前科技盛宴？
- linux下重启weblogic（关闭和启动）
- android Lint优化代码
- 提升心力---摆脱拿着锤子看啥都是钉子
- React-Router面试题汇总
- 谷歌浏览器怎么禁用flash flash禁用方法分享
- 10.用好远程联机服务器
- Javascript特效：轮播图
- 花店橱窗布置问题(FLOWER)
- NVelocity条件选择语法
- 在Windows下使用安装并启动HDFView踩坑记录
- 解决excel里一复制就卡死的经验分享【转】
- java对人物画像分级_用户画像，该怎么分析？
- SQL优化步骤（建议收藏）
- 一二线城市 Java 程序员一般考虑入职的互联网公司清单？
- 计算机硬盘ssd,电脑有没有必要装固态硬盘的建议