HTML静态网页作业(HTML+CSS)——外卖平台主题网页设计制作(8个页面)

已于 2024-02-26 16:37:28 修改
阅读量6.1k 收藏 73
点赞数 14
分类专栏： html网页设计与制作 外卖平台网页设计  学生HTML个人网页作业作品 文章标签： html css
于 2023-02-05 14:04:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42283461/article/details/128889884
版权

🎉不定期分享源码，关注不丢失哦

文章目录

一、作品介绍

🏷️本套采用DIV+CSS布局，未使用Javacsript代码，共有8个页面。

二、作品演示

1、首页

在这里插入图片描述

2、商家列表页

在这里插入图片描述

3、商家详情页

在这里插入图片描述

4、商家图片页

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<!-- 顶部 -->
	<div class="top">
		<div class="w">
			<div class="top_left">
				<img src="./images/icon_dingwei.png" class="icon">
				<span>北京</span>
				<a href="">[更换]</a>
			</div>
			<div class="top_right">
				<a href="login.html">你好，请登录/注册</a>
			</div>
		</div>
	</div>

	<!-- 头部 -->
	<div class="header">
		<div class="w">
			<div class="logo">
				<a href="index.html">
					<img src="./images/logo.png">
				</a>
			</div>
			<div class="search">
				<input type="text" name="" placeholder="搜素商家或美食">
				<button>
					<img src="./images/icon_search.png" class="icon">
				</button>
			</div>
			<div class="header_right"></div>
		</div>
		<div class="w header2">
			<div class="cate_all">
				全部分类
			</div>
			<ul class="nav">
				<li><a href="shangjia.html">全部商家</a></li>
				<li><a href="ruzhu.html">商家入驻</a></li>
				<li><a href="aboutus.html">关于我们</a></li>
				<li><a href="ques.html">常见问题</a></li>
				<li><a href="login.html">我要登录</a></li>
				<li><a href="fankui.html">用户反馈</a></li>
			</ul>
		</div>
	</div>
	<div class="main">
			
		<!-- 广告 -->
		<div class="banenr">
			<div class="w">
				<ul class="cats">
					<li>
						<a href="">美食</a>
						<a href="" class="sm_link">汉堡薯条</a>
						<a href="" class="sm_link">披萨</a>
					</li>
					<li><a href="">超市便利</a>
						<a href="" class="sm_link">时令鲜果</a>
						<a href="" class="sm_link">牛奶酸奶</a></li>
					<li><a href="">甜点饮品</a>
						<a href="" class="sm_link">生日蛋糕</a>
						<a href="" class="sm_link">奶茶</a></li>
					<li><a href="">蔬菜水果</a>
						<a href="" class="sm_link">果捞</a>
						<a href="" class="sm_link">蔬菜肉禽</a></li>
					<li><a href="">早餐</a>
						<a href="" class="sm_link">地方小吃</a>
						<a href="" class="sm_link">豆浆</a></li>
					<li><a href="">正餐优选</a>
						<a href="" class="sm_link">快餐</a>
						<a href="" class="sm_link">日韩料理</a></li>
					<li><a href="">夜宵</a>
						<a href="" class="sm_link">香锅烤鱼</a>
						<a href="" class="sm_link">火锅</a></li>
					<li><a href="">甜蜜蛋糕</a>
						<a href="" class="sm_link">美味蛋糕</a>
						<a href="" class="sm_link">甜点</a></li>
					<li><a href="">家常菜</a>
						<a href="" class="sm_link">口味川湘</a>
						<a href="" class="sm_link">北方佳肴</a></li>
					<li><a href="">快食简餐</a>
						<a href="" class="sm_link">盖饭</a>
						<a href="" class="sm_link">便当寿司</a></li>
					<li><a href="">日韩料理</a>
						<a href="" class="sm_link">炸鸡</a>
						<a href="" class="sm_link">韩国料理</a></li>
					<li><a href="">小吃馆</a>
						<a href="" class="sm_link">快餐小吃</a>
						<a href="" class="sm_link">韩国料理</a></li>
				</ul>
				<div class="banner_img">
					<img src="./images/banner.jpg" >
				</div>
			</div>
		</div>
		<!-- 推荐商家 -->
		<div class="sj ilist_wrapper">
			<div class="w">
				<div class="tit">
					<span>推荐商家</span>
					<a href="">更多</a>
				</div>
				<div class="list">
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj1.jpg">
							</div>
							<div class="item_name">
								逗思都吃韩国料理
							</div>
							<div class="item_tuijian">
								推荐菜：<span>自制金枪鱼饭团</span><span>奶酪辣鸡</span>
							</div>
							<div class="item_price">
								起送 <span>￥95</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj2.jpg">
							</div>
							<div class="item_name">
								铃木食堂
							</div>
							<div class="item_tuijian">
								推荐菜：<span>杏仁豆腐</span><span>金枪鱼沙拉</span>
							</div>
							<div class="item_price">
								起送 <span>￥65</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj3.jpg">
							</div>
							<div class="item_name">
								蘇飯
							</div>
							<div class="item_tuijian">
								推荐菜：<span>赛螃蟹</span><span>红烧肉</span>
							</div>
							<div class="item_price">
								起送 <span>￥25</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj4.jpg">
							</div>
							<div class="item_name">
								THE TACO BAR
							</div>
							<div class="item_tuijian">
								推荐菜：<span>玉米片牛油果</span><span>牛舌Taco</span>
							</div>
							<div class="item_price">
								起送 <span>￥195</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj5.jpg">
							</div>
							<div class="item_name">
								聚宝源
							</div>
							<div class="item_tuijian">
								推荐菜：<span>一品烧饼</span><span>涮羊肉</span>
							</div>
							<div class="item_price">
								起送 <span>￥35</span>
							</div>
						</a>
					</div>


					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj6.jpg">
							</div>
							<div class="item_name">
								芝乐坊餐厅
							</div>
							<div class="item_tuijian">
								推荐菜：<span>芝士蛋糕</span><span>杂烩浓汤饭</span>
							</div>
							<div class="item_price">
								起送 <span>￥32</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj7.jpg">
							</div>
							<div class="item_name">
								南门涮肉
							</div>
							<div class="item_tuijian">
								推荐菜：<span>热气羊肉</span><span>自制烧饼</span>
							</div>
							<div class="item_price">  
								起送 <span>￥161</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj8.jpg">
							</div>
							<div class="item_name">
								Bada kitchen 和风洋食
							</div>
							<div class="item_tuijian"> 
								推荐菜：<span>紫苏卷</span><span>蒲烧鳗鱼饭</span>
							</div>
							<div class="item_price">
								起送 <span>￥129</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj9.jpg">
							</div>
							<div class="item_name">
								淮扬府
							</div>
							<div class="item_tuijian"> 
								推荐菜：<span>响油鳝糊</span><span>扬州大煮干丝</span>
							</div>
							<div class="item_price">
								起送 <span>￥162</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj10.jpg">
							</div>
							<div class="item_name">
								隐厨·中国菜馆
							</div>
							<div class="item_tuijian">
								推荐菜：<span>时尚肉汤泡饭</span><span>贵州黄牛肉</span>
							</div>
							<div class="item_price">
								起送 <span>￥135</span>
							</div>
						</a>
					</div>


					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj11.jpg">
							</div>
							<div class="item_name">
								潇湘阁
							</div> 
							<div class="item_tuijian">
								推荐菜：<span>小炒肉</span><span>酸辣鸡胗</span>
							</div>
							<div class="item_price">
								起送 <span>￥80</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj12.jpg">
							</div>
							<div class="item_name">
								Home Thai·泰谣
							</div>
							<div class="item_tuijian"> 
								推荐菜：<span>绿咖喱鸡</span><span>芒果糯米饭</span>
							</div>
							<div class="item_price">
								起送 <span>￥45</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj13.jpg">
							</div>
							<div class="item_name">
								萃華楼
							</div>
							<div class="item_tuijian"> 
								推荐菜：<span>特色烤花卷</span><span>芙蓉鸡片</span>
							</div>
							<div class="item_price">
								起送 <span>￥125</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj14.jpg">
							</div>
							<div class="item_name">
								燕郊烧鸽子
							</div>
							<div class="item_tuijian"> 
								推荐菜：<span>晾衣大饼</span><span>烤鸽子</span>
							</div>
							<div class="item_price">
								起送 <span>￥195</span>
							</div>
						</a>
					</div>
					<div class="item">
						<a href="shangjia_detail.html">
							<div class="item_img">
								<img src="./images/sj15.jpg">
							</div>
							<div class="item_name">
								捞王锅物料理
							</div>
							<div class="item_tuijian"> 
								推荐菜：<span>绣球豆腐</span><span>手工鲜虾滑</span>
							</div>
							<div class="item_price">
								起送 <span>￥235</span>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>

	</div>
	<div class="footer">
		<div class="w">
			<div class="footer_list">
				<a href="">关于我们</a>
				<span>|</span>
				<a href="">商户诚信公约</a>
				<span>|</span>
				<a href="">规则中心</a>
				<span>|</span>
				<a href="">媒体报道</a>
				<span>|</span>
				<a href="">商户入驻</a>
				<span>|</span>
				<a href="">推广服务</a>
				<span>|</span>
				<a href="">人才招聘</a>
				<span>|</span>
				<a href="">最新咨询</a>
				<span>|</span>
				<a href="">联系我们</a>
				<span>|</span>
				<a href="">应用下载</a>
			</div>
			<div class="footer_copyright">
				©2003-2022 外卖人, All Rights Reserved
			</div>
		</div>
	</div>
</body>
</html>

五、源码获取

🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.想要获取本文源码，点击前往吧

崽子爱码
关注
  • 14
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
使用HTML+CSS制作一个简单的网页
m0_57423785的博客
11-25 1万+
简单学习了一下HTML和CSS，制作了下面这个网页（第一次做还在学习中），里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。
HTML+CSS个人静态网页设计
aghewugwe的博客
08-13 3万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
外卖点餐后台管理HTML模板
05-02
html页面点餐模版，有前台点餐，后台查看订单，上传菜品等简单功能。
html前端--外卖点餐模板
11-26
把项目搭建到Tomcat中的appwebs文件资源中可以直接运行！
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
最新发布
网页设计与制作 | HTML+CSS+JS
05-31 946
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
HTML+css网页设计
2301_76192170的博客
07-04 5052
<a href="#">关于我们</a></li><li><a href="#">联系方式</a></li><li><a href="#">首页</a>版权所有 © 2023 我的网页我的网页
HTML+CSS+JS网页设计
热门推荐
m0_73738929的博客
04-15 4万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
制作一个简单HTML静态网页（HTML+CSS）
专注于dreamweaver网页设计制作
01-02 8486
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
静态HTML网页设计作品 HTML5+CSS大作业——个人网页设计(7页)
01-04 377
HTML5+CSS大作业——个人网页设计(7页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录HTML5+CSS大作业——个人网页设计(7页)一、作品展示二、文件目录
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
大学生静态网页设计期末作业-HTML+CSS制作咖啡介绍静态网页设计.zip
04-17
大学生静态网页设计期末作业-HTML+CSS制作咖啡介绍静态网页设计.zip 95分以上必过项目，下载即用，无需修改。小白也可实战。包括字体、背景颜色和内边距等。它还为各个区域设置了特定的背景颜色。 一个基本的网页...
学生家乡网页设计作品静态HTML网页—— HTML+CSS+JavaScript制作辽宁沈阳家乡主题网页源码(11页)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
大学生静态网页设计期末作业-HTML+CSS制作星巴克咖啡静态网页设计.zip
12-17
大学生静态网页设计期末作业—HTML+CSS制作星巴克咖啡静态网页设计.zip 95分以上必过项目，下载即用，无需修改。小白也可实战。 大学生静态网页设计期末作业—HTML+CSS制作星巴克咖啡静态网页设计.zip 95分以上必过...
课程作业基于CSS+HTML的个人静态网页源码.zip
10-12
课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态...
html+css制作简单网页界面
qq_64867440的博客
10-25 4726
section>、、、 等标签被称为语义化标签（semantic tags），它们不仅仅是用来美化页面的，更重要的是它们能够为页面的结构和内容提供更加合适的语义化描述，从而有助于提高页面的可访问性和可维护性。使用这些语义化标签能够使 HTML 结构更加清晰、易于理解和维护，同时能够使搜索引擎更容易理解页面的结构和内容，提高网站的搜索排名。
【HTML网页设计 + CSS样式表】详细记录 / 含代码 by.Akaxi
Akaxi的博客
10-12 6116
【HTML网页设计 + CSS样式表】详细记录 / 含代码
用HTML+CSS做一个漂亮简单的个人网页（第二篇）
qq_42523321的博客
06-10 3万+
个人网页设计及代码
静态网页设计html+css+js
11-30
静态网页设计是一种基于HTML、CSS和JS的网页设计方法。HTML（超文本标记语言）用于创建网页的结构和内容，CSS（层叠样式表）用于美化和布局网页的元素，而JS（JavaScript）用于添加交互和动态效果。 在静态网页设计中，首先需要使用HTML编写网页的结构和内容。通过使用HTML的标签和属性，可以创建标题、段落、链接、图像等元素，并为它们添加适当的样式和功能。 接下来，使用CSS来美化和布局网页的元素。通过为HTML元素添加各种样式和属性，可以改变字体、颜色、背景、边框等外观。CSS还可以使用盒模型和浮动等技术进行布局，使得网页在不同设备上呈现出理想的效果。 最后，使用JS来添加交互和动态效果。通过编写JavaScript代码，可以实现按钮点击、表单验证、轮播图、动画效果等功能。JS还可以通过与HTML和CSS的结合，实现网页的动态更新和内容交互。 总的来说，静态网页设计利用HTML、CSS和JS三种技术实现了网页的结构、外观和交互效果。通过合理应用这些技术，可以设计出吸引人的、功能完备的静态网页。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

崽子爱码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值