first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.9/饿了么/css/clear.css

@@ -0,0 +1,20 @@
+body,ul,li,p,h1,h2,h3,h4,h5,h6 {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+input {
+    outline: none;
+    border: none;
+    padding: 0;
+}
+body{
+    background: #fff;

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.9/饿了么/css/index.css

@@ -0,0 +1,374 @@
+.header{
+    
+    font-size: 0;
+    width: 100%;
+    background-color: #0085ff;
+    box-sizing: border-box;
+
+}
+/*上半部分*/
+.header_top{
+padding: 0.28rem 0.2rem;
+width: 100%;
+display: flex;
+align-items: center;
+justify-content:flex-start;
+padding-bottom: 0;
+box-sizing: border-box;
+
+}
+.icon-dingwei,.icon-gengduo{
+    color: #ffff;
+}
+.header_top h2{
+    padding-left: 0.06rem;
+    padding-right: 0.1rem;
+    font-size: 0.4rem;
+    width: 3.62rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #ffff;
+}
+/*搜索框*/
+.header_bottom{
+width: 100%;
+background-color: #0085ff;
+padding: 0.15rem 0.28rem;
+box-sizing: border-box;
+/* position: fixed;
+z-index: 999;
+right: 0;
+left: 0; */
+}
+.header_bottom .shou{
+  background-color: #ffff;
+  height: 36px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content:center
+  
+}
+.shou span{
+    color: #999;
+    font-size: 0.3rem;
+}
+/*底部*/
+.footer{
+    width: 100%;
+    height: 0.99rem;
+    border-top: 1px solid#0000;/*为实现*/
+    font-size: 0;
+    background-color: #ffff;
+    position: fixed;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 999;
+}
+.footer_layout{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+.footer_layout li{
+    text-align: center;
+    margin-top: 0.1rem;
+}
+.footer_layout li i{
+    font-size: 25px;
+    color: #999;
+}
+.footer_layout li p{
+    font-size: 0.26rem;
+    color: #8e8e93;
+}
+.content{
+    font-size: 0;
+    padding-left: 14px;
+    padding-right: 14px;
+    margin-bottom: 2.2rem;
+
+}
+/*导航*/
+.content_top{
+    width: 100%;
+    
+}
+.content_top_1{
+    display: flex;
+    align-items: center;
+   
+    flex-wrap:wrap;
+
+}
+.content_top_1 li{
+    margin-top: 0.12rem;
+    text-align: center;
+    width: 20%;
+    
+}
+.content_top_1 li img{
+    width: 0.9rem;
+    height: 0.9rem;
+}
+.content_top_1 li p{
+    margin-top: 0.12rem;
+    font-size: 0.1rem;
+    color: #666;
+}
+/*文字*/
+.tup{
+    width: 6.97rem;
+    height:2.21rem;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: space-between;
+    
+    padding-top: 12px;
+    padding-left: 15px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    
+}
+.tup img{
+    width: 129px;
+    height: 94px;
+}
+.wenzi{
+    margin-top: 7px;
+}
+.wenzi h2{
+    font-size: 0.35rem;
+    color: #333;
+    padding-bottom: 3px;
+}
+.wenzi .wenzi_1{
+    font-size: 0.2rem;
+    color: #777;
+    padding-bottom: 5px;
+}
+.wenzi .wenzi_2{
+    font-size: 0.2rem;
+    color: #af8260;
+}
+/*会员*/
+.huiyuan{
+    width: 6.97rem;
+    height: 0.8rem;
+    background-color: #f3dda0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.06rem;
+}
+.huiyuan_left{
+    display: flex;
+    align-items: center;
+    padding-left: 0.3rem;
+
+}
+.huiyuan_left img{ 
+    width: 0.34rem;
+    height: 0.34rem;
+    padding-right: 0.1rem;
+}
+.huiyuan_left .left_1{
+    font-size: 0.28rem;
+    font-weight: 700;
+    padding-right: 0.06rem;
+}
+.huiyuan_left .left_2{
+    font-size: 0.17rem;
+}
+.huiyuan_right{
+    display: flex;
+    align-items: center;
+    padding-right: 0.06rem;
+}
+.huiyuan_right span{
+    font-size: 0.2rem;
+}
+.huiyuan_righ .icon-gengduo-copy{
+font-size: 0.1rem;/*没加上去*/
+}
+.shop_top{
+display: flex;
+align-items: center;
+justify-content: center;
+margin-top: 0.4rem;
+
+}
+/*推荐商家*/
+.shop_top span{
+    font-size: 0.33rem;
+    position: relative;
+    
+    
+}
+.shop_top span::before{
+    content: "";
+    width: 0.52rem;
+    height: 0.02rem;
+    position: absolute;
+    background-color: #999;
+    top: 50%;
+    transform: translateY(-50%);
+    left: -0.68rem;
+}
+.shop_top span::after{
+    content: "";
+    width: 0.52rem;
+    height: 0.02rem;
+    position: absolute;
+    background-color: #999;
+    top: 50%;
+    transform: translateY(-50%);
+    right:-0.68rem;
+}
+/*导航*/
+.list{
+    margin-top: 0.4rem;
+    margin-bottom: 0.3rem;
+}
+.list_1{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.list_1 li{
+}
+.list_1 li span{
+    color: #666;
+    font-size: 0.3rem;
+}
+/*商店列表*/
+.shop{
+    padding-top: 15px;
+}
+.shop_1{
+}
+.shop_1 li{
+    display: flex;
+}
+ .din{
+    width: 65px;
+    height: 65px;
+}
+.shop_right{
+    height: 100px;
+    width: 280px;
+    margin-left: 10px;
+}
+.shop_right  .mz{/*店铺名字*/
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.shop_right  .mz h3{
+    font-size: 0.3rem;
+}
+/*评星*/
+.shop_right  .px{
+    margin-top: 0.06rem;
+    display: flex;
+    align-items: center;
+}
+.shop_right  .px .px_1{
+    background: url(../img/xing.svg);
+    width: 1.22rem;
+    height: 0.22rem;
+    display: inline-block;
+}
+.shop_right  .px span{
+    font-size: 0.01rem;/*缩放属性忘了*/
+    padding-left: 0.08rem;
+
+}
+/*起送*/
+.shop_right .qs{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.06rem;
+
+}
+.qs_left span{
+    font-size: 0.1rem; 
+    color: #666;
+    
+}
+.qs_left .qs_1::before{
+    content: "|";
+    color: #ddd;
+    margin-left: 3px;
+    margin-right: 3px;
+
+}
+.qs_right .qs_2::before{
+    content: "|";
+    color: #ddd;
+    margin-left: 3px;
+    margin-right: 3px;
+
+}
+.qs_right span{
+    font-size: 0.1rem; 
+    color: #666;
+}
+/*类别*/
+.leibie{/*问题*/
+    margin-top: 0.1rem;
+    border:2px solid #124;
+    color: rgb(102, 102, 102);
+    font-size: 0.01rem;
+}
+.xxxx{
+    width: 100%;
+    height: 1px;
+    background: #000;
+    margin-top: 20px;
+}
+/*报错*/
+.jm{
+    
+}
+.jm_a{
+    margin-top: 0.06rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    
+}
+.jm_left{
+    display: flex;
+}
+
+.jm_left span{
+    font-size: 0.01rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 3.52rem;
+
+}
+.jm_1{
+    width: 0.35rem !important;
+    font-size: 0.01rem;
+    color: #fff;
+    background-color: crimson;
+    text-align: center;
+    margin-right: 0.2rem;
+}
+.jm_right {
+    display: flex;
+    align-items: center;
+
+}
+.jm_right span{
+    font-size: 0.01rem;
+    color: #666;
+    margin-right: 0.06rem;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.9/饿了么/img/xing.svg

@@ -0,0 +1 @@
+<svg width="60" height="10" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="50%" x2="100%" 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>

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.9/饿了么/index.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./js/rem.js"></script>
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2604059_y9qg1x7tudq.css">
+</head>
+<div class="header">
+    <div class="header_top">
+        <!--上半部分-->
+        <i class="iconfont icon-dingwei"></i>
+        <h2>安徽工业经济职业技术学院18栋宿舍楼</h2>
+        <i class="iconfont icon-gengduo"></i>
+    </div>
+    <div class="header_bottom">
+        <!--搜索框-->
+        <div class="shou">
+            <i class="iconfont icon-sousuo"></i>
+            <span>搜索饿了么商家、商品名称</span>
+        </div>
+    </div>
+</div>
+<div class="content">
+    <div class="content_top">
+        <!--导航-->
+        <ul class="content_top_1">
+            <li>
+                <img src="./img/shiwu.png" alt="">
+                <p>美食</p>
+            </li>
+            <li>
+                <img src="./img/shiwu.png" alt="">
+                <p>美食</p>
+            </li>
+            <li>
+                <img src="./img/shiwu.png" alt="">
+                <p>美食</p>
+            </li>
+            <li>
+                <img src="./img/shiwu.png" alt="">
+                <p>美食</p>
+            </li>
+            <li>
+                <img src="./img/shiwu.png" alt="">
+                <p>美食</p>
+            </li>
+            <li>
+                <img src="./img/shiwu.png" alt="">
+                <p>美食</p>
+            </li>
+            <li>
+                <img src="./img/shiwu.png" alt="">
+                <p>美食</p>
+            </li>
+            <li>
+                <img src="./img/shiwu.png" alt="">
+                <p>美食</p>
+            </li>
+        </ul>
+    </div>
+    <div class="tup">
+        <!--会员-->
+        <div class="wenzi">
+            <h2>品质套餐</h2>
+            <p class="wenzi_1">搭配齐全吃的好</p>
+            <p class="wenzi_2">立刻抢购</p>
+        </div>
+        <img src="./img/shiwu_1.png" alt="">
+    </div>
+    <div class="huiyuan">
+        <!--会员-->
+        <div class="huiyuan_left">
+            <img src="./img/wanguan.png" alt="">
+            <span class="left_1">超级会员</span>.
+            <span class="left_2">每月领20元红包</span>
+        </div>
+        <div class="huiyuan_right">
+            <span>立刻开通</span>
+            <i class="iconfont icon-gengduo-copy"></i>
+        </div>
+    </div>
+    <div class="shop_top">
+        <!--推荐商家-->
+        <span>推荐商家</span>
+    </div>
+    <div class="list">
+        <!--导航-->
+        <ul class="list_1">
+            <li>
+                <span>综合排序</span>
+                <i class="iconfont icon-more-copy"></i>
+            </li>
+            <li>
+                <span>距离最近</span>
+            </li>
+            <li>
+                <span>销量最高</span>
+            </li>
+            <li>
+                <span>筛选</span>
+                <i class="iconfont icon-iconfuzhi"></i>
+            </li>
+        </ul>
+    </div>
+    <div class="shop">
+        <ul class="shop_1">
+            <li>
+                <img class="din" src="./img/shp.png" alt="">
+                <div class="shop_right">
+                    <div class="mz">
+                        <!--店铺名字-->
+                        <h3>湘徽味道</h3>
+                        <i class="iconfont icon-shenglve"></i>
+                    </div>
+                    <div class="px">
+                        <!--评星-->
+                        <i class="px_1"></i>
+                        <span>4</span>
+                        <span>月售4399单</span>
+                    </div>
+                    <div class="qs">
+                        <!--起送-->
+                        <div class="qs_left">
+                            <span>¥20起送</span>
+                            <span class="qs_1">远距离配送¥2</span>
+                        </div>
+                        <div class="qs_right">
+                            <span>3.54km</span>
+                            <span class="qs_2">47分钟</span>
+                        </div>
+                    </div>
+                    <p class="leibie">农家菜</p>
+                    <!--类别-->
+                    <div class="xxxx">
+                        <!--线-->
+                    </div>
+                    <div class="jm"><!--报错-->>
+                        
+                        <div class="jm_a">
+
+                            <div class="jm_left">
+                                <span class="jm_1">减</span>
+                                <span>满18元减8元，满36元减17元，满46元减21元，满56元减26元，满70元减31元</span>
+                            </div>
+                            <div class="jm_right">
+                                <span>7个活动</span>
+                                <i class="iconfont icon-more-copy"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </li>
+            <li>
+                <img class="din" src="./img/shp.png" alt="">
+                <div class="shop_right">
+                    <div class="mz">
+                        <!--店铺名字-->
+                        <h3>湘徽味道</h3>
+                        <i class="iconfont icon-shenglve"></i>
+                    </div>
+                    <div class="px">
+                        <!--评星-->
+                        <i class="px_1"></i>
+                        <span>4</span>
+                        <span>月售4399单</span>
+                    </div>
+                    <div class="qs">
+                        <!--起送-->
+                        <div class="qs_left">
+                            <span>¥20起送</span>
+                            <span class="qs_1">远距离配送¥2</span>
+                        </div>
+                        <div class="qs_right">
+                            <span>3.54km</span>
+                            <span class="qs_2">47分钟</span>
+                        </div>
+                    </div>
+                    <p class="leibie">农家菜</p>
+                    <!--类别-->
+                    <div class="xxxx">
+                        <!--线-->
+                    </div>
+                    <div class="jm">
+                        <!--减免 ul-->
+                        <div class="jm_a">
+                            <!--li-->
+                            <div class="jm_left">
+                                <span class="jm_1">减</span>
+                                <span>满18元减8元，满36元减17元，满46元减21元，满56元减26元，满70元减31元</span>
+                            </div>
+                            <div class="jm_right">
+                                <span>7个活动</span>
+                                <i class="iconfont icon-more-copy"></i>
+                            </div>
+                        </div>
+                        <div class="jm_a">
+                            <!--li-->
+                            <div class="jm_left">
+                                <span class="jm_1">减</span>
+                                <span>满18元减8元，满36元减17元，满46元减21元，满56元减26元，满70元减31元</span>
+                            </div>
+                            <div class="jm_right">
+                                <span>7个活动</span>
+                                <i class="iconfont icon-more-copy"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </li>
+        </ul>
+    </div>
+    <div class="footer">
+        <ul class="footer_layout">
+            <li>
+                <i class="iconfont icon-changyonglogo40"></i>
+                <p>首页</p>
+            </li>
+            <li>
+                <i class="iconfont icon-faxian"></i>
+                <p>发现</p>
+            </li>
+            <li>
+                <i class="iconfont icon-dingdan"></i>
+                <p>订单</p>
+            </li>
+            <li>
+                <i class="iconfont icon-iconfuzhi"></i>
+                <p>我的</p>
+            </li>
+        </ul>
+    </div>
+
+    <body>
+    </body>
+
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.9/饿了么/js/rem.js

@@ -0,0 +1,11 @@
+window.onload = function () {
+    getRem(750, 100)
+};
+window.onresize = function () {
+    getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}