🎉
不定期分享源码,关注不丢失哦
文章目录
- 一、作品介绍
- 二、作品演示
- 三、代码目录
- 四、网站代码
- 五、源码获取
一、作品介绍
🏷️本套采用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.想要获取本文源码,点击前往吧