基于HTML+CSS+JavaScript制作学生网页——外卖服务平台10页带js 带购物车_外卖网站制作

作者：从前慢现在也慢 | 2024-05-22 06:35:59

踩

外卖网站制作

⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | HTML期末大学生网页设计作业

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

文章目录

前端学习路线
网页基本结构
网页演示
- HTML结构代码
学的反而越迷茫
学习更多

前端学习路线

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

网页基本结构

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

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

网页演示

在这里插入图片描述

HTML结构代码



<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>饿美了网</title>
	<link href="css/public.css" rel="stylesheet" type="text/css" />
	<link href="css/index.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
	<!-----头部开始------->
	<div class="top">
		<a href="./index.html"><img style="float:left;width: 1000px;height: 200px;" src="images/logo.png" /></a>
	</div>
	<a href="html/login.html"><button class="button01">登录/注册</button></a>
	<!---nav开始---->
	<div class="daohang">
		<div id="nav">
			<ul>
				<li><a href="./index.html">首页</a></li>
				<li><a href="./html/order.html">订单</a></li>
				<li><a href="html/tuijian.html">附近推荐</a></li>
				<li class="downorder">
					<a class="order" href="html/shuiguo.html">水果</a>
					<div class="downtext">
						<a href="">草莓</a>
						<a href="">菠萝</a>
						<a href="">西瓜</a>
						<a href="">枇杷</a>
					</div>
				</li>

				<!-- <li><a href="html/shucai.html">蔬菜</a></li> -->
				<li><a href="html/userInfo.html">个人信息</a></li>
				<li><a href="html/pingjia.html">评价中心</a></li>
			</ul>
		</div>
	</div>
	<!---nav结束---->
	<!-----banner------->
	<!-- <div class="ban">
			<img src="images/e118e3cdfe9c0a14-104a6139c30f339c-5516030145adc0d475c100260a514287.jpg" width="1000" height="335" border="0">
		</div> -->

	<div id="flash">
		<div id="prev"></div>
		<div id="next"></div>
		<ul id="play">
			<li style="display: block;"><img src="images/banner/1.jpg" alt="" /></li>
			<li><img src="images/banner/2.jpg" alt="" /></li>
			<li><img src="images/banner/3.jpg" alt="" /></li>
			<li><img src="images/banner/4.jpg" alt="" /></li>
			<li><img src="images/banner/5.jpg" alt="" /></li>
			<li><img src="images/banner/6.jpg" alt="" /></li>
			<li><img src="images/banner/7.jpg" alt="" /></li>
			<li><img src="images/banner/8.jpg" alt="" /></li>
		</ul>
		<ul id="button">
			<li>
				<div style="background: #A10000;"></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
		</ul>
	</div>

	<!-----头部结束------->
	<!-----main开始------->
	<div class="main">
		<div class="box1">
			<div class="shang-left">
				<div class="gk-title"><a href="html/about.html">
						<h1>饿美了网站简介</h1>
					</a></div>
				<div class="gk">
					<img src="images/gktu.jpg" />
					<p>
						“饿美了”是一款本地生活平台，主营在线外卖、新零售、即时配送和餐饮供应链等业务。本网站以“Everything
						30min”为使命，致力于用科技打造本地生活服务平台，推动了中国餐饮行业的数字化进程，将外卖培养成中国人继做饭、堂食后的第三种常规就餐方式。
					</p>
				</div>
			</div>
			<div class="xz">
				<a href="html/techan.html">
					<h1><span><i>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多>></i></span>
					</h1>
				</a>
				<a href="html/tc01.html"><img src="images/31244462056d77bc135a6ab39713ef1b.jpeg" /></a>
				<a href="html/tc02.html"><img src="images/5970143c6f75b999b188a26bc6d6379c.png" /></a>
				<a href="html/tc03.html"><img src="images/625fbc2de66219951b384144cfae4980.jpeg" /></a>
				<a href="html/tc04.html"><img src="images/65a7ea85c53648c7baee7fba7e3e2075.jpeg" /></a>
			</div>
			<div class="shang-right">
				<div class="count-title"><a href="html/minsu.html">
						<h1>基础功能</h1>
					</a></div>
				<div class="count">
					<br />

					<p>快速搜罗附近外卖，不用打电话直接预订：足不出户，即可享用一座城的美食。不想早起还想吃早饭，交给外卖小哥，支持预定早餐。
					</p>

					<p> 看到大家对喜欢的外卖美食的点评&照片：支持点赞和分享美食图片，朋友圈式简易操作，让你成为美食方面的社交达人

					<p> 各种赠饮打折活动，优惠不断：每日各种优惠不间断，从水果到时蔬，从大餐到小吃，只有你吃不了，没有减免不。
				</div>
			</div>
		</div>

		<div class="meishi">
			<div class="yy-title"><a href="html/jingdian.html">
					<h1>饿美了热门推荐</h1>
				</a></div>
			<div class="ms">
				<ul>
					<li><img src="images/zhaji.jpg" />
						<p>炸鸡</p>
					</li>
					<li><img src="images/xiawei.jpg" />
						<p>虾尾</p>
					</li>
					<li><img src="images/paigu.jpg" />
						<p>排骨</p>
					</li>
					<li><img src="images/suancaiyu.jpg" />
						<p>酸菜鱼</p>
					</li>
					<li><img src="images/niupai.jpg" />
						<p>牛排</p>
					</li>
				</ul>
			</div>
		</div>
		<!-----main结束------->
		<!-----bottom开始------->
		<div class="bottom">
			<div class="bottom-box">
				<p>2022@ 版权所有 饿美了</p>
			</div>
		</div>
		<!-----bottom结束------->
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

所以，放松心态吧，好好享受大学时光
—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/606928