web前端期末大作业 HTML+CSS+JavaScript仿京东

最新推荐文章于 2023-04-07 21:58:47 发布
最新推荐文章于 2023-04-07 21:58:47 发布
阅读量458 收藏 3
点赞数
分类专栏： web前端期末大作业 文章标签： 前端 javascript html dreamweaver html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65484028/article/details/127888363
版权
这是一个关于Web前端开发的期末大作业，通过HTML、CSS和JavaScript技术构建了一个仿京东的在线商城页面。内容涵盖前端学习路线、网页基本结构，以及HTML、CSS和JavaScript的基础知识应用，如div+css布局、动态效果实现等。
摘要由CSDN通过智能技术生成

⛵ 源码获取 文末联系 ✈

Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目| HTML期末大学生网页设计作业，Web大学生网页

  1. HTML：结构

  2. CSS：样式
    在操作方面上运用了html5和css3，
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript：做与用户的交互行为

文章目录

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML结构代码



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
		<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
		<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/base.js"></script>
		<script src="js/index.js"></script>
		<style>
			#dlym{
     
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.1);
				position: fixed;
				top: 0;
				display: none;
			}
			#dlym .over{
     
				margin: 37px 38px !important; 
			}
			#zcym{
     
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				position: fixed;
				top: 0;
				display: none;
			}
			.registerarea{
     
				background: white;
			}
			.home_electric{
     
				display: none;
			}
			.home_electric:nth-of-type(2){
     
				display: block;
			}
		</style>
	</head>
	<body>
		<header>
			<a href="list.html">
				<img src="images/header.jpg" height="80" width="100%" alt="">
			</a>
		</header>
		<div class="shortcut">
			<div class="w">
				<ul class="fl city">
					<li><i class="f10"></i><a href="list.html">北京</a></li>
				</ul>
				<ul class="fr nav">
		
		

				<li class="space"></li>
				<li>
					<a href="list.html">我的京东</a>
					<i></i>
					<div class="dropdown-layer">
						<dl class="d">
							<dd><a href="list.html">待处理订单</a></dd>
							<dd><a href="list.html">返修退换货</a></dd>
							<dd><a href="list.html">降价商品</a></dd>
						</dl>
						<dl class="d">
							<dd><a href="list.html">消息</a></dd>
							<dd><a href="list.html">我的问答</a></dd>
							<dd><a href="list.html">我的关注</a></dd>
						</dl>
						<dl>
							<dd><a href="list.html">我的京豆</a></dd>
							<dd><a href="list.html">我的白条</a></dd>
						</dl>
						<dl>
							<dd><a href="list.html">我的优惠券</a></dd>
							<dd><a href="list.html">我的理财</a></dd>
						</dl>
					</div>
				</li>
				<li class="space"></li>
				<li>
					<a href="list.html">京东会员</a>
				</li>

				<li class="space"></li>
				<li>
					<a href="list.html">企业采购</a>
				</li>
				<li class="space"></li>
				<li>
					<a href="list.html">客户服务</a>
					<i></i>
					<div class="dropdown-layer">
						<dl class="d">
							<dd><a href="list.html">待处理订单</a></dd>
							<dd><a href="list.html">返修退换货</a></dd>
							<dd><a href="list.html">降价商品</a></dd>
						</dl>
						<dl class="d">
							<dd><a href="list.html">消息</a></dd>
							<dd><a href="list.html">我的问答</a></dd>
							<dd><a href="list.html">我的关注</a></dd>
						</dl>
						<dl>
							<dd><a href="list.html">我的京豆</a></dd>
							<dd><a href="list.html">我的白条</a></dd>
						</dl>
						<dl>
							<dd><a href="list.html">我的优惠券</a></dd>
							<dd><a href="list.html">我的理财</a></dd>
						</dl>
					</div>
				</li>
				<li class="space"></li>
				<li>
					<a href="list.html">网站导航</a>
					<i></i>
					<div class="dropdown-layer">
						<dl class="d">
							<dd><a href="list.html">待处理订单</a></dd>
							<dd><a href="list.html">返修退换货</a></dd>
							<dd><a href="list.html">降价商品</a></dd>
						</dl>
						<dl class="d">
							<dd><a href="list.html">消息</a></dd>
							<dd><a href="list.html">我的问答</a></dd>
							<dd><a href="list.html">我的关注</a></dd>
						</dl>
						<dl>
							<dd><a href="list.html">我的京豆</a></dd>
							<dd><a href="list.html">我的白条</a></dd>
						</dl>
						<dl>
							<dd><a href="list.html">我的优惠券</a></dd>
							<dd><a href="list.html">我的理财</a></dd>
						</dl>
					</div>
				</li>
				<li class="space"></li>
				<li class="mobile">
					
					 <img src="images/mobile.png" height="60" width="60" alt="">
					 <i class="close-btn">x</i>
				</li>
			</ul>
			</div>
		</div>
		<div class="m">
			<div class="w middle">
				<div class="logo">
					<h1>  <!-- 提高权重 便利于搜索引擎优化 -->
						<a href="index.html" title="京东">京东</a>   
					</h1>
				</div>
				<div class="form">
					<input id="text" type="text" placeholder="扫描仪">
					<button><i></i></button> 
				</div>
				<div class="shopCar">
					<i></i><a href="cart.html" class="f10">我的购物车</a><span>8</span>
				</div>
				<div class="hotwords">
					<a href="list.html" class="f10">199减100</a>
					<a href="list.html">鼠标试用</a>
					<a href="list.html">农资7折</a>
					<a href="list.html">低至29元</a>
					<a href="list.html">抽奖赢空调</a>
					<a href="list.html">记忆棉</a>
					<a href="list.html">坐垫</a>
					<a href="detail">1分钱买油</a>
					<a href="list.html">智能手表</a>
				</div>
				<div class="navitems">
					<ul>
						
						<li><a href="list.html">优惠券</a></li>
						<li><a href="list.html">闪购</a></li>
						<li><a href="list.html">拍卖</a></li>
						<li class="space "></li>
						<li><a href="list.html">服装城</a></li>
						<li><a href="list.html">京东超市</a></li>
						<li><a href="list.html">生鲜</a></li>
						<li><a href="list.html">全球购</a></li>
						<li class="space"></li>
						<li><a href="list.html">京东金融</a></li>
					</ul>
				</div>
				<div class="super">
					<a href="list.html"><img src="images/super.png" alt=""></a>
				</div>
			</div>
		</div>
		<div class="mr-g">
			<ul>
				<li><a href="list.html"><img src="uploads/mr-g-1.png" width="34px" alt="">京东超市</a></li>
				<li><a href="list.html"><img src="uploads/mr-g-2.png" width="34px" alt="">数码电器</a></li>
				<li><a href="list.html"><img src="uploads/mr-g-3.png" width="34px" alt="">京东服饰</a></li>
				<li><a href="list.html"><img src="uploads/mr-g-4.png" width="34px" alt="">京东生鲜</a></li>
				<li><a href="list.html"><img src="uploads/mr-g-5.png" width="34px" alt="">充值缴费</a></li>
				<li><a href="list.html"><img src="uploads/mr-g-6.png" width="34px" alt="">9.9元拼</a></li>
				<li><a href="list.html"><img src="uploads/mr-g-7.png" width="34px" alt="">领劵</a></li>
				<li><a href="list.html"><img src="uploads/mr-g-8.png" width="34px" alt="">赚钱</a></li>
			</ul>
		</div>
		<div class="w grid">
			<div class="grid-col1 fl">
				<ul id="navi">
					<li><a href="list.html">家用电器</a></li>
					
					<li><a href="list.html">电脑</a>/<a href="list.html">办公</a></li>
					<li><a href="list.html">家居</a>/<a href="list.html">家具</a>/<a href="list.html">家装</a>/<a href="list.html
最低0.47元/天 解锁文章
二挡起步
关注
专栏目录
个人博客页面设计（html + css）
05-29
个人博客页面设计（html + css）
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
如何制作HTML网页设计【体育运动主题网站——中国篮球NBA】
html精品源码
08-05 6015
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
HTML设计个人博客页面
Python领域优质萌新学习笔记
03-23 3840
页面主体包括一个名为“container”的元素，其中包含博客的标题、简介、最新文章、研究方向和联系方式。我们使用 - 标签定义标题，并使用标签定义段落文本。我们还使用和标签定义无序列表，以显示最新文章和研究方向。最后，我们使用标签定义链接，让读者可以在不离开页面的情况。然后，我们导入了Google字体“Lato”，并定义了一些基本的样式，包括背景色、字体、字号、行高和颜色。/* 背景样式 *//* 标题样式 *//* 链接样式 */
HTML做一个个人博客页面（纯html代码）
最新发布
qq_38512792的博客
04-07 1563
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
web前端期末结课大作业html+css+javascript大学实验教学示范中心HTML网站模板
06-18
大学实验教学示范中心HTML网站模板，DIV+CSS布局设计，两套蓝色风格HTML网站模板，全套模板，包括注册、登录、首页、新闻中心、...web前端期末结课大作业html+css+javascript网页设计大学实验教学示范中心HTML网站模板
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
web前端期末结课大作业 html+css+javascript网页设计实例 企业网站制作
11-15
期末结课大作业 html+css+javascript网页设计实例 企业网站制作，资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件，用于大学web网页课程设计参考以及相关从业人员参考学习
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
web前端期末大作业CSS+HTML架构
08-04
期末老师要求根据所学前端知识搭建一个属于自己的网站，所以就套用模板加修改，根据自己喜欢的动漫海绵宝宝，使用CSS+HTML做出了自己的期末大作业，海绵宝宝动漫展示网页，共耗时两天。可借鉴，可套用，望指正，勿...
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 25万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-01 3万+
学生HTML个人网页作业作品~ 个人主页博客网页设计制作~ 大学生个人网站作业模板~简单个人网页制作 ~面包店铺电商网站模板html 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 红色的蛋糕甜品在线预订，面包店铺电
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
web网站制作的实例（大学生期末作业）集合
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-07 23万+
一、HTML期末学生结课大作业作品 200套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作 [建议收藏] 1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全) 2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) 3.HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计) 4.HTML期末大作业~海贼王中乔巴专题漫画学
HTML期末大作业~ 仿新浪微博个人主页html网站模板4个页面(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-04 2万+
HTML期末大作业~ 仿新浪微博个人主页html网站模板(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：这是一款最新的仿sina个人微博html静态网
HTML期末作业课程设计大作业~环境保护学生网页设计作业源码(HTML+CSS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-24 2万+
HTML期末大作业~基于HTML+CSS环境保护学生网页设计 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页 新闻中心 专题回顾 里约热内卢 奥运回顾 等5个页面! 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学
Web前端设计项目：HTML+CSS期末作业
资源摘要信息:"计算机专业web前端HTML+css期末项目.zip" 一、前端基础知识与项目实践 1. HTML基础：HTML（HyperText Markup Language）是构建网页内容的标准标记语言。在本项目中，会涉及到HTML的各个元素的使用，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值