245 lines
16 KiB
HTML
245 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./css/clear.css">
|
|
<link rel="stylesheet" href="./css/public.css">
|
|
<link rel="stylesheet" href="./css/ele.css">
|
|
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2265909_fsxt0qj35qn.css">
|
|
|
|
<title>H5饿了么练习</title>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="address">
|
|
<i class="iconfont icon-dingwei"></i>
|
|
<p>中国金币(安徽万国钱币)奥林阁</p>
|
|
<i class="iconfont icon-xiangxia"></i>
|
|
</div>
|
|
<div class="search">
|
|
<i class="iconfont icon-fangdajing"></i>
|
|
<p>搜索饿了么商家、商品名称</p>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<ul class="menu">
|
|
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
|
<p>美食</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/9/21/60ac33f023d9074e13cd78f9b5964jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
|
<p>美食</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/e/58/bceb19258e3264e64fb856722c3c1jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
|
<p>美食</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
|
<p>美食</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
|
<p>甜品饮品</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/7/d6/6f2631288a44ec177204e05cbcb93jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
|
<p>甜品饮品</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/e/89/185f7259ebda19e16123884a60ef2jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
|
<p>甜品饮品</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/5/1a/dc885d2ce022d2ee60495acafb795jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
|
<p>甜品饮品</p>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/a/78/0fb469b2da210827ec16896e00420jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
|
|
<p>甜品饮品</p>
|
|
</li>
|
|
</ul>
|
|
<div class="meal">
|
|
<div class="meal_text">
|
|
<p>品质套餐</p>
|
|
<p>搭配齐全吃得好</p>
|
|
<p>立即抢购 ></p>
|
|
</div>
|
|
<img src="https://cube.elemecdn.com/e/ee/df43e7e53f6e1346c3fda0609f1d3png.png?x-oss-process=image/format,webp/resize,w_282,h_188,m_fixed" alt="">
|
|
</div>
|
|
<ul class="vip">
|
|
<li>
|
|
<i class="iconfont icon-huangguan"></i>
|
|
<p>超级会员</p>
|
|
<p>.已为我节省59元</p>
|
|
</li>
|
|
<li>
|
|
<p>下单即可获得奖励金 ></p>
|
|
</li>
|
|
</ul>
|
|
<div class="business">
|
|
推荐商家
|
|
</div>
|
|
<ul class="nav">
|
|
<li>
|
|
<p>综合排序</p>
|
|
<i class="iconfont icon-xiangxia"></i>
|
|
</li>
|
|
<li>
|
|
<p>距离最近</p>
|
|
</li>
|
|
<li>
|
|
<p>销量最高</p>
|
|
</li>
|
|
<li>
|
|
<p>筛选</p>
|
|
<i class="iconfont icon-shaixuan"></i>
|
|
</li>
|
|
</ul>
|
|
<ul class="food_list">
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/d/5e/84c24fd28f4193d58656f1a7b395bjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed" alt="" class="food_list_img">
|
|
<div class="food_list_r">
|
|
<div class="list_r_first">
|
|
<p>宏祥记招牌花甲</p><i class="iconfont icon-gengduo"></i>
|
|
</div>
|
|
|
|
<ul class="score">
|
|
<li>
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeTI9IjUwJSIgaWQ9ImEiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkRFMDAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZCMDAwIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNNTQuMDE3IDguMDcybC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w1My42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bS00OCAwTDMuNDY1IDkuNjMzYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDUuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMEw3LjU1IDMuMzUybDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2TDguNDk3IDYuMjY5bC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bTEyIDBsLTIuNTUyIDEuNTYxYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDE3LjYzLjU4OWMuMjEzLS41MTUuNTU3LS41MjMuNzc0IDBsMS4xNDYgMi43NjMgMi45ODIuMjM3Yy41NTYuMDQ0LjY3LjM2OC4yNC43MzZsLTIuMjc0IDEuOTQ0LjY5NiAyLjkxYy4xMy41NDItLjE0My43NS0uNjI2LjQ1NGwtMi41NTEtMS41NnptMTIgMGwtMi41NTIgMS41NjFjLS40NzYuMjkxLS43NTguMDk2LS42MjYtLjQ1NWwuNjk2LTIuOTA5LTIuMjczLTEuOTQ0Yy0uNDI0LS4zNjItLjMyNS0uNjkxLjIzOS0uNzM2bDIuOTgyLS4yMzdMMjkuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMGwxLjE0NiAyLjc2MyAyLjk4Mi4yMzdjLjU1Ni4wNDQuNjcuMzY4LjI0LjczNmwtMi4yNzQgMS45NDQuNjk2IDIuOTFjLjEzLjU0Mi0uMTQzLjc1LS42MjYuNDU0bC0yLjU1MS0xLjU2em0xMiAwbC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w0MS42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6IiBmaWxsPSJ1cmwoI2EpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4="
|
|
alt="">
|
|
<span>4.3</span> <span>月售290</span>
|
|
</li>
|
|
<li>
|
|
<span>蜂鸟专送</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="price">
|
|
<li>
|
|
<span>￥10起送</span>
|
|
<span> | </span>
|
|
<span>配送￥4</span>
|
|
</li>
|
|
<li>
|
|
<span>1.28km</span>
|
|
<span> | </span>
|
|
<span>38分钟</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="title">
|
|
<li>烧烤</li>
|
|
<li>米线</li>
|
|
</ul>
|
|
<div class="act_left">
|
|
<span>保</span>
|
|
<p>该商户食品安全已由国泰产险承担，食品安全有保障</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/d/5e/84c24fd28f4193d58656f1a7b395bjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed" alt="" class="food_list_img">
|
|
<div class="food_list_r">
|
|
<div class="list_r_first">
|
|
<p>宏祥记招牌花甲</p><i class="iconfont icon-gengduo"></i>
|
|
</div>
|
|
|
|
<ul class="score">
|
|
<li>
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeTI9IjUwJSIgaWQ9ImEiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkRFMDAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZCMDAwIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNNTQuMDE3IDguMDcybC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w1My42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bS00OCAwTDMuNDY1IDkuNjMzYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDUuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMEw3LjU1IDMuMzUybDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2TDguNDk3IDYuMjY5bC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bTEyIDBsLTIuNTUyIDEuNTYxYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDE3LjYzLjU4OWMuMjEzLS41MTUuNTU3LS41MjMuNzc0IDBsMS4xNDYgMi43NjMgMi45ODIuMjM3Yy41NTYuMDQ0LjY3LjM2OC4yNC43MzZsLTIuMjc0IDEuOTQ0LjY5NiAyLjkxYy4xMy41NDItLjE0My43NS0uNjI2LjQ1NGwtMi41NTEtMS41NnptMTIgMGwtMi41NTIgMS41NjFjLS40NzYuMjkxLS43NTguMDk2LS42MjYtLjQ1NWwuNjk2LTIuOTA5LTIuMjczLTEuOTQ0Yy0uNDI0LS4zNjItLjMyNS0uNjkxLjIzOS0uNzM2bDIuOTgyLS4yMzdMMjkuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMGwxLjE0NiAyLjc2MyAyLjk4Mi4yMzdjLjU1Ni4wNDQuNjcuMzY4LjI0LjczNmwtMi4yNzQgMS45NDQuNjk2IDIuOTFjLjEzLjU0Mi0uMTQzLjc1LS42MjYuNDU0bC0yLjU1MS0xLjU2em0xMiAwbC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w0MS42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6IiBmaWxsPSJ1cmwoI2EpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4="
|
|
alt="">
|
|
<span>4.3</span> <span>月售290</span>
|
|
</li>
|
|
<li>
|
|
<span>蜂鸟专送</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="price">
|
|
<li>
|
|
<span>￥10起送</span>
|
|
<span> | </span>
|
|
<span>配送￥4</span>
|
|
</li>
|
|
<li>
|
|
<span>1.28km</span>
|
|
<span> | </span>
|
|
<span>38分钟</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="title">
|
|
<li>烧烤</li>
|
|
<li>米线</li>
|
|
</ul>
|
|
<div class="act_left">
|
|
<span>保</span>
|
|
<p>该商户食品安全已由国泰产险承担，食品安全有保障</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<img src="https://cube.elemecdn.com/d/5e/84c24fd28f4193d58656f1a7b395bjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed" alt="" class="food_list_img">
|
|
<div class="food_list_r">
|
|
<div class="list_r_first">
|
|
<p>宏祥记招牌花甲</p><i class="iconfont icon-gengduo"></i>
|
|
</div>
|
|
|
|
<ul class="score">
|
|
<li>
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeTI9IjUwJSIgaWQ9ImEiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkRFMDAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZCMDAwIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNNTQuMDE3IDguMDcybC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w1My42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bS00OCAwTDMuNDY1IDkuNjMzYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDUuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMEw3LjU1IDMuMzUybDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2TDguNDk3IDYuMjY5bC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bTEyIDBsLTIuNTUyIDEuNTYxYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDE3LjYzLjU4OWMuMjEzLS41MTUuNTU3LS41MjMuNzc0IDBsMS4xNDYgMi43NjMgMi45ODIuMjM3Yy41NTYuMDQ0LjY3LjM2OC4yNC43MzZsLTIuMjc0IDEuOTQ0LjY5NiAyLjkxYy4xMy41NDItLjE0My43NS0uNjI2LjQ1NGwtMi41NTEtMS41NnptMTIgMGwtMi41NTIgMS41NjFjLS40NzYuMjkxLS43NTguMDk2LS42MjYtLjQ1NWwuNjk2LTIuOTA5LTIuMjczLTEuOTQ0Yy0uNDI0LS4zNjItLjMyNS0uNjkxLjIzOS0uNzM2bDIuOTgyLS4yMzdMMjkuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMGwxLjE0NiAyLjc2MyAyLjk4Mi4yMzdjLjU1Ni4wNDQuNjcuMzY4LjI0LjczNmwtMi4yNzQgMS45NDQuNjk2IDIuOTFjLjEzLjU0Mi0uMTQzLjc1LS42MjYuNDU0bC0yLjU1MS0xLjU2em0xMiAwbC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w0MS42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6IiBmaWxsPSJ1cmwoI2EpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4="
|
|
alt="">
|
|
<span>4.3</span> <span>月售290</span>
|
|
</li>
|
|
<li>
|
|
<span>蜂鸟专送</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="price">
|
|
<li>
|
|
<span>￥10起送</span>
|
|
<span> | </span>
|
|
<span>配送￥4</span>
|
|
</li>
|
|
<li>
|
|
<span>1.28km</span>
|
|
<span> | </span>
|
|
<span>38分钟</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="title">
|
|
<li>烧烤</li>
|
|
<li>米线</li>
|
|
</ul>
|
|
<div class="act_left">
|
|
<span>保</span>
|
|
<p>该商户食品安全已由国泰产险承担，食品安全有保障</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<ul class="footer">
|
|
|
|
<li class="active">
|
|
<i class="iconfont icon-shouye"></i>
|
|
<p>首页</p>
|
|
</li>
|
|
<li>
|
|
<i class="iconfont icon-faxian2"></i>
|
|
<p>发现</p>
|
|
</li>
|
|
<li>
|
|
<i class="iconfont icon-icon"></i>
|
|
<p>订单</p>
|
|
</li>
|
|
<li>
|
|
<i class="iconfont icon-wode"></i>
|
|
<p>我的</p>
|
|
</li>
|
|
|
|
</ul>
|
|
</body>
|
|
</html> |