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（源文件），基本期末作业所需的知识点全覆盖。
文章目录
- HTML5期末大作业：京东网站设计——仿2016版京东首页(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>
四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
更多推荐
HTML5期末大作业：京东网站设计——仿2016版京东首页(1页) HTML+CSS+JavaScript 大学生网页作品 电商网页设计作业模板 学生网页制作源
发布评论