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

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

时间：2023-12-22 16:04:08

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

文章目录

一、作品介绍二、作品演示1、首页2、商家列表页3、商家详情页4、商家图片页三、代码目录四、网站代码五、源码获取

一、作品介绍

🏷️本套采用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">©- 外卖人, All Rights Reserved</div></div></div></body></html>

五、源码获取

🥇~ 关注我，点赞博文~每天带你涨知识!

🎁1.看到这里了就[点赞+好评+收藏]三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。

💙2.想要获取本文源码，点击前往吧

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。