15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML5期末大作业:京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学

HTML5期末大作业:京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学

时间:2022-08-03 12:33:01 | 来源:网站运营

时间:2022-08-03 12:33:01 来源:网站运营

HTML5期末大作业:京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源代码下载

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
作者主页-更多源码

HTML期末大作业文章专栏

作品介绍

1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。

2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

3.网页作品技术:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

@TOC

一、作品展示







二、文件目录







三、代码实现

<!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> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <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>






四、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站





五、完整源码

作者主页-更多源码

HTML期末大作业文章专栏

~ 关注我,点赞博文~ 每天带你涨知识!

相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

【百度网盘-源码下载地址】

链接:https://pan.baidu.com/s/1T5XeFJ7WE2ASbylHE2sRMA 提取码:8888


六、更多源码

HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!



关键词:大学,作业,设计

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭