first commit

历届学生/韩想/项目开发/练习项目/仿饿了么/赵俊凯/css/clear.css

@@ -0,0 +1,16 @@
+/* 专门用来重置浏览器默认样式的 */
+body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+}
+
+input {
+    outline: none;
+}
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

历届学生/韩想/项目开发/练习项目/仿饿了么/赵俊凯/css/index.css

@@ -0,0 +1,376 @@
+.body{
+    font-size: 24px;
+    background: #fff;
+}
+.header{
+    width: 100%;
+    height: 100px;
+    background-image: linear-gradient(90deg,#0af,#0085ff);
+    position: fixed;
+    z-index: 999;
+}
+.head_top{
+    display: flex;
+    align-items: center;
+    color: #fff;
+    padding-top: 10px;
+}
+.head_top .icon-location{
+    font-size: 18px;
+}
+.head_top .icon-down{
+    font-size: 12px;
+}
+.head_top p{
+    font-size: 17px;
+    font-weight: 700;
+}
+.head_sosuo{
+    width: 100%;
+    height: 36px;
+    text-align: center;
+    line-height: 36px;
+    background: #fff;
+    margin-top: 5px;
+}
+.head_sosuo i{
+    font-size: 14px;
+    color: #999;
+}
+.head_sosuo span{
+    font-size: 14px;
+    color: #999;
+}
+.content{
+    padding-top: 100px;
+}
+.list{
+    width: 100%;
+    margin-bottom: 20px;
+}
+.list ul{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+.list ul li{
+    width: 20%;
+    text-align: center;
+    margin-top: 11px;
+}
+.list ul li img{
+    width: 45px;
+    height: 45px;
+}
+.list ul li p{
+    font-size: 12px;
+    color: #666;
+}
+.pztc_p{
+    padding-top: 12px;
+    padding-left: 15px;
+    display: flex;
+    justify-content: space-between;
+    background: linear-gradient(0deg,#f4f4f4 5%,#fafafa 95%);
+}
+.pztc .pztc_left{}
+.pztc .pztc_left h3{
+    font-size: 17px;
+    color: #333;
+    font-weight: 700;
+    margin-bottom: 5px;
+}
+.pztc .pztc_left p:nth-child(2) {
+    color: #777;
+    font-size: 13px;
+    margin-bottom: 9px;
+}
+.pztc .pztc_left p:nth-child(3){
+     color: #af8260;
+    font-size: 12px;
+    font-weight: 700;
+}
+.pztc img{
+    width: 141px;
+    margin-right: 5px;
+}
+.super{
+    margin-top: 3px;
+}
+.superhy{
+    width: 100%;
+    height: 40px;
+    background: linear-gradient(90deg,#ffefc4,#f3dda0);
+    display: flex;
+    justify-content: space-between;
+    align-items: center
+}
+.super_left{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 15px;
+}
+.super_left img{
+    width: 17px;
+    height: 17px;
+    margin-right: 8px;
+}
+.super_left h3{
+    color: #644f1b;
+    font-size: 14px;
+    font-weight: 700;
+}
+.super_left p{
+    color: #644f1b;
+    font-size: 12px;
+}
+
+.superhy p{
+    color: #644f1b;
+    font-size: 12px;
+    padding-right: 5px;
+}
+.tjsj{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 14px 0px;
+}
+.tjsj p:nth-child(1){
+    width: 20px;
+    height: 1px;
+    background: #999;
+}
+.tjsj p:nth-child(2){
+    font-size: 15px;
+    margin: 0px 13px;
+}
+.tjsj p:nth-child(3){
+    width: 20px;
+    height: 1px;
+    background: #999;
+}
+.menu{}
+.menu_list{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.menu_list p{
+    color: #666;
+    font-size: 14px;
+}
+.menu_list .m_l{
+    display: flex;
+    align-items: center;
+}
+.menu_list .m_l i{
+    font-size: 9px;
+    color: #666;
+}
+.menu_list .m_ll{
+    display: flex;
+    align-items: center;
+}
+.menu_list .m_ll i{
+    font-size: 13.5px;
+    color: #666;
+}
+
+.content_nr{}
+.nr_list{
+    margin: 15px 0px;
+}
+.nr_top{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.nr_top_left{}
+.nr_top_left img{
+    width: 64px;
+    height: 64px;
+}
+
+.nr_top_right{
+    width: 80%;
+}
+.nr_top_right_title{
+    display: flex;
+    justify-content: space-between;
+}
+.nr_top_right_title p{
+    font-size: 15px;
+    font-weight: 700;
+    color: #333;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 83%;
+}
+.nr_top_right_title i{
+    height: 10.4px;
+    line-height: 10.4px;
+}
+.nr_top_right_dingdan span{
+    color: #666;
+    font-size: 12px;
+}
+.nr_top_right_dingdan{
+    margin-top: 5px;
+}
+.nr_top_right_time{
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+    font-size: 12px;
+    margin-top: 5px;
+}
+.time_left,.time_right{
+    position: relative;
+}
+.nr_top_right_time span:nth-child(2){
+    margin-left: 6px;
+}
+.nr_top_right_time span:nth-child(1)::after {
+    height: 10px;
+    width: 1px;
+    content: "";
+    position: absolute;
+    /* transform: scaleY(0.5); */
+    bottom: 2px;
+    left: 49px;
+    background: #ddd;
+}
+
+.nr_down{
+    padding-left: 70px;
+}
+.zd{
+    margin-bottom: 15px;
+    margin-top: 10px;
+}
+.zhou{
+    width: 27px;
+    height: 13px;
+    color: rgb(102, 102, 102);
+    font-size: 9px;
+    border: 1px solid;
+    border-color: rgb(221, 221, 221);
+    text-align: center;
+    line-height: 13px;
+}
+.yhhd_top{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.jian{
+    width: 14px;
+    height: 14px;
+    background: rgb(240, 115, 115);
+    margin-right: 6px;
+}
+.jian>p{
+    font-size: 12px;
+    transform: scale(0.8);
+    color: #fff;
+    text-align: center;
+    line-height: 14px;
+}
+.yhhd_top_left{
+    display: flex;
+    align-items: center;
+    width: 70%;
+}
+.yhhd_top_left span{
+    font-size: 12px;
+    color: #666;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 83%;
+}
+.yhhd_top_right{
+    display: flex;
+    align-items: center;
+}
+.yhhd_top_right span{
+    font-size: 12px;
+    color: #999;
+}
+.yhhd_top_right i{
+    font-size: 12px;
+    transform: scale(0.8);
+    color: #999;
+}
+.jian1{
+    width: 14px;
+    height: 14px;
+    background: rgb(112, 188, 70);
+    margin-right: 6px;
+}
+.jian1>p{
+    font-size: 12px;
+    transform: scale(0.8);
+    color: #fff;
+    text-align: center;
+    line-height: 14px;
+}
+.yhhd_down{
+    display: flex;
+    align-items: center;
+    margin-top: 2.5px;
+}
+.yhhd_down span{
+    font-size: 12px;
+    color: #666;
+}
+
+.xian{
+    width: 100%;
+    transform: scaleY(0.5);
+    height: 1px;
+    background: #e5e5e5;
+    margin-top: 1.225rem;
+}
+
+.footer{
+    width: 100%;
+    height: 50px;
+    box-shadow: 0 -0.266667vw 0.533333vw rgba(0,0,0,.1);
+    position: fixed;
+    bottom: 0;
+    background: #fff;
+    left: 0;
+    z-index: 999;
+}
+.footer ul{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.footer ul li{
+    text-align: center;
+    width: 25%;
+    margin-top: 5px;
+}
+.footer ul li img{
+    width: 20px;
+    height: 20px;
+}
+.footer ul li p{
+    font-size: 12px;
+    color: #8e8e93;
+}
+
+
+
+
+
+
+
+
+
+

历届学生/韩想/项目开发/练习项目/仿饿了么/赵俊凯/css/public.css

@@ -0,0 +1,16 @@
+/* 存放公共css的 */
+.theme_red {
+    color: blue;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.p_14 {
+    padding: 0 14px;
+}

历届学生/韩想/项目开发/练习项目/仿饿了么/赵俊凯/image/comment.svg

@@ -0,0 +1 @@
+<svg width="60" height="10" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#FFDE00" offset="0%"/><stop stop-color="#FFB000" offset="100%"/></linearGradient></defs><path d="M54.017 8.072l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L53.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm-48 0L3.465 9.633c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L5.63.589c.213-.515.557-.523.774 0L7.55 3.352l2.982.237c.556.044.67.368.24.736L8.497 6.269l.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L17.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L29.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L41.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56z" fill="url(#a)" fill-rule="evenodd"/></svg>

历届学生/韩想/项目开发/练习项目/仿饿了么/赵俊凯/index.html

@@ -0,0 +1,590 @@
+<!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/index.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1978518_nnq8hdcf9j9.css">
+    <title>饿了么</title>
+</head>
+
+<body>
+    <div class="header">
+        <div class="head p_14">
+            <div class="head_top">
+                <i class="iconfont icon-location"></i>
+                <p>信旺华府俊苑24栋</p>
+                <i class="iconfont icon-down"></i>
+            </div>
+            <div class="head_sosuo">
+                <a href="">
+                    <i class="iconfont icon-search1"></i>
+                    <span>搜索饿了么商家、商品名称</span>
+                </a>
+            </div>
+        </div>
+    </div>
+    <div class="content">
+        <div class="list">
+            <ul>
+                <li>
+                    <a href="">
+                        <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>
+                    </a>
+                </li>
+                <li><a href="">
+                        <img src="https://cube.elemecdn.com/a/7b/b02bd836411c016935d258b300cfejpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed"
+                            alt="">
+                        <p>大牌惠吃</p>
+                    </a></li>
+                <li><a href="">
+                        <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>
+                    </a></li>
+                <li><a href="">
+                        <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>
+                    </a></li>
+                <li><a href="">
+                        <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>
+                    </a></li>
+                <li><a href="">
+                        <img src="https://cube.elemecdn.com/0/1a/314b6da88ab6c7ae9828f91652d40jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed"
+                            alt="">
+                        <p>速食简餐</p>
+                    </a></li>
+                <li><a href="">
+                        <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>
+                    </a></li>
+                <li><a href="">
+                        <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>
+                    </a></li>
+                <li><a href="">
+                        <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>
+                    </a></li>
+                <li><a href="">
+                        <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>
+                    </a></li>
+            </ul>
+        </div>
+        <div class="pztc p_14">
+            <div class="pztc_p">
+                <div class="pztc_left">
+                    <h3>品质套餐</h3>
+                    <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>
+        </div>
+        <div class="super p_14">
+            <div class="superhy">
+                <div class="super_left">
+                    <img
+                        src="https://cube.elemecdn.com/8/0e/4dd212d831becab6e3ebd484c0941jpeg.jpeg?x-oss-process=image/format,webp/resize,w_34">
+                    <h3>超级会员</h3>
+                    <p>●已为我节省161.5元</p>
+                </div>
+                <p>下单即可获得奖励金 ></p>
+            </div>
+        </div>
+        <div class="tjsj">
+            <p></p>
+            <p>推荐商家</p>
+            <p></p>
+        </div>
+        <div class="menu p_14">
+            <div class="menu_list">
+                <div class="m_l">
+                    <p>综合排序</p>
+                    <i class="iconfont icon-down"></i>
+                </div>
+                <div>
+                    <p>距离最近</p>
+                </div>
+                <div>
+                    <p>销量最高</p>
+                </div>
+                <div class="m_ll">
+                    <p>筛选</p>
+                    <i class="iconfont icon-Filterfunnelsort"></i>
+                </div>
+            </div>
+        </div>
+        <div class="content_nr p_14">
+            <div class="nr_list">
+                <div class="nr_top">
+                    <div class="nr_top_left">
+                        <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+                    </div>
+                    <div class="nr_top_right">
+                        <div class="nr_top_right_title">
+                            <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                            <i>...</i>
+                        </div>
+                        <div class="nr_top_right_dingdan">
+                            <img src="./image/comment.svg" alt="">
+                            <span>4.7 月售5244单</span>
+                        </div>
+                        <div class="nr_top_right_time">
+                            <div class="time_left">
+                                <span> ¥12起送</span>
+                                <span>配送¥2</span>
+                            </div>
+                            <div class="time_right">
+                                <span>1.13Km</span>
+                                <span>32分钟3Km</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="nr_down">
+                    <div class="zd">
+                        <div class="zhou">粥店</div>
+                    </div>
+                    <div class="yhhd">
+                        <div class="yhhd_top">
+                            <div class="yhhd_top_left">
+                                <div class="jian">
+                                    <p>减</p>
+                                </div>
+                                <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                            </div>
+                            <div class="yhhd_top_right">
+                                <span>4个活动</span>
+                                <i class="iconfont icon-down"></i>
+                            </div>
+                        </div>
+                        <div class="yhhd_down">
+                            <div class="jian1">
+                                <p>配</p>
+                            </div>
+                            <span>配送费立减1元</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="xian"></div>
+            <div class="nr_list">
+                <div class="nr_top">
+                    <div class="nr_top_left">
+                        <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+                    </div>
+                    <div class="nr_top_right">
+                        <div class="nr_top_right_title">
+                            <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                            <i>...</i>
+                        </div>
+                        <div class="nr_top_right_dingdan">
+                            <img src="./image/comment.svg" alt="">
+                            <span>4.7 月售5244单</span>
+                        </div>
+                        <div class="nr_top_right_time">
+                            <div class="time_left">
+                                <span> ¥12起送</span>
+                                <span>配送¥2</span>
+                            </div>
+                            <div class="time_right">
+                                <span>1.13Km</span>
+                                <span>32分钟3Km</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="nr_down">
+                    <div class="zd">
+                        <div class="zhou">粥店</div>
+                    </div>
+                    <div class="yhhd">
+                        <div class="yhhd_top">
+                            <div class="yhhd_top_left">
+                                <div class="jian">
+                                    <p>减</p>
+                                </div>
+                                <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                            </div>
+                            <div class="yhhd_top_right">
+                                <span>4个活动</span>
+                                <i class="iconfont icon-down"></i>
+                            </div>
+                        </div>
+                        <div class="yhhd_down">
+                            <div class="jian1">
+                                <p>配</p>
+                            </div>
+                            <span>配送费立减1元</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="xian"></div>
+            <div class="nr_list">
+                <div class="nr_top">
+                    <div class="nr_top_left">
+                        <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+                    </div>
+                    <div class="nr_top_right">
+                        <div class="nr_top_right_title">
+                            <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                            <i>...</i>
+                        </div>
+                        <div class="nr_top_right_dingdan">
+                            <img src="./image/comment.svg" alt="">
+                            <span>4.7 月售5244单</span>
+                        </div>
+                        <div class="nr_top_right_time">
+                            <div class="time_left">
+                                <span> ¥12起送</span>
+                                <span>配送¥2</span>
+                            </div>
+                            <div class="time_right">
+                                <span>1.13Km</span>
+                                <span>32分钟3Km</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="nr_down">
+                    <div class="zd">
+                        <div class="zhou">粥店</div>
+                    </div>
+                    <div class="yhhd">
+                        <div class="yhhd_top">
+                            <div class="yhhd_top_left">
+                                <div class="jian">
+                                    <p>减</p>
+                                </div>
+                                <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                            </div>
+                            <div class="yhhd_top_right">
+                                <span>4个活动</span>
+                                <i class="iconfont icon-down"></i>
+                            </div>
+                        </div>
+                        <div class="yhhd_down">
+                            <div class="jian1">
+                                <p>配</p>
+                            </div>
+                            <span>配送费立减1元</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="xian"></div>
+            <div class="nr_list">
+                <div class="nr_top">
+                    <div class="nr_top_left">
+                        <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+                    </div>
+                    <div class="nr_top_right">
+                        <div class="nr_top_right_title">
+                            <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                            <i>...</i>
+                        </div>
+                        <div class="nr_top_right_dingdan">
+                            <img src="./image/comment.svg" alt="">
+                            <span>4.7 月售5244单</span>
+                        </div>
+                        <div class="nr_top_right_time">
+                            <div class="time_left">
+                                <span> ¥12起送</span>
+                                <span>配送¥2</span>
+                            </div>
+                            <div class="time_right">
+                                <span>1.13Km</span>
+                                <span>32分钟3Km</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="nr_down">
+                    <div class="zd">
+                        <div class="zhou">粥店</div>
+                    </div>
+                    <div class="yhhd">
+                        <div class="yhhd_top">
+                            <div class="yhhd_top_left">
+                                <div class="jian">
+                                    <p>减</p>
+                                </div>
+                                <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                            </div>
+                            <div class="yhhd_top_right">
+                                <span>4个活动</span>
+                                <i class="iconfont icon-down"></i>
+                            </div>
+                        </div>
+                        <div class="yhhd_down">
+                            <div class="jian1">
+                                <p>配</p>
+                            </div>
+                            <span>配送费立减1元</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="xian"></div>
+            <div class="nr_list">
+                <div class="nr_top">
+                    <div class="nr_top_left">
+                        <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+                    </div>
+                    <div class="nr_top_right">
+                        <div class="nr_top_right_title">
+                            <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                            <i>...</i>
+                        </div>
+                        <div class="nr_top_right_dingdan">
+                            <img src="./image/comment.svg" alt="">
+                            <span>4.7 月售5244单</span>
+                        </div>
+                        <div class="nr_top_right_time">
+                            <div class="time_left">
+                                <span> ¥12起送</span>
+                                <span>配送¥2</span>
+                            </div>
+                            <div class="time_right">
+                                <span>1.13Km</span>
+                                <span>32分钟3Km</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="nr_down">
+                    <div class="zd">
+                        <div class="zhou">粥店</div>
+                    </div>
+                    <div class="yhhd">
+                        <div class="yhhd_top">
+                            <div class="yhhd_top_left">
+                                <div class="jian">
+                                    <p>减</p>
+                                </div>
+                                <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                            </div>
+                            <div class="yhhd_top_right">
+                                <span>4个活动</span>
+                                <i class="iconfont icon-down"></i>
+                            </div>
+                        </div>
+                        <div class="yhhd_down">
+                            <div class="jian1">
+                                <p>配</p>
+                            </div>
+                            <span>配送费立减1元</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="xian"></div>
+            <div class="nr_list">
+                <div class="nr_top">
+                    <div class="nr_top_left">
+                        <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+                    </div>
+                    <div class="nr_top_right">
+                        <div class="nr_top_right_title">
+                            <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                            <i>...</i>
+                        </div>
+                        <div class="nr_top_right_dingdan">
+                            <img src="./image/comment.svg" alt="">
+                            <span>4.7 月售5244单</span>
+                        </div>
+                        <div class="nr_top_right_time">
+                            <div class="time_left">
+                                <span> ¥12起送</span>
+                                <span>配送¥2</span>
+                            </div>
+                            <div class="time_right">
+                                <span>1.13Km</span>
+                                <span>32分钟3Km</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="nr_down">
+                    <div class="zd">
+                        <div class="zhou">粥店</div>
+                    </div>
+                    <div class="yhhd">
+                        <div class="yhhd_top">
+                            <div class="yhhd_top_left">
+                                <div class="jian">
+                                    <p>减</p>
+                                </div>
+                                <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                            </div>
+                            <div class="yhhd_top_right">
+                                <span>4个活动</span>
+                                <i class="iconfont icon-down"></i>
+                            </div>
+                        </div>
+                        <div class="yhhd_down">
+                            <div class="jian1">
+                                <p>配</p>
+                            </div>
+                            <span>配送费立减1元</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="xian"></div>
+            <div class="nr_list">
+                <div class="nr_top">
+                    <div class="nr_top_left">
+                        <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+                    </div>
+                    <div class="nr_top_right">
+                        <div class="nr_top_right_title">
+                            <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                            <i>...</i>
+                        </div>
+                        <div class="nr_top_right_dingdan">
+                            <img src="./image/comment.svg" alt="">
+                            <span>4.7 月售5244单</span>
+                        </div>
+                        <div class="nr_top_right_time">
+                            <div class="time_left">
+                                <span> ¥12起送</span>
+                                <span>配送¥2</span>
+                            </div>
+                            <div class="time_right">
+                                <span>1.13Km</span>
+                                <span>32分钟3Km</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="nr_down">
+                    <div class="zd">
+                        <div class="zhou">粥店</div>
+                    </div>
+                    <div class="yhhd">
+                        <div class="yhhd_top">
+                            <div class="yhhd_top_left">
+                                <div class="jian">
+                                    <p>减</p>
+                                </div>
+                                <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                            </div>
+                            <div class="yhhd_top_right">
+                                <span>4个活动</span>
+                                <i class="iconfont icon-down"></i>
+                            </div>
+                        </div>
+                        <div class="yhhd_down">
+                            <div class="jian1">
+                                <p>配</p>
+                            </div>
+                            <span>配送费立减1元</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="xian"></div>
+            <div class="nr_list">
+                <div class="nr_top">
+                    <div class="nr_top_left">
+                        <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+                    </div>
+                    <div class="nr_top_right">
+                        <div class="nr_top_right_title">
+                            <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                            <i>...</i>
+                        </div>
+                        <div class="nr_top_right_dingdan">
+                            <img src="./image/comment.svg" alt="">
+                            <span>4.7 月售5244单</span>
+                        </div>
+                        <div class="nr_top_right_time">
+                            <div class="time_left">
+                                <span> ¥12起送</span>
+                                <span>配送¥2</span>
+                            </div>
+                            <div class="time_right">
+                                <span>1.13Km</span>
+                                <span>32分钟3Km</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="nr_down">
+                    <div class="zd">
+                        <div class="zhou">粥店</div>
+                    </div>
+                    <div class="yhhd">
+                        <div class="yhhd_top">
+                            <div class="yhhd_top_left">
+                                <div class="jian">
+                                    <p>减</p>
+                                </div>
+                                <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                            </div>
+                            <div class="yhhd_top_right">
+                                <span>4个活动</span>
+                                <i class="iconfont icon-down"></i>
+                            </div>
+                        </div>
+                        <div class="yhhd_down">
+                            <div class="jian1">
+                                <p>配</p>
+                            </div>
+                            <span>配送费立减1元</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="xian"></div>
+        </div>
+    </div>
+
+    <div class="footer">
+        <ul>
+            <li><a href="">
+                    <img src="./image/sy.png" alt="">
+                    <p>首页</p>
+                </a></li>
+            <li><a href="">
+                    <img src="./image/fx.png" alt="">   
+                    <p>发现</p>
+                </a></li>
+            <li><a href="">
+                    <img src="./image/dd.png" alt="">
+                    <p>订单</p>
+                </a></li>
+            <li><a href="">
+                    <img src="./image/wd.png" alt="">
+                    <p>我的</p>
+                </a></li>
+        </ul>
+    </div>
+</body>
+
+</html>

历届学生/韩想/项目开发/练习项目/仿饿了么/韩想/css/clear.css

@@ -0,0 +1,16 @@
+/* 专门用来重置浏览器默认样式的 */
+body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+}
+
+input {
+    outline: none;
+}
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

历届学生/韩想/项目开发/练习项目/仿饿了么/韩想/css/index.css

@@ -0,0 +1,365 @@
+.header {
+    background-image: linear-gradient(90deg,#0af,#0085ff);
+    padding: 10px 14px;
+}
+.location {
+    height: 34.5px;
+    line-height: 34.5px;
+}
+.location i {
+     color: #fff;
+}
+.location span {
+    color: #fff;
+    font-size: 15px;
+}
+.content {
+    margin-bottom: 60px;
+}
+.content .meishi{
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: 10px;
+}
+.content .item{
+    width: 20%;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.content .item img{
+    width: 45px;
+    height: 45px;
+}
+.content .item p{
+    font-size: 12px;
+    color: #666;
+}
+.taocan img{
+    width: 150px;
+    height: 85px;
+    margin-right: -15px;
+}
+.taocan{
+    display: flex;
+    justify-content: space-between;
+    background: linear-gradient(0deg,#f4f4f4 5%,#fafafa 95%);
+    padding: 0 27px;
+}
+
+.taocan_left span{
+    font-size: 13px;
+    color: #777777;
+    margin-bottom: 7px;
+}
+.taocan_left p{
+    font-size: 13px;
+    color: #af8260;
+    margin-top: 5px;
+}
+.vip{
+    width: 100%;
+    height: 40px;
+    background: linear-gradient(90deg,#ffefc4,#f3dda0);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2px;
+}
+.vip1{
+    display: flex;
+    padding: 0 5px;
+}
+.vip_left :nth-child(2){
+    color: #644f1b;
+    font-size: 16px;
+    font-weight: 700;
+}
+ .tuijian1 p:nth-child(1){ 
+    width: 20px;
+    height: 1px;
+    background: #999;
+}
+.tuijian1 p:nth-child(3){
+    width: 20px;
+    height: 1px;
+    background: #999;
+}
+.tuijian1 :nth-child(2){
+    font-size: 15px;
+    margin: 0px 13px;
+    margin-top: 0px;
+    margin-right: 13px;
+    margin-bottom: 0px;
+    margin-left: 13px;
+}
+.tuijian p{
+    text-align: center;
+}
+.tuijian{
+    padding-top: 0px;
+    padding-bottom: 0px;
+    width: 100%;
+    height: 40px;
+    margin-top: 15px;
+}
+.tuijian1{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 14px 0px;
+    margin-top: 14px;
+    margin-right: 0px;
+    margin-bottom: 14px;
+    margin-left: 0px;
+}
+.menu{
+    padding: 0 8px;
+}
+.menu1{
+    display: flex;
+    justify-content: space-between;
+    padding: 0 8px
+}
+.menu1_list{
+    display: flex;
+}
+.shaixuan{
+    display: flex;
+}
+.zhou_left img{
+    width: 64px;
+    height: 64px;
+    margin-right: 0.5rem;
+}
+.zhou_left{
+    margin-top: -56px;
+    
+}
+.zhou_right{
+    margin-right: 210px;
+}
+.zhou_title{
+    display: flex;
+    justify-content: space-between;
+}
+.zhoudian_top{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+}
+.zhoudian_under{
+    justify-content: flex-end;
+}
+.search{
+    display: inline-block;
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    background: #fff;
+    text-align: center;
+}
+.content.meishi{
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        margin: 10px;
+}
+.peisong{
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+    font-size: 12px;
+    margin-top: 5px;
+}
+.dingdan img{
+    width: 75px;
+}
+.dingdan span{
+    font-size: 12px;
+    color: #666;
+}
+.zhou_title p{
+    font-size: 15px;
+    font-weight: 700;
+    color: #333;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 83%;
+}
+.zhou_right{
+    width: 80%;
+}
+.shang span{
+    font-size: 12px;
+    color: #ccc;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.shang{
+    display: flex;
+    align-items: center;
+    width: 70%;
+    justify-content: space-around;
+    
+}
+.xia{
+    display: flex;
+    align-items: center;
+    margin-top: 2.5px;
+
+}
+.xia span{
+    font-size: 12px;
+    color: #666;
+}
+.pei p{
+    font-size: 12px;
+    transform: scale(0.8);
+    color: #fff;
+    text-align: center;
+    line-height: 14px;
+}
+.pei{
+    width: 14px;
+    height: 14px;
+    background: rgb(112, 188, 70);
+    margin-right: 6px;
+}
+.zhou{
+    width: 27px;
+    height: 13px;
+    color: rgb(102, 102, 102);
+    font-size: 9px;
+    border: 1px solid;
+    border-color: rgb(221, 221, 221);
+    text-align: center;
+    line-height: 13px;
+}
+.zhoudian_down{
+    margin-left: 70px;
+}
+.zhou .p{
+    font-size: 12px;
+    transform: scale(0.8);
+    color: #fff;
+    text-align: center;
+    line-height: 14px;
+}
+.zuo{
+    width: 14px;
+    height: 14px;
+    background: rgb(240, 115, 115);
+    margin-right: 6px;
+}
+.zuo p{
+    font-size: 12px;
+    transform: scale(0.8);
+    color: #fff;
+    text-align: center;
+    line-height: 14px;
+}
+.you{
+    display: flex;
+    align-items: center;
+    margin-right: -74px;
+}
+.you p{
+    font-size: 12px;
+    color: #ccc;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+
+.footer{
+    width: 100%;
+    height: 50px;
+    box-shadow: 0 -0.266667vw 0.533333vw rgba(0,0,0,.1);
+    position: fixed;
+    bottom: 0;
+    background: #fff;
+    left: 0;
+    z-index: 999;
+}
+.footer ul{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.footer ul li{
+    text-align: center;
+    width: 25%;
+    margin-top: 5px;
+}
+.footer ul li img{
+    width: 20px;
+    height: 20px;
+}
+.footer ul li p{
+    font-size: 12px;
+    color: #8e8e93;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.bottom{
+    position: fixed;
+    width: 100%;
+    height: 50px;
+    background: #fff;
+    display: flex;
+    justify-content: space-around;
+    bottom: 0;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 4px;
+    align-items: center;
+}

历届学生/韩想/项目开发/练习项目/仿饿了么/韩想/css/public.css

@@ -0,0 +1,16 @@
+/* 存放公共css的 */
+.theme_red {
+    color: blue;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.p_14 {
+    padding: 0 14px;
+}

历届学生/韩想/项目开发/练习项目/仿饿了么/韩想/index.html

@@ -0,0 +1,353 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>韩想饿了么</title>
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1995569_8cb20f9oq5g.css">
+</head>
+<body>
+    <div class="header">
+        <div class="location">
+            <i class="iconfont icon-dizhi"></i>
+            <span>东方明珠</span>
+            <i class="iconfont icon-down"></i>
+        </div>
+        <a class="search">
+            <i class="iconfont icon-search"></i>
+            <span>搜索饿了么商家、商品名称</span>
+        </a>
+    </div>
+    </div>
+    <div class="content">
+        <div class="meishi">
+            <div class="item">
+                <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>
+            </div>
+            <div class="item">
+                <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>
+            </div>
+            <div class="item">
+                <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>
+            </div>
+            <div class="item">
+                <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>
+            </div>
+            <div class="item">
+                <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>
+            </div>
+            <div class="item">
+                <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>
+            </div>
+            <div class="item">
+                <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>
+            </div>
+            <div class="item">
+                <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>
+            </div>
+            <div class="item">
+                <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>
+            </div>
+            <div class="item">
+                <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>
+            </div>
+        </div>
+        <div class="taocan">
+            <div class="taocan_left">
+                <h3>品质套餐</h3>
+                <span>搭配齐全吃的好</span>
+                <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>
+        <div class="vip">
+            <div class="vip1">
+                <div class="vip_left">
+                    <i class="iconfont icon-huangguan"></i>
+                    <span>超级会员</span>
+                    <span>·以为我节省666元</span>
+                </div>
+                    <span>下单即可获得奖励金</span>
+            </div>
+        </div>
+        <div class="tuijian">
+           <div class="tuijian1">
+            <p></p>
+            <p>推荐商家</p>
+            <p></p>
+           </div>
+        </div>
+        <div class="menu">
+            <div class="menu1">
+                <div class="menu1_list">
+                    <p>综合排序</p>
+                    <i class="iconfont icon-xiangxia"></i>
+                   
+                </div>
+                    <ul>
+                        <li>
+                            <p>距离最近</p>
+                        </li>
+                    </ul>
+                    <ul>
+                        <li>
+                            <p>距离最近</p>
+                        </li>
+                    </ul>
+                   <div class="shaixuan">
+                            <p>筛选</p>
+                            <i class="iconfont icon-xiangxia"></i>
+                   </div>
+                </div>
+<ul>
+<li>
+    <div class="zhoudian_top">
+        <div class="zhou_left">
+            <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+        </div>
+        <div class="zhou_right">
+            <div class="zhou_title">
+                <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                <i class="iconfont icon-caidan"></i>
+            </div>
+            <div class="dingdan">
+                <img src="./img/xingxing.png" alt="">
+                <span>4.7 月售5244单</span>
+            </div>
+            <div class="peisong">
+                <div class="peisong_left">
+                    <span> ¥12起送</span>
+                    <span>配送¥2</span>
+                </div>
+                <div class="peisong_right">
+                    <span> 1.13Km</span>
+                    <span>32分钟3Km</span>
+                </div>
+            </div>
+                <div class="zhoudian_top">
+                    <div class="zhou">粥店</div>
+                </div>
+                <div class="zhoudian_under">
+                    <div class="shang">
+                        <div class="zuo">
+                            <p>减</p>
+                        </div>
+                        <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                        <div class="you">
+                            <p>4个活动</p>
+                            <i class="iconfont icon-down"></i>
+                        </div>
+        
+                    </div>
+                    <div class="xia">
+                        <div class="pei">
+                            <p>配</p>
+                        </div>
+                    
+                        <span>配送费立减1元</span>
+                    </div>
+        
+                </div>
+
+        </div>
+
+    </div>
+</li>
+
+<li>
+    <div class="zhoudian_top">
+        <div class="zhou_left">
+            <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+        </div>
+        <div class="zhou_right">
+            <div class="zhou_title">
+                <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                <i class="iconfont icon-caidan"></i>
+            </div>
+            <div class="dingdan">
+                <img src="./img/xingxing.png" alt="">
+                <span>4.7 月售5244单</span>
+            </div>
+            <div class="peisong">
+                <div class="peisong_left">
+                    <span> ¥12起送</span>
+                    <span>配送¥2</span>
+                </div>
+                <div class="peisong_right">
+                    <span> 1.13Km</span>
+                    <span>32分钟3Km</span>
+                </div>
+            </div>
+                <div class="zhoudian_top">
+                    <div class="zhou">粥店</div>
+                </div>
+                <div class="zhoudian_under">
+                    <div class="shang">
+                        <div class="zuo">
+                            <p>减</p>
+                        </div>
+                        <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                        <div class="you">
+                            <p>4个活动</p>
+                            <i class="iconfont icon-down"></i>
+                        </div>
+        
+                    </div>
+                    <div class="xia">
+                        <div class="pei">
+                            <p>配</p>
+                        </div>
+                    
+                        <span>配送费立减1元</span>
+                    </div>
+        
+                </div>
+
+        </div>
+
+    </div>
+</li>  
+
+<li>
+    <div class="zhoudian_top">
+        <div class="zhou_left">
+            <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+        </div>
+        <div class="zhou_right">
+            <div class="zhou_title">
+                <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                <i class="iconfont icon-caidan"></i>
+            </div>
+            <div class="dingdan">
+                <img src="./img/xingxing.png" alt="">
+                <span>4.7 月售5244单</span>
+            </div>
+            <div class="peisong">
+                <div class="peisong_left">
+                    <span> ¥12起送</span>
+                    <span>配送¥2</span>
+                </div>
+                <div class="peisong_right">
+                    <span> 1.13Km</span>
+                    <span>32分钟3Km</span>
+                </div>
+            </div>
+                <div class="zhoudian_top">
+                    <div class="zhou">粥店</div>
+                </div>
+                <div class="zhoudian_under">
+                    <div class="shang">
+                        <div class="zuo">
+                            <p>减</p>
+                        </div>
+                        <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                        <div class="you">
+                            <p>4个活动</p>
+                            <i class="iconfont icon-down"></i>
+                        </div>
+        
+                    </div>
+                    <div class="xia">
+                        <div class="pei">
+                            <p>配</p>
+                        </div>
+                    
+                        <span>配送费立减1元</span>
+                    </div>
+        
+                </div>
+
+        </div>
+
+    </div>
+</li> 
+<li>
+    <div class="zhoudian_top">
+        <div class="zhou_left">
+            <img src="https://cube.elemecdn.com/3/3c/0ed527795eb114290aa9940296349JPEG.JPEG" alt="">
+        </div>
+        <div class="zhou_right">
+            <div class="zhou_title">
+                <p>江川右·一家有态度的粥店(黑金蜀山店)</p>
+                <i class="iconfont icon-caidan"></i>
+            </div>
+            <div class="dingdan">
+                <img src="./img/xingxing.png" alt="">
+                <span>4.7 月售5244单</span>
+            </div>
+            <div class="peisong">
+                <div class="peisong_left">
+                    <span> ¥12起送</span>
+                    <span>配送¥2</span>
+                </div>
+                <div class="peisong_right">
+                    <span> 1.13Km</span>
+                    <span>32分钟3Km</span>
+                </div>
+            </div>
+                <div class="zhoudian_top">
+                    <div class="zhou">粥店</div>
+                </div>
+                <div class="zhoudian_under">
+                    <div class="shang">
+                        <div class="zuo">
+                            <p>减</p>
+                        </div>
+                        <span>满25元减13元，满40元减20元，满88元减35元，满100元减45元，满120元减50元</span>
+                        <div class="you">
+                            <p>4个活动</p>
+                            <i class="iconfont icon-down"></i>
+                        </div>
+        
+                    </div>
+                    <div class="xia">
+                        <div class="pei">
+                            <p>配</p>
+                        </div>
+                    
+                        <span>配送费立减1元</span>
+                    </div>
+        
+                </div>
+
+        </div>
+
+    </div>
+</li>
+
+</ul>
+<div class="footer">
+    <ul>
+        <li><a href="">
+                <img src="./img/sy.png" alt="">
+                <p>首页</p>
+            </a></li>
+        <li><a href="">
+                <img src="./img/fx.png" alt="">   
+                <p>发现</p>
+            </a></li>
+        <li><a href="">
+                <img src="./img/dd.png" alt="">
+                <p>订单</p>
+            </a></li>
+        <li><a href="">
+                <img src="./img/wd.png" alt="">
+                <p>我的</p>
+            </a></li>
+    </ul>
+</div>
+</body>
+</html>