首页 前端知识 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
标签
评论
发布的文章

jQuery 教程 (一)

2024-08-24 23:08:43

select 多选联动

2024-08-24 23:08:41

jQuery2 高级教程(九)

2024-08-24 23:08:22

使用CDN提高jQuery加载速度

2024-08-24 23:08:21

jQuery2 秘籍(七)

2024-08-24 23:08:20

【ECharts】雷达图

2024-08-24 23:08:18

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!