700字范文 > 网页设计作业`京东网站设计——仿版京东首页(1页) HTML+CSS+JavaScript 大学生

网页设计作业`京东网站设计——仿版京东首页(1页) HTML+CSS+JavaScript 大学生

时间：2021-09-20 16:59:19

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"><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>京东()综合网购首选</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><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></div></div></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>