菜单 搜索
首页 前端知识 HTML静态网页作业(HTML CSS)——外卖平台主题网页设计制作(8个页面)

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

2024-08-18 22:08:37 前端知识 前端哥 615 490 我要收藏

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
  • 五、源码获取

一、作品介绍

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

二、作品演示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

<!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.想要获取本文源码，点击前往吧

转载请注明出处或者链接地址：https://www.qianduange.cn//article/16013.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery 教程 (一)

2024-08-24 23:08:43

select 多选联动

2024-08-24 23:08:41

Web开发基础：JQuery详解，web开发增强

2024-08-24 23:08:36

jQuery前端框架 - 一小时了解与使用

2024-08-24 23:08:34

Web前端教程零基础入门，html5移动web开发，jquery语法特点，前端面试题汇总

2024-08-24 23:08:22

jQuery2 高级教程（九）

2024-08-24 23:08:22

使用CDN提高jQuery加载速度

2024-08-24 23:08:21

利用jQuery实现动态加载页面内容并融入当前页面的全面解析

2024-08-24 23:08:21

jQuery2 秘籍（七）

2024-08-24 23:08:20

【ECharts】雷达图

2024-08-24 23:08:18

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！