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

最新推荐文章于 2024-01-03 21:50:30 发布
最新推荐文章于 2024-01-03 21:50:30 发布
阅读量416 收藏 3
点赞数
分类专栏： web前端期末大作业 文章标签： 前端 javascript html dreamweaver html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65484028/article/details/127888363
版权

⛵ 源码获取 文末联系 ✈

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元/天 解锁文章
二挡起步
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTMl+CSS 模仿京东网登录页面，前端开发学习班
2401_84103903的博客
04-03 826
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
HTML设计个人博客页面
Python领域优质萌新创作者
03-23 3480
页面主体包括一个名为“container”的元素，其中包含博客的标题、简介、最新文章、研究方向和联系方式。我们使用 - 标签定义标题，并使用标签定义段落文本。我们还使用和标签定义无序列表，以显示最新文章和研究方向。最后，我们使用标签定义链接，让读者可以在不离开页面的情况。然后，我们导入了Google字体“Lato”，并定义了一些基本的样式，包括背景色、字体、字号、行高和颜色。/* 背景样式 *//* 标题样式 *//* 链接样式 */
【HTML5期末大作业】制作一个简单HTML我的班级网页（HTML+CSS+JS）
HTML网页设计
08-05 6140
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站......
web期末大作业网页设计-个人介绍-纯html+css
@MIKE小助手
06-18 4664
web期末大作业网页设计-个人介绍-纯html+css
html制作好看的个人简历(附源码)
xcLeigh
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
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网页课程设计参考以及相关从业人员参考学习
web前端期末大作业CSS+HTML架构
08-04
期末老师要求根据所学前端知识搭建一个属于自己的网站，所以就套用模板加修改，根据自己喜欢的动漫海绵宝宝，使用CSS+HTML做出了自己的期末大作业，海绵宝宝动漫展示网页，共耗时两天。可借鉴，可套用，望指正，勿...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
html&css;源代码作品
07-16
两个网站的纯html&css;&flash;&js;源代码，下载解压后直接用浏览器打开即可。
html+css网页设计源码(简洁)
12-25
html+css网页设计源码(简洁)，前端基础代码，拿来就用 评分: ⭐⭐⭐⭐⭐
中秋佳节的网页设计
10-05
中秋佳节的网页设计，教你如何设计网页.让你从容设计网页。
中秋节模板HTML
12-08
中秋节模板HTML
HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)
QQ_____365392777的博客
08-20 1万+
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页.
web前端期末大作业 html+css+javascript化妆品网页设计实例 企业网站制作
最新发布
wx___BJ050106的博客
01-03 458
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设...
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业...
qq_365392777
08-09 1974
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等...
HTML制作个人网页制作(简单静态HTML个人博客网页作品)
qq_38514921的博客
05-07 438
👨‍🔬个人网页制作 、大学生个人网页设计、 个人博客网站模板 、简单静态HTML个人网页作品🏷️ 个人博客静态HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+J
web前端期末结课大作业 html+css+javascript网页设计代码
06-07
你可以使用CSS的各种属性来调整颜色、字体、布局和其他元素的样式。你可以使用CSS框架或预处理器来简化样式表的编写，例如Bootstrap或Sass。 最后，你可以使用JavaScript来添加交互性和动态元素。你可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值