1.项目概述

1.1.项目演示

  1. 运行 “饿了么前端网页项目” ，演示页面效果。
  2. 本项目参照 “饿了么官网网页版”制作，演示饿了么官网效果。饿了么网页版：http://h5.ele.me/
  3. 本项目中的首页，完全按照“饿了么网页版”实际效果制作，相似度达到99%。
  4. 本项目中的其它页面，专注于完成一个“点餐业务线”功能，所以其它页面效果会有适当的删减。

WEB前端-项目实战课件 - 图1

WEB前端-项目实战课件 - 图2

1.2.项目目标

  1. 本项目为课程级贯穿项目中的第二个项目（JDBC项目、前端项目、javaWeb项目）。
  2. 本项目成果物将在第三个项目中继续使用，也就是作为第三个项目的前端网页部分。
  3. 本项目完成后，学员将能够使用HTML+CSS+JS技术开发企业级静态网页。

    1.3.项目中所涉及到相关知识点

  • HTML5标签的使用
  • CSS3样式的使用
  • JS对DOM的基本操作
  • DIV+CSS布局基础
  • 移动端布局基础
  • viewport设置
  • 弹性布局
  • 边框盒子模型
  • vw与vh的使用
  • 图片按比例自适应
  • CSS3小图标的使用
  • 第三方字体库的使用

    2.部分相关知识点讲解

    2.1.移动端开发之viewport

    2.1.1.问题的提出

    移动端屏幕尺寸多变，不像PC端屏幕那样统一。这样就造成在移动端显示网页时，由于尺寸问题，会出现显示不下网页，从而出现横向滚动条现象。 为了解决这个问题，出现了viewport（屏幕视口）的概念。

    2.1.2.解决方案

    viewport有三种：
  1. layout viewport（布局视口）：网页实际尺寸，或者说，网页实际有多大，layout viewport就有多大。
  2. ideal viewport（理想视口）：移动设备理想viewport，也就是实际屏幕尺寸，根据机型的不同，尺寸也不尽相同。
  3. visualviewport（视觉视口）：用户看到的视口区域

使用viewport就可以解决上述问题： 先将网页放入layout viewport中，然后在将layout viewport等比例缩小到ideal viewport中。 这样就能保证：无论什么样的网页，都能在手机屏幕上显示，而且没有横向滚动条。
WEB前端-项目实战课件 - 图3

2.1.3.总结

移动端网页开发时，都要加上这样一段代码：

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

width就是网页实际尺寸，也就是layout viewport。 device-width就是屏幕实际尺寸，也就是ideal viewport。 所以，width=device-width就是将layout viewport按照ideal viewport实际尺寸来显示。

2.2. 弹性布局（弹性盒子）

一个元素的display属性值设置为flex，那么这个元素中的子元素，就会遵循弹性布局的规则。

  1. display:flex  /*flex是flexible box的缩写*/

此时，这个元素就可以称为是一个弹性布局容器（弹性容器），它内部的子元素，将只按照弹性布局的规则来排列和对齐，以前的float、clear、块状与内联、vertical-align属性都不能用了。

2.2.1.重要概念：主轴与侧轴

弹性布局中的一个重要概念：主轴与侧轴： 弹性盒子中默认存在两根轴，一个是水平方向的主轴，一个是垂直方向的侧轴。
WEB前端-项目实战课件 - 图4

注意点：

  1. 主轴的开始位置叫做 main start、 结束位置叫做 main end；
  2. 侧轴的开始位置叫做cross start、结束位置叫做cross end；
  3. 侧轴永远垂直于主轴；

2.2.2.flex-direction样式

flex-direction属性就是用来设置主轴方向的。

  1. flex-direction:row        /*子元素沿主轴方向排列，也就是水平方向。 row为默认值*/
  1. flex-direction:column     /*子元素沿侧轴方向排列，也就是垂直方向。*/

一个完整的例子：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             body{
  8.                 display: flex;           /*将body设置为弹性布局*/
  9.                 flex-direction: column;  /*这里设置为侧轴方向排列*/
  10.             }
  11.             .son{
  12.                 width: 100px;
  13.                 height: 100px;
  14.                 border: solid 2px #f90;
  15.                 background-color: yellow;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div class="son">1</div>
  21.         <div class="son">2</div>
  22.         <div class="son">3</div>
  23.         <div class="son">4</div>
  24.         <div class="son">5</div>
  25.     </body>
  26. </html>

总结：

  1. 在弹性容器中，子元素想要水平方向排列，那就在弹性盒子中设置：flex-direction:row
  2. 在弹性容器中，子元素想要垂直方向排列，那就在弹性盒子中设置：flex-direction:column
  3. 在弹性容器中，以前的“块状元素独占一行”，“内联元素不独占一行”，“元素水平排列时需要浮> 动”等等规则，一律不再有效。

2.2.3.flex-wrap样式

由于弹性布局中的子元素能自动伸缩，所以，当父容器此次小于子元素整体尺寸时，子元素不会自动换行，而是自动收缩。

  1. body{
  2.     display: flex;
  3. }

WEB前端-项目实战课件 - 图5
那么，如果想要让子元素自动换行，可以使用flex-wrap:wrap

  1. body{
  2.     display: flex;
  3.     flex-wrap: wrap;   /*当弹性布局容器尺寸小于所以子元素尺寸时，子元素会自动换行*/
  4. }

总结：

  1. 在弹性盒子中，默认子元素不换行，即使是容器宽度不够时，子元素也不换行，只是宽度缩小。
  2. 如果在父容器宽度不够时想要自动换行，那么设置：flex-wrap:wrap

2.2.4.justify-content样式

以主轴方向为例：子元素水平方向排列后，默认依次靠左排列。 如果想让子元素居中、居右等，那么就可以设置justify-content样式。值有五种：

  1. flex-start（默认）：左对齐。
  2. flex-end：右对齐。
  3. center：居中。
  4. space-between：两端对齐，子元素之间间距都相等。
  5. space-around：每个子元素两侧的间距相等。所以子元素之间间距比子元素到边框 间距大一倍。

例如：

  1. body{
  2.     display: flex;
  3.     justify-content: space-between;    /*两端对齐，子元素之间间距都相等。*/
  4. }

总结：在弹性盒子中，子元素主轴对齐方式使用justify-content来设置

2.2.5.align-items与align-content样式

以主轴方向为例：子元素水平方向排列后，如果想让子元素垂直居中，那么就可以设置align-items样式。常用值有三种：

  1. flex-start（默认）：上对齐。
  2. flex-end：下对齐。
  3. center：居中。
    1. html,body{
    2.  height: 100%;               /*html与body的高度默认为0，所以要设置高度*/
    3. }
    4. body{
    5.  display: flex;
    6.  flex-wrap: wrap;           /*如果允许换行，那么换行后，多行元素中的每一行也会垂直居中*/
    7.  justify-content: center;
    8.  align-items: center;       /*不论是一行，还是多行，都会垂直居中*/
    9. }

再来看align-content样式： align-content样式对单行没有效果，对多行有效果，而且是将多行整体作为一个整体附加效果的。

总结：在弹性盒子中，子元素侧轴对齐方式可以使用align-items或align-content

  1. align-items对单行和多行都有效，align-content对单行无效。
  2. 在多行中，align-items让每一行都在各自范围内垂直居中。 align-content将多行作为一个整> 体，然后居中。

2.2.6.flex样式

如果想让每个子元素所占空间不一致，那么可以使用flex给子元素分配空间。 使用flex时要注意一下两点：

  1. flex样式是设置在子元素上的。
  2. 如果设置了flex，那就说明要给子元素按比例分配空间，因此width与height就失效了。

实例1：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             html,body{
  8.                 height: 100%;
  9.             }
  10.             body{
  11.                 display: flex;
  12.             }
  13.             .son{
  14.                 width: 100px;
  15.                 height: 100px;
  16.                 border: solid 2px #f90;
  17.                 background-color: yellow;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <div class="son" style="flex:1;">1</div>
  23.         <div class="son" style="flex:1;">2</div>
  24.         <div class="son" style="flex:2;">3</div>
  25.         <div class="son" style="flex:2;">3</div>
  26.     </body>
  27. </html>

上面实例中：flex样式后跟1个值：表示子元素所占空间的比例。 三个div的宽度分别是窗口宽度的：1/4、1/2、1/4
实例2：

  1. <!-- 第一个div的宽度是400px，是不变的。第二个和第三个div将剩下宽度按比例分配：1/3、2/3 -->
  2. <body>
  3.     <div class="son" style="flex:0 0 400px;">1</div>
  4.     <div class="son" style="flex:1;">2</div>
  5.     <div class="son" style="flex:2;">3</div>
  6. </body>

WEB前端-项目实战课件 - 图6
上面实例中：flex样式后跟3个值：

  1. 第一个值：子元素尺寸自动放大值
  2. 第二个值：子元素尺寸自动缩小值
  3. 第三个值：子元素尺寸（”auto”或”%”、”px”、”em” 或任何其他长度单位的数字。）

例如：

  • 0 1 auto（默认）：父元素尺寸变化时，子元素不放大，只缩小，尺寸自动充满。
  • 1 1 auto： 父元素尺寸变化时，子元素自动放大缩小，尺寸自动充满。
  • 0 0 300px： 父元素尺寸变化时，子元素不放大缩小，尺寸固定。

    总结：可以使用flex让一行内的所有子元素自动撑满窗口宽度。而且每个子元素的宽度可以按比例> 进行分配。

2.3.视口尺寸

视口：在PC端，指浏览器的可视区域；在移动端，指Viewport 中的 Layout Viewport。 视口尺寸常用的有以下2个： vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% 实际应用中，可以使用vw，实现元素宽度和高度成比例自动缩放。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             div{
  8.                 width: 30vw;
  9.                 height: 20vw;
  10.                 background-color: blue;
  11.                 color: #fff;
  12.                 font-size: 5vw;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div>
  18.             我能够随着屏幕自适应
  19.         </div>
  20.     </body>
  21. </html>

2.4.边框盒子模型

CSS3之前的盒子模型，可以说是content-box型盒子，即宽和高为内容。 CSS3之后新增了一的盒子模型，可以说是border-box型盒子，即宽和高为边框。 那么，使用box-sizing属性可以设置盒子模型类型。

  1. div{
  2.     width: 200px;
  3.     height: 200px;
  4.     box-sizing: border-box;   /*值有两个： border-box：边框盒子； content-box：内容盒子（默认）*/
  5.     padding: 30px;
  6.     background-color: orange;
  7.     border: solid 30px blue;
  8.     margin: 50px;
  9. }

总结：使用了边框盒子，就可以任意设置内边距、边框了，而且不用担心会改变盒子的总体尺寸。

2.5. 字体图标

一般来说，在网页上使用字体图标可以有三种方式：自定义CSS图标、第三方字体图标、转义字符

2.5.1.自定义CSS图标

下面是一个自定义CSS小图标：定位图标（icon.css文件）

  1. /**
  2.  * location 定位小图标 
  3.  * 说明：使用div标签，加上icon-location类样式即可。
  4.  *       但需要放置在一个容器中，调整容器大小，图标能自适应容器大小。
  5.  * 示例：
  6.  * <div class="icon-location-box">
  7.  *     <div class="icon-location"></div>
  8.  * </div>
  9.  */
  10. .icon-location {
  11.     position: relative;
  12.     width: 100%;                         /*先画一个正方形*/
  13.     height: 100%;
  14.     border-radius: 50% 50% 50% 0;        /*然后将三个角变成圆角*/
  15.     background: #fff;
  16.     transform: rotate(-45deg);           /*最后，旋转45度*/
  17. }
  18. .icon-location:after {        
  19.     content: '';
  20.     width: 40%;
  21.     height: 40%;
  22.     margin: 30% 0 0 29%;
  23.     background-color: #0097FF;
  24.     position: absolute;
  25.     border-radius: 50%;
  26. }

使用时：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <link href="css/icon.css" rel="stylesheet">
  7.         <style>
  8.             .icon-location-box{
  9.                 width: 50px;
  10.                 height: 50px;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body bgcolor="#0000FF">
  15.         <div class="icon-location-box">
  16.             <div class="icon-location"></div>
  17.         </div>
  18.     </body>
  19. </html>

WEB前端-项目实战课件 - 图7

2.5.2.使用第三方字体图标库

第三方字体图标库有很多很多，比如常用的： Font Awesome：https://fontawesome.dashgame.com/ （直接在官网上进行讲解）

2.5.3.使用转义字符

HTML转义字符：http://114.xixik.com/character/ （直接在此网站上进行讲解）

3.项目实战

3.1.搭建项目结构

  • css文件夹： 存放css文件。
  • framework文件夹： 存放第三方库文件，以及一些共通的css文件（自定义css图标、css重置）
  • img： 存放图片
  • js： 存放js文件

CSS重置：reset.css文件中的内容：

  1. /***************** CSS重置 *******************/
  2. html,body,div,span,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. html,body{
  7.     width: 100%;
  8.     height: 100%;
  9.     font-family: "微软雅黑";
  10. }
  11. ul,ol{
  12.     list-style:none;
  13. }
  14. a{
  15.     text-decoration: none;
  16. }

3.2.首页（index.html）

3.2.1.html部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  7.         <link href="framework/reset.css" rel="stylesheet">
  8.         <link href="framework/icon.css" rel="stylesheet">
  9.         <link href="css/index.css" rel="stylesheet">
  10.         <script src="js/index.js"></script>
  11.         <title>饿了么 首页</title>
  12.     </head>
  13.     <body>
  14.         <!-- 总容器 -->
  15.         <div class="wrapper">
  16.             <!-- header部分 -->
  17.             <header>
  18.                 <div class="icon-location-box">
  19.                     <div class="icon-location"></div>
  20.                 </div>
  21.                 <div class="location-text">沈阳市规划大厦<i class="fa fa-caret-down"></i></div>
  22.             </header>
  23.             <!-- search部分 -->
  24.             <!-- 
  25.                 搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
  26.                 search-fixed-top块固定后，挡住下面块不要窜上去） 
  27.             -->
  28.             <div class="search">
  29.                 <!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
  30.                 <div class="search-fixed-top" id="fixedBox">
  31.                     <!-- 搜索框部分中间的白框 -->
  32.                     <div class="search-box">
  33.                         <i class="fa fa-search"></i>搜索饿了么商家、商品名称
  34.                     </div>
  35.                 </div>
  36.             </div>
  37.             <!-- 点餐分类部分 -->
  38.             <ul class="foodtype">
  39.                 <li onclick="location.href='businessList.html'">
  40.                     <img src="img/dcfl01.png">
  41.                     <p>美食</p>
  42.                 </li>
  43.                 <li onclick="location.href='businessList.html'">
  44.                     <img src="img/dcfl02.png">
  45.                     <p>早餐</p>
  46.                 </li>
  47.                 <li onclick="location.href='businessList.html'">
  48.                     <img src="img/dcfl03.png">
  49.                     <p>跑腿代购</p>
  50.                 </li>
  51.                 <li onclick="location.href='businessList.html'">
  52.                     <img src="img/dcfl04.png">
  53.                     <p>汉堡披萨</p>
  54.                 </li>
  55.                 <li onclick="location.href='businessList.html'">
  56.                     <img src="img/dcfl05.png">
  57.                     <p>甜品饮品</p>
  58.                 </li>
  59.                 <li onclick="location.href='businessList.html'">
  60.                     <img src="img/dcfl06.png">
  61.                     <p>速食简餐</p>
  62.                 </li>
  63.                 <li onclick="location.href='businessList.html'">
  64.                     <img src="img/dcfl07.png">
  65.                     <p>地方小吃</p>
  66.                 </li>
  67.                 <li onclick="location.href='businessList.html'">
  68.                     <img src="img/dcfl08.png">
  69.                     <p>米粉面馆</p>
  70.                 </li>
  71.                 <li onclick="location.href='businessList.html'">
  72.                     <img src="img/dcfl09.png">
  73.                     <p>包子粥铺</p>
  74.                 </li>
  75.                 <li onclick="location.href='businessList.html'">
  76.                     <img src="img/dcfl10.png">
  77.                     <p>炸鸡炸串</p>
  78.                 </li>
  79.             </ul>
  80.             <!-- 横幅广告部分 -->
  81.             <div class="banner">
  82.                 <h3>品质套餐</h3>
  83.                 <p>搭配齐全吃得好</p>
  84.                 <a>立即抢购 &gt;</a>
  85.             </div>
  86.             <!-- 超级会员部分 -->
  87.             <div class="supermember">
  88.                 <div class="left">
  89.                     <img src="img/super_member.png">
  90.                     <h3>超级会员</h3>
  91.                     <p>&#8226; 每月享超值权益</p>
  92.                 </div>
  93.                 <div class="right">
  94.                     立即开通 &gt;
  95.                 </div>
  96.             </div>
  97.             <!-- 推荐商家部分 -->
  98.             <div class="recommend">
  99.                 <div class="recommend-line"></div>
  100.                 <p>推荐商家</p>
  101.                 <div class="recommend-line"></div>
  102.             </div>
  103.             <!-- 推荐方式部分 -->
  104.             <ul class="recommendtype">
  105.                 <li>综合排序<i class="fa fa-caret-down"></i></li>
  106.                 <li>距离最近</li>
  107.                 <li>销量最高</li>
  108.                 <li>筛选<i class="fa fa-filter"></i></li>
  109.             </ul>
  110.             <!-- 推荐商家列表部分 -->
  111.             <ul class="business">
  112.                 <li>
  113.                     <img src="img/sj01.png">
  114.                     <div class="business-info">
  115.                         <div class="business-info-h">
  116.                             <h3>万家饺子（软件园E18店）</h3>
  117.                             <div class="business-info-like">&#8226;</div>
  118.                         </div>
  119.                         <div class="business-info-star">
  120.                             <div class="business-info-star-left">
  121.                                 <i class="fa fa-star"></i>
  122.                                 <i class="fa fa-star"></i>
  123.                                 <i class="fa fa-star"></i>
  124.                                 <i class="fa fa-star"></i>
  125.                                 <i class="fa fa-star"></i>
  126.                                 <p>4.9 月售345单</p>
  127.                             </div>
  128.                             <div class="business-info-star-right">
  129.                                 蜂鸟专送
  130.                             </div>
  131.                         </div>
  132.                         <div class="business-info-delivery">
  133.                             <p>&#165;15起送 | &#165;3配送</p>
  134.                             <p>3.22km | 30分钟</p>
  135.                         </div>
  136.                         <div class="business-info-explain">
  137.                             <div>各种饺子</div>
  138.                         </div>
  139.                         <div class="business-info-promotion">
  140.                             <div class="business-info-promotion-left">
  141.                                 <div class="business-info-promotion-left-incon">新</div>
  142.                                 <p>饿了么新用户首单立减9元</p>
  143.                             </div>
  144.                             <div class="business-info-promotion-right">
  145.                                 <p>2个活动</p>
  146.                                 <i class="fa fa-caret-down"></i>
  147.                             </div>
  148.                         </div>
  149.                         <div class="business-info-promotion">
  150.                             <div class="business-info-promotion-left">
  151.                                 <div class="business-info-promotion-left-incon" style="background-color: #F1884F;">特</div>
  152.                                 <p>特价商品5元起</p>
  153.                             </div>
  154.                         </div>
  155.                     </div>
  156.                 </li>
  157.                 <li>
  158.                     <img src="img/sj02.png">
  159.                     <div class="business-info">
  160.                         <div class="business-info-h">
  161.                             <h3>小锅饭豆腐馆（全运店）</h3>
  162.                             <div class="business-info-like">&#8226;</div>
  163.                         </div>
  164.                         <div class="business-info-star">
  165.                             <div class="business-info-star-left">
  166.                                 <i class="fa fa-star"></i>
  167.                                 <i class="fa fa-star"></i>
  168.                                 <i class="fa fa-star"></i>
  169.                                 <i class="fa fa-star"></i>
  170.                                 <i class="fa fa-star"></i>
  171.                                 <p>4.9 月售345单</p>
  172.                             </div>
  173.                             <div class="business-info-star-right">
  174.                                 蜂鸟专送
  175.                             </div>
  176.                         </div>
  177.                         <div class="business-info-delivery">
  178.                             <p>&#165;15起送 | &#165;3配送</p>
  179.                             <p>3.22km | 30分钟</p>
  180.                         </div>
  181.                         <div class="business-info-explain">
  182.                             <div>各种饺子</div>
  183.                         </div>
  184.                         <div class="business-info-promotion">
  185.                             <div class="business-info-promotion-left">
  186.                                 <div class="business-info-promotion-left-incon">新</div>
  187.                                 <p>饿了么新用户首单立减9元</p>
  188.                             </div>
  189.                             <div class="business-info-promotion-right">
  190.                                 <p>2个活动</p>
  191.                                 <i class="fa fa-caret-down"></i>
  192.                             </div>
  193.                         </div>
  194.                         <div class="business-info-promotion">
  195.                             <div class="business-info-promotion-left">
  196.                                 <div class="business-info-promotion-left-incon">特</div>
  197.                                 <p>特价商品5元起</p>
  198.                             </div>
  199.                         </div>
  200.                     </div>
  201.                 </li>
  202.                 <li>
  203.                     <img src="img/sj03.png">
  204.                     <div class="business-info">
  205.                         <div class="business-info-h">
  206.                             <h3>麦当劳麦乐送（全运路店）</h3>
  207.                             <div class="business-info-like">&#8226;</div>
  208.                         </div>
  209.                         <div class="business-info-star">
  210.                             <div class="business-info-star-left">
  211.                                 <i class="fa fa-star"></i>
  212.                                 <i class="fa fa-star"></i>
  213.                                 <i class="fa fa-star"></i>
  214.                                 <i class="fa fa-star"></i>
  215.                                 <i class="fa fa-star"></i>
  216.                                 <p>4.9 月售345单</p>
  217.                             </div>
  218.                             <div class="business-info-star-right">
  219.                                 蜂鸟专送
  220.                             </div>
  221.                         </div>
  222.                         <div class="business-info-delivery">
  223.                             <p>&#165;15起送 | &#165;3配送</p>
  224.                             <p>3.22km | 30分钟</p>
  225.                         </div>
  226.                         <div class="business-info-explain">
  227.                             <div>各种饺子</div>
  228.                         </div>
  229.                         <div class="business-info-promotion">
  230.                             <div class="business-info-promotion-left">
  231.                                 <div class="business-info-promotion-left-incon">新</div>
  232.                                 <p>饿了么新用户首单立减9元</p>
  233.                             </div>
  234.                             <div class="business-info-promotion-right">
  235.                                 <p>2个活动</p>
  236.                                 <i class="fa fa-caret-down"></i>
  237.                             </div>
  238.                         </div>
  239.                         <div class="business-info-promotion">
  240.                             <div class="business-info-promotion-left">
  241.                                 <div class="business-info-promotion-left-incon">特</div>
  242.                                 <p>特价商品5元起</p>
  243.                             </div>
  244.                         </div>
  245.                     </div>
  246.                 </li>
  247.                 <li>
  248.                     <img src="img/sj04.png">
  249.                     <div class="business-info">
  250.                         <div class="business-info-h">
  251.                             <h3>米村拌饭（浑南店）</h3>
  252.                             <div class="business-info-like">&#8226;</div>
  253.                         </div>
  254.                         <div class="business-info-star">
  255.                             <div class="business-info-star-left">
  256.                                 <i class="fa fa-star"></i>
  257.                                 <i class="fa fa-star"></i>
  258.                                 <i class="fa fa-star"></i>
  259.                                 <i class="fa fa-star"></i>
  260.                                 <i class="fa fa-star"></i>
  261.                                 <p>4.9 月售345单</p>
  262.                             </div>
  263.                             <div class="business-info-star-right">
  264.                                 蜂鸟专送
  265.                             </div>
  266.                         </div>
  267.                         <div class="business-info-delivery">
  268.                             <p>&#165;15起送 | &#165;3配送</p>
  269.                             <p>3.22km | 30分钟</p>
  270.                         </div>
  271.                         <div class="business-info-explain">
  272.                             <div>各种饺子</div>
  273.                         </div>
  274.                         <div class="business-info-promotion">
  275.                             <div class="business-info-promotion-left">
  276.                                 <div class="business-info-promotion-left-incon">新</div>
  277.                                 <p>饿了么新用户首单立减9元</p>
  278.                             </div>
  279.                             <div class="business-info-promotion-right">
  280.                                 <p>2个活动</p>
  281.                                 <i class="fa fa-caret-down"></i>
  282.                             </div>
  283.                         </div>
  284.                         <div class="business-info-promotion">
  285.                             <div class="business-info-promotion-left">
  286.                                 <div class="business-info-promotion-left-incon">特</div>
  287.                                 <p>特价商品5元起</p>
  288.                             </div>
  289.                         </div>
  290.                     </div>
  291.                 </li>
  292.                 <li>
  293.                     <img src="img/sj05.png">
  294.                     <div class="business-info">
  295.                         <div class="business-info-h">
  296.                             <h3>申记串道（中海康城店）</h3>
  297.                             <div class="business-info-like">&#8226;</div>
  298.                         </div>
  299.                         <div class="business-info-star">
  300.                             <div class="business-info-star-left">
  301.                                 <i class="fa fa-star"></i>
  302.                                 <i class="fa fa-star"></i>
  303.                                 <i class="fa fa-star"></i>
  304.                                 <i class="fa fa-star"></i>
  305.                                 <i class="fa fa-star"></i>
  306.                                 <p>4.9 月售345单</p>
  307.                             </div>
  308.                             <div class="business-info-star-right">
  309.                                 蜂鸟专送
  310.                             </div>
  311.                         </div>
  312.                         <div class="business-info-delivery">
  313.                             <p>&#165;15起送 | &#165;3配送</p>
  314.                             <p>3.22km | 30分钟</p>
  315.                         </div>
  316.                         <div class="business-info-explain">
  317.                             <div>各种饺子</div>
  318.                         </div>
  319.                         <div class="business-info-promotion">
  320.                             <div class="business-info-promotion-left">
  321.                                 <div class="business-info-promotion-left-incon">新</div>
  322.                                 <p>饿了么新用户首单立减9元</p>
  323.                             </div>
  324.                             <div class="business-info-promotion-right">
  325.                                 <p>2个活动</p>
  326.                                 <i class="fa fa-caret-down"></i>
  327.                             </div>
  328.                         </div>
  329.                         <div class="business-info-promotion">
  330.                             <div class="business-info-promotion-left">
  331.                                 <div class="business-info-promotion-left-incon">特</div>
  332.                                 <p>特价商品5元起</p>
  333.                             </div>
  334.                         </div>
  335.                     </div>
  336.                 </li>
  337.             </ul>
  338.             <!-- 底部菜单部分 -->
  339.             <ul class="footer">
  340.                 <li onclick="location.href='index.html'">
  341.                     <i class="fa fa-home"></i>
  342.                     <p>首页</p>
  343.                 </li>
  344.                 <li>
  345.                     <i class="fa fa-compass"></i>
  346.                     <p>发现</p>
  347.                 </li>
  348.                 <li onclick="location.href='orderList.html'">
  349.                     <i class="fa fa-file-text-o"></i>
  350.                     <p>订单</p>
  351.                 </li>
  352.                 <li>
  353.                     <i class="fa fa-user-o"></i>
  354.                     <p>我的</p>
  355.                 </li>
  356.             </ul>
  357.         </div>
  358.     </body>
  359. </html>

3.2.2.css部分

  1. /****************** 总容器 ******************/
  2. .wrapper{
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. /****************** header ******************/
  7. .wrapper header{
  8.     width: 100%;
  9.     height: 12vw;
  10.     background-color: #0097FF;
  11.     display: flex;
  12.     align-items: center;
  13. }
  14. .wrapper header .icon-location-box{
  15.     width: 3.5vw;
  16.     height: 3.5vw;
  17.     margin: 0 1vw 0 3vw;
  18. }
  19. .wrapper header .location-text{
  20.     font-size: 4.5vw;
  21.     font-weight: 700;
  22.     color: #fff;
  23. }
  24. .wrapper header .location-text .fa-caret-down{
  25.     margin-left: 1vw;
  26. }
  27. /****************** search ******************/
  28. .wrapper .search{
  29.     width: 100%;
  30.     height: 13vw;
  31. }
  32. .wrapper .search .search-fixed-top{
  33.     width: 100%;
  34.     height: 13vw;
  35.     background-color: #0097FF;
  36.     display: flex;
  37.     justify-content: center;
  38.     align-items: center;
  39. }
  40. .wrapper .search .search-fixed-top .search-box{
  41.     width: 90%;
  42.     height: 9vw;
  43.     background-color: #fff;
  44.     border-radius: 2px;
  45.     display: flex;
  46.     justify-content: center;
  47.     align-items: center;
  48.     font-size: 3.5vw;
  49.     color: #AEAEAE;
  50.     font-family: "宋体";
  51.     /*此样式是让文本选中状态无效*/
  52.     user-select: none;
  53. }
  54. .wrapper .search .search-fixed-top .search-box .fa-search{
  55.     margin-right: 1vw;
  56. }
  57. /****************** 点餐分类部分 ******************/
  58. .wrapper .foodtype{
  59.     width: 100%;
  60.     height: 48vw;
  61.     display: flex;
  62.     flex-wrap: wrap;
  63.     justify-content: space-around;
  64.     /*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
  65.     align-content: center;
  66. }
  67. .wrapper .foodtype li{
  68.     /*一共10个子元素，通过计算，子元素宽度在16.7 ~ 20 之间，才能保证换两行*/
  69.     width: 18vw;
  70.     height: 20vw;
  71.     display: flex;
  72.     /*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
  73.     flex-direction: column;
  74.     justify-content: center;
  75.     align-items: center;
  76.     user-select: none;
  77.     cursor: pointer;
  78. }
  79. .wrapper .foodtype li img{
  80.     width: 12vw;
  81.     /*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
  82.     height: 10.3vw;
  83. }
  84. .wrapper .foodtype li p{
  85.     font-size: 3.2vw;
  86.     color: #666;
  87. }
  88. /****************** 横幅广告部分 ******************/
  89. .wrapper .banner{
  90.     /**
  91.      * 设置容器宽度95%，然后水平居中，这样两边留白; 
  92.      * 这里不能用padding，因为背景图片也会覆盖padding
  93.      */
  94.     width: 95%;
  95.     margin: 0 auto;
  96.     height: 29vw;
  97.     /*此三个样式组合，可以保证背景图片充满整个容器*/
  98.     background-image: url(../img/index_banner.png);
  99.     background-repeat: no-repeat;
  100.     background-size: cover;
  101.     box-sizing: border-box;
  102.     padding: 2vw 6vw;
  103. }
  104. .wrapper .banner h3{
  105.     font-size: 4.2vw;
  106.     margin-bottom: 1.2vw;
  107. }
  108. .wrapper .banner p{
  109.     font-size: 3.4vw;
  110.     color: #666;
  111.     margin-bottom: 2.4vw;
  112. }
  113. .wrapper .banner a{
  114.     font-size: 3vw;
  115.     color: #C79060;
  116.     font-weight: 700;
  117. }
  118. /****************** 超级会员部分 ******************/
  119. .wrapper .supermember{
  120.     /*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
  121.     width: 95%;
  122.     margin: 0 auto;
  123.     height: 11.5vw;
  124.     background-color: #FEEDC1;
  125.     margin-top: 1.3vw;
  126.     border-radius: 2px;
  127.     color: #644F1B;
  128.     display: flex;
  129.     justify-content: space-between;
  130.     align-items: center;
  131. }
  132. .wrapper .supermember .left{
  133.     display: flex;
  134.     align-items: center;
  135.     margin-left: 4vw;
  136.     user-select: none;
  137. }
  138. .wrapper .supermember .left img{
  139.     width: 6vw;
  140.     height: 6vw;
  141.     margin-right: 2vw;
  142. }
  143. .wrapper .supermember .left h3{
  144.     font-size: 4vw;
  145.     margin-right: 2vw;
  146. }
  147. .wrapper .supermember .left p{
  148.     font-size: 3vw;
  149. }
  150. .wrapper .supermember .right{
  151.     font-size: 3vw;
  152.     margin-right: 4vw;
  153.     cursor: pointer;
  154. }
  155. /****************** 推荐商家部分 ******************/
  156. .wrapper .recommend{
  157.     width: 100%;
  158.     height: 14vw;
  159.     display: flex;
  160.     justify-content: center;
  161.     align-items: center;
  162. }
  163. .wrapper .recommend .recommend-line{
  164.     width: 6vw;
  165.     height: 0.2vw;
  166.     background-color: #888;
  167. }
  168. .wrapper .recommend p{
  169.     font-size: 4vw;
  170.     margin: 0 4vw;
  171. }
  172. /****************** 推荐方式部分 ******************/
  173. .wrapper .recommendtype{
  174.     width: 100%;
  175.     height: 5vw;
  176.     margin-bottom: 5vw;
  177.     display: flex;
  178.     justify-content: space-around;
  179.     align-items: center;
  180. }
  181. .wrapper .recommendtype li{
  182.     font-size: 3.5vw;
  183.     color: #555;
  184. }
  185. /****************** 推荐商家列表部分 ******************/
  186. .wrapper .business{
  187.     width: 100%;
  188.     margin-bottom: 14vw;
  189. }
  190. .wrapper .business li{
  191.     width: 100%;
  192.     box-sizing: border-box;
  193.     padding: 2.5vw;
  194.     user-select: none;
  195.     border-bottom: solid 1px #DDD;
  196.     display: flex;
  197. }
  198. .wrapper .business li img{
  199.     width: 18vw;
  200.     height: 18vw;
  201. }
  202. .wrapper .business li .business-info{
  203.     width: 100%;
  204.     box-sizing: border-box;
  205.     padding-left: 3vw;
  206. }
  207. .wrapper .business li .business-info .business-info-h{
  208.     display: flex;
  209.     justify-content: space-between;
  210.     align-items: center;
  211.     margin-bottom: 2vw;
  212. }
  213. .wrapper .business li .business-info .business-info-h h3{
  214.     font-size: 4vw;
  215.     color: #333;
  216. }
  217. .wrapper .business li .business-info .business-info-h .business-info-like{
  218.     width: 1.6vw;
  219.     height: 3.4vw;
  220.     background-color: #666;
  221.     color: #fff;
  222.     font-size: 4vw;
  223.     margin-right: 4vw;
  224.     display: flex;
  225.     justify-content: center;
  226.     align-items: center;
  227. }
  228. .wrapper .business li .business-info .business-info-star{
  229.     display: flex;
  230.     justify-content: space-between;
  231.     align-items: center;
  232.     margin-bottom: 2vw;
  233.     font-size: 3.1vw;
  234. }
  235. .wrapper .business li .business-info .business-info-star .business-info-star-left{
  236.     display: flex;
  237.     align-items: center;
  238. }
  239. .wrapper .business li .business-info .business-info-star .business-info-star-left .fa-star{
  240.     color: #FEC80E;
  241.     margin-right: 0.5vw;
  242. }
  243. .wrapper .business li .business-info .business-info-star .business-info-star-left p{
  244.     color: #666;
  245.     margin-left: 1vw;
  246. }
  247. .wrapper .business li .business-info .business-info-star .business-info-star-right{
  248.     background-color: #0097FF;
  249.     color: #fff;
  250.     font-size: 2.4vw;
  251.     border-radius: 2px;
  252.     padding: 0 0.6vw;
  253. }
  254. .wrapper .business li .business-info .business-info-delivery{
  255.     display: flex;
  256.     justify-content: space-between;
  257.     align-items: center;
  258.     margin-bottom: 2vw;
  259.     color: #666;
  260.     font-size: 3.1vw;
  261. }
  262. .wrapper .business li .business-info .business-info-explain{
  263.     display: flex;
  264.     align-items: center;
  265.     margin-bottom: 3vw;
  266. }
  267. .wrapper .business li .business-info .business-info-explain div{
  268.     border: solid 1px #DDD;
  269.     font-size: 2.8vw;
  270.     color: #666;
  271.     border-radius: 3px;
  272.     padding: 0 0.1vw ;
  273. }
  274. .wrapper .business li .business-info .business-info-promotion{
  275.     display: flex;
  276.     justify-content: space-between;
  277.     align-items: center;
  278.     margin-bottom: 1.8vw;
  279. }
  280. .wrapper .business li .business-info .business-info-promotion .business-info-promotion-left{
  281.     display: flex;
  282.     align-items: center;
  283. }
  284. .wrapper .business li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-incon{
  285.     width: 4vw;
  286.     height: 4vw;
  287.     background-color: #70BC46;
  288.     border-radius: 3px;
  289.     font-size: 3vw;
  290.     color: #fff;
  291.     display: flex;
  292.     justify-content: center;
  293.     align-items: center;
  294. }
  295. .wrapper .business li .business-info .business-info-promotion .business-info-promotion-left p{
  296.     color: #666;
  297.     font-size: 3vw;
  298.     margin-left: 2vw;
  299. }
  300. .wrapper .business li .business-info .business-info-promotion .business-info-promotion-right{
  301.     display: flex;
  302.     align-items: center;
  303.     font-size: 2.5vw;
  304.     color: #999;
  305. }
  306. .wrapper .business li .business-info .business-info-promotion .business-info-promotion-right p{
  307.     margin-right: 2vw;
  308. }
  309. /****************** 底部菜单部分 ******************/
  310. .wrapper .footer{
  311.     width: 100%;
  312.     height: 14vw;
  313.     border-top: solid 1px #DDD;
  314.     background-color: #fff;
  315.     position: fixed;
  316.     left: 0;
  317.     bottom: 0;
  318.     display: flex;
  319.     justify-content: space-around;
  320.     align-items: center;
  321. }
  322. .wrapper .footer li{
  323.     /*li本身的尺寸完全由内容撑起*/
  324.     display: flex;
  325.     flex-direction: column;
  326.     justify-content: center;
  327.     align-items: center;
  328.     color: #999;
  329.     user-select: none;
  330.     cursor: pointer;
  331. }
  332. .wrapper .footer li p{
  333.     font-size: 2.8vw;
  334. }
  335. .wrapper .footer li i{
  336.     font-size: 5vw;
  337. }

3.3.商家列表页面（businessList.html）

3.3.1.html部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  7.         <link href="framework/reset.css" rel="stylesheet">
  8.         <link href="css/businessList.css" rel="stylesheet">
  9.         <title>饿了么 商家列表</title>
  10.     </head>
  11.     <body>
  12.         <div class="wrapper">
  13.             <!-- header部分 -->
  14.             <header>
  15.                 <p>商家列表</p>
  16.             </header>
  17.             <!-- 商家列表部分 -->
  18.             <ul class="business">
  19.                 <li onclick="location.href='businessInfo.html'">
  20.                     <div class="business-img">
  21.                         <img src="img/sj01.png">
  22.                         <div class="business-img-quantity">3</div>
  23.                     </div>
  24.                     <div class="business-info">
  25.                         <h3>万家饺子（软件园E18店）</h3>
  26.                         <p>&#165;15起送 | &#165;3配送</p>
  27.                         <p>各种饺子炒菜</p>
  28.                     </div>
  29.                 </li>
  30.                 <li onclick="location.href='businessInfo.html'">
  31.                     <div class="business-img">
  32.                         <img src="img/sj02.png">
  33.                         <div class="business-img-quantity">2</div>
  34.                     </div>
  35.                     <div class="business-info">
  36.                         <h3>小锅饭豆腐馆（全运店）</h3>
  37.                         <p>&#165;15起送 | &#165;3配送</p>
  38.                         <p>特色美食</p>
  39.                     </div>
  40.                 </li>
  41.                 <li onclick="location.href='businessInfo.html'">
  42.                     <div class="business-img">
  43.                         <img src="img/sj03.png">
  44.                         <div class="business-img-quantity">1</div>
  45.                     </div>
  46.                     <div class="business-info">
  47.                         <h3>麦当劳麦乐送（全运路店）</h3>
  48.                         <p>&#165;15起送 | &#165;3配送</p>
  49.                         <p>汉堡薯条</p>
  50.                     </div>
  51.                 </li>
  52.                 <li onclick="location.href='businessInfo.html'">
  53.                     <div class="business-img">
  54.                         <img src="img/sj04.png">
  55.                     </div>
  56.                     <div class="business-info">
  57.                         <h3>米村拌饭（浑南店）</h3>
  58.                         <p>&#165;15起送 | &#165;3配送</p>
  59.                         <p>各种炒菜拌饭</p>
  60.                     </div>
  61.                 </li>
  62.                 <li onclick="location.href='businessInfo.html'">
  63.                     <div class="business-img">
  64.                         <img src="img/sj05.png">
  65.                     </div>
  66.                     <div class="business-info">
  67.                         <h3>申记串道（中海康城店）</h3>
  68.                         <p>&#165;15起送 | &#165;3配送</p>
  69.                         <p>烤串炸串</p>
  70.                     </div>
  71.                 </li>
  72.                 <li onclick="location.href='businessInfo.html'">
  73.                     <div class="business-img">
  74.                         <img src="img/sj06.png">
  75.                     </div>
  76.                     <div class="business-info">
  77.                         <h3>半亩良田排骨米饭</h3>
  78.                         <p>&#165;15起送 | &#165;3配送</p>
  79.                         <p>排骨米饭套餐</p>
  80.                     </div>
  81.                 </li>
  82.                 <li onclick="location.href='businessInfo.html'">
  83.                     <div class="business-img">
  84.                         <img src="img/sj07.png">
  85.                     </div>
  86.                     <div class="business-info">
  87.                         <h3>茶兮鲜果饮品（国际软件园店）</h3>
  88.                         <p>&#165;15起送 | &#165;3配送</p>
  89.                         <p>甜品饮品</p>
  90.                     </div>
  91.                 </li>
  92.                 <li onclick="location.href='businessInfo.html'">
  93.                     <div class="business-img">
  94.                         <img src="img/sj08.png">
  95.                     </div>
  96.                     <div class="business-info">
  97.                         <h3>唯一水果捞（软件园E18店）</h3>
  98.                         <p>&#165;15起送 | &#165;3配送</p>
  99.                         <p>新鲜水果</p>
  100.                     </div>
  101.                 </li>
  102.                 <li onclick="location.href='businessInfo.html'">
  103.                     <div class="business-img">
  104.                         <img src="img/sj09.png">
  105.                     </div>
  106.                     <div class="business-info">
  107.                         <h3>满园春饼（全运路店）</h3>
  108.                         <p>&#165;15起送 | &#165;3配送</p>
  109.                         <p>各种春饼</p>
  110.                     </div>
  111.                 </li>
  112.             </ul>
  113.             <!-- 底部菜单部分 -->
  114.             <ul class="footer">
  115.                 <li onclick="location.href='index.html'">
  116.                     <i class="fa fa-home"></i>
  117.                     <p>首页</p>
  118.                 </li>
  119.                 <li>
  120.                     <i class="fa fa-compass"></i>
  121.                     <p>发现</p>
  122.                 </li>
  123.                 <li onclick="location.href='orderList.html'">
  124.                     <i class="fa fa-file-text-o"></i>
  125.                     <p>订单</p>
  126.                 </li>
  127.                 <li>
  128.                     <i class="fa fa-user-o"></i>
  129.                     <p>我的</p>
  130.                 </li>
  131.             </ul>
  132.         </div>
  133.     </body>
  134. </html>

3.3.2.css部分

  1. /****************** 总容器 ******************/
  2. .wrapper{
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. /****************** header部分 ******************/
  7. .wrapper header{
  8.     width: 100%;
  9.     height: 12vw;
  10.     background-color: #0097FF;
  11.     color: #fff;
  12.     font-size: 4.8vw;
  13.     position: fixed;
  14.     left: 0;
  15.     top: 0;
  16.     z-index: 1000;
  17.     display: flex;
  18.     justify-content: center;
  19.     align-items: center;
  20. }
  21. /****************** 商家列表部分 ******************/
  22. .wrapper .business{
  23.     width: 100%;
  24.     margin-top: 12vw;
  25.     margin-bottom: 14vw;
  26. }
  27. .wrapper .business li{
  28.     width: 100%;
  29.     box-sizing: border-box;
  30.     padding: 2.5vw;
  31.     border-bottom: solid 1px #DDD;
  32.     user-select: none;
  33.     cursor: pointer;
  34.     display: flex;
  35.     align-items: center;
  36. }
  37. .wrapper .business li .business-img{
  38.     /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
  39.     position: relative;
  40. }
  41. .wrapper .business li .business-img img{
  42.     width: 20vw;
  43.     height: 20vw;
  44. }
  45. .wrapper .business li .business-img .business-img-quantity{
  46.     width: 5vw;
  47.     height: 5vw;
  48.     background-color: red;
  49.     color: #fff;
  50.     font-size: 3.6vw;
  51.     border-radius: 2.5vw;
  52.     display: flex;
  53.     justify-content: center;
  54.     align-items: center;
  55.     /*设置成绝对定位，不占文档流空间*/
  56.     position: absolute;
  57.     right: -1.5vw;
  58.     top: -1.5vw;
  59. }
  60. .wrapper .business li .business-info{
  61.     margin-left: 3vw;
  62. }
  63. .wrapper .business li .business-info h3{
  64.     font-size: 3.8vw;
  65.     color: #555;
  66. }
  67. .wrapper .business li .business-info p{
  68.     font-size: 3vw;
  69.     color: #888;
  70.     margin-top: 2vw;
  71. }
  72. /****************** 底部菜单部分 ******************/
  73. .wrapper .footer{
  74.     width: 100%;
  75.     height: 14vw;
  76.     border-top: solid 1px #DDD;
  77.     background-color: #fff;
  78.     position: fixed;
  79.     left: 0;
  80.     bottom: 0;
  81.     display: flex;
  82.     justify-content: space-around;
  83.     align-items: center;
  84. }
  85. .wrapper .footer li{
  86.     display: flex;
  87.     flex-direction: column;
  88.     justify-content: center;
  89.     align-items: center;
  90.     color: #999;
  91.     user-select: none;
  92.     cursor: pointer;
  93. }
  94. .wrapper .footer li p{
  95.     font-size: 2.8vw;
  96. }
  97. .wrapper .footer li i{
  98.     font-size: 5vw;
  99. }

3.4.商家信息页面（businessInfo.html）

3.4.1.html部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  7.         <link href="framework/reset.css" rel="stylesheet">
  8.         <link href="css/businessInfo.css" rel="stylesheet">
  9.         <title>饿了么 商家信息</title>
  10.     </head>
  11.     <body>
  12.         <div class="wrapper">
  13.             <!-- header部分 -->
  14.             <header>
  15.                 <p>商家信息</p>
  16.             </header>
  17.             <!-- 商家logo部分 -->
  18.             <div class="business-logo">
  19.                 <img src="img/sj01.png">
  20.             </div>
  21.             <!-- 商家信息部分 -->
  22.             <div class="business-info">
  23.                 <h1>万家饺子（软件园E18店）</h1>
  24.                 <p>&#165;15起送 &#165;3配送</p>
  25.                 <p>各种饺子炒菜</p>
  26.             </div>
  27.             <!-- 食品列表部分 -->
  28.             <ul class="food">
  29.                 <li>
  30.                     <div class="food-left">
  31.                         <img src="img/sp01.png">
  32.                         <div class="food-left-info">
  33.                             <h3>纯肉鲜肉（水饺）</h3>
  34.                             <p>新鲜猪肉</p>
  35.                             <p>&#165;15</p>
  36.                         </div>
  37.                     </div>
  38.                     <div class="food-right">
  39.                         <div>
  40.                             <i class="fa fa-minus-circle"></i>
  41.                         </div>
  42.                         <p><span>3</span></p>
  43.                         <div>
  44.                             <i class="fa fa-plus-circle"></i>
  45.                         </div>
  46.                     </div>
  47.                 </li>
  48.                 <li>
  49.                     <div class="food-left">
  50.                         <img src="img/sp02.png">
  51.                         <div class="food-left-info">
  52.                             <h3>玉米鲜肉（水饺）</h3>
  53.                             <p>玉米鲜肉</p>
  54.                             <p>&#165;16</p>
  55.                         </div>
  56.                     </div>
  57.                     <div class="food-right">
  58.                         <div>
  59.                             <i class="fa fa-minus-circle"></i>
  60.                         </div>
  61.                         <p><span>2</span></p>
  62.                         <div>
  63.                             <i class="fa fa-plus-circle"></i>
  64.                         </div>
  65.                     </div>
  66.                 </li>
  67.                 <li>
  68.                     <div class="food-left">
  69.                         <img src="img/sp03.png">
  70.                         <div class="food-left-info">
  71.                             <h3>虾仁三鲜（蒸饺）</h3>
  72.                             <p>虾仁三鲜</p>
  73.                             <p>&#165;22</p>
  74.                         </div>
  75.                     </div>
  76.                     <div class="food-right">
  77.                         <div>
  78.                         </div>
  79.                         <p></p>
  80.                         <div>
  81.                             <i class="fa fa-plus-circle"></i>
  82.                         </div>
  83.                     </div>
  84.                 </li>
  85.                 <li>
  86.                     <div class="food-left">
  87.                         <img src="img/sp04.png">
  88.                         <div class="food-left-info">
  89.                             <h3>素三鲜（蒸饺）</h3>
  90.                             <p>素三鲜</p>
  91.                             <p>&#165;15</p>
  92.                         </div>
  93.                     </div>
  94.                     <div class="food-right">
  95.                         <div>
  96.                         </div>
  97.                         <p></p>
  98.                         <div>
  99.                             <i class="fa fa-plus-circle"></i>
  100.                         </div>
  101.                     </div>
  102.                 </li>
  103.                 <li>
  104.                     <div class="food-left">
  105.                         <img src="img/sp05.png">
  106.                         <div class="food-left-info">
  107.                             <h3>角瓜鸡蛋（蒸饺）</h3>
  108.                             <p>角瓜鸡蛋</p>
  109.                             <p>&#165;16</p>
  110.                         </div>
  111.                     </div>
  112.                     <div class="food-right">
  113.                         <div>
  114.                         </div>
  115.                         <p></p>
  116.                         <div>
  117.                             <i class="fa fa-plus-circle"></i>
  118.                         </div>
  119.                     </div>
  120.                 </li>
  121.                 <li>
  122.                     <div class="food-left">
  123.                         <img src="img/sp06.png">
  124.                         <div class="food-left-info">
  125.                             <h3>小白菜肉（水饺）</h3>
  126.                             <p>小白菜肉</p>
  127.                             <p>&#165;18</p>
  128.                         </div>
  129.                     </div>
  130.                     <div class="food-right">
  131.                         <div>
  132.                         </div>
  133.                         <p></p>
  134.                         <div>
  135.                             <i class="fa fa-plus-circle"></i>
  136.                         </div>
  137.                     </div>
  138.                 </li>
  139.                 <li>
  140.                     <div class="food-left">
  141.                         <img src="img/sp07.png">
  142.                         <div class="food-left-info">
  143.                             <h3>芹菜牛肉（水饺）</h3>
  144.                             <p>芹菜牛肉</p>
  145.                             <p>&#165;18</p>
  146.                         </div>
  147.                     </div>
  148.                     <div class="food-right">
  149.                         <div>
  150.                         </div>
  151.                         <p></p>
  152.                         <div>
  153.                             <i class="fa fa-plus-circle"></i>
  154.                         </div>
  155.                     </div>
  156.                 </li>
  157.             </ul>
  158.             <!-- 购物车部分 -->
  159.             <div class="cart">
  160.                 <div class="cart-left">
  161.                     <div class="cart-left-icon">
  162.                         <i class="fa fa-shopping-cart"></i>
  163.                         <div class="cart-left-icon-quantity">3</div>
  164.                     </div>
  165.                     <div class="cart-left-info">
  166.                         <p>&#165;12.88</p>
  167.                         <p>另需配送费3元</p>
  168.                     </div>
  169.                 </div>
  170.                 <div class="cart-right">
  171.                     <!-- 不够起送费 -->
  172.                     <!--
  173.                     <div class="cart-right-item">
  174.                         &#165;15起送
  175.                     </div>
  176.                     -->
  177.                     <!-- 达到起送费 -->
  178.                     <div class="cart-right-item" onclick="location.href='order.html'">
  179.                         去结算
  180.                     </div>
  181.                 </div>
  182.             </div>
  183.         </div>    
  184.     </body>
  185. </html>

3.4.2.css部分

  1. /****************** 总容器 ******************/
  2. .wrapper{
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. /****************** header部分 ******************/
  7. .wrapper header{
  8.     width: 100%;
  9.     height: 12vw;
  10.     background-color: #0097FF;
  11.     color: #fff;
  12.     font-size: 4.8vw;
  13.     position: fixed;
  14.     left: 0;
  15.     top: 0;
  16.     z-index: 1000;
  17.     display: flex;
  18.     justify-content: center;
  19.     align-items: center;
  20. }
  21. /****************** 商家logo部分 ******************/
  22. .wrapper .business-logo{
  23.     width: 100%;
  24.     height: 35vw;
  25.     /*使用上外边距避开header部分*/
  26.     margin-top: 12vw;
  27.     display: flex;
  28.     justify-content: center;
  29.     align-items: center;
  30. }
  31. .wrapper .business-logo img{
  32.     width: 40vw;
  33.     height: 30vw;
  34.     border-radius: 5px;
  35. }
  36. /****************** 商家信息部分 ******************/
  37. .wrapper .business-info{
  38.     width: 100%;
  39.     height: 20vw;
  40.     display: flex;
  41.     flex-direction: column;
  42.     justify-content: center;
  43.     align-items: center;
  44. }
  45. .wrapper .business-info h1{
  46.     font-size: 5vw;
  47. }
  48. .wrapper .business-info p{
  49.     font-size: 3vw;
  50.     color: #666;
  51.     margin-top: 1vw;
  52. }
  53. /****************** 食品列表部分 ******************/
  54. .wrapper .food{
  55.     width: 100%;
  56.     /*使用下外边距避开footer部分*/
  57.     margin-bottom: 14vw;
  58. }
  59. .wrapper .food li{
  60.     width: 100%;
  61.     box-sizing: border-box;
  62.     padding: 2.5vw;
  63.     user-select: none;
  64.     display: flex;
  65.     justify-content: space-between;
  66.     align-items: center;
  67. }
  68. .wrapper .food li .food-left{
  69.     display: flex;
  70.     align-items: center;
  71. }
  72. .wrapper .food li .food-left img{
  73.     width: 20vw;
  74.     height: 20vw;
  75. }
  76. .wrapper .food li .food-left .food-left-info{
  77.     margin-left: 3vw;
  78. }
  79. .wrapper .food li .food-left .food-left-info h3{
  80.     font-size: 3.8vw;
  81.     color: #555;
  82. }
  83. .wrapper .food li .food-left .food-left-info p{
  84.     font-size: 3vw;
  85.     color: #888;
  86.     margin-top: 2vw;
  87. }
  88. .wrapper .food li .food-right{
  89.     width: 16vw;
  90.     display: flex;
  91.     justify-content: space-between;
  92.     align-items: center;
  93. }
  94. .wrapper .food li .food-right .fa-minus-circle{
  95.     font-size: 5.5vw;
  96.     color: #999;
  97.     cursor: pointer;
  98. }
  99. .wrapper .food li .food-right p{
  100.     font-size: 3.6vw;
  101.     color: #333;
  102. }
  103. .wrapper .food li .food-right .fa-plus-circle{
  104.     font-size: 5.5vw;
  105.     color: #0097EF;
  106.     cursor: pointer;
  107. }
  108. /****************** 购物车部分 ******************/
  109. .wrapper .cart{
  110.     width: 100%;
  111.     height: 14vw;
  112.     position: fixed;
  113.     left: 0;
  114.     bottom: 0;
  115.     display: flex;
  116. }
  117. .wrapper .cart .cart-left{
  118.     flex: 2;
  119.     background-color: #505051;
  120.     display: flex;
  121. }
  122. .wrapper .cart .cart-left .cart-left-icon{
  123.     width: 16vw;
  124.     height: 16vw;
  125.     box-sizing: border-box;
  126.     border: solid 1.6vw #444;
  127.     border-radius: 8vw;
  128.     background-color: #3190E8;
  129.     font-size: 7vw;
  130.     color: #fff;
  131.     display: flex;
  132.     justify-content: center;
  133.     align-items: center;
  134.     margin-top: -4vw;
  135.     margin-left: 3vw;
  136.     position: relative;
  137. }
  138. .wrapper .cart .cart-left .cart-left-icon-quantity{
  139.     width: 5vw;
  140.     height: 5vw;
  141.     border-radius: 2.5vw;
  142.     background-color: red;
  143.     color: #fff;
  144.     font-size: 3.6vw;
  145.     display: flex;
  146.     justify-content: center;
  147.     align-items: center;
  148.     position: absolute;
  149.     right: -1.5vw;
  150.     top: -1.5vw;
  151. }
  152. .wrapper .cart .cart-left .cart-left-info p:first-child{
  153.     font-size: 4.5vw;
  154.     color: #fff;
  155.     margin-top: 1vw;
  156. }
  157. .wrapper .cart .cart-left .cart-left-info p:last-child{
  158.     font-size: 2.8vw;
  159.     color: #AAA;
  160. }
  161. .wrapper .cart .cart-right{
  162.     flex: 1;
  163. }
  164. /*达到起送费时的样式*/
  165. .wrapper .cart .cart-right .cart-right-item{
  166.     width: 100%;
  167.     height: 100%;
  168.     background-color: #38CA73;
  169.     color: #fff;
  170.     font-size: 4.5vw;
  171.     font-weight: 700;
  172.     user-select: none;
  173.     cursor: pointer;
  174.     display: flex;
  175.     justify-content: center;
  176.     align-items: center;
  177. }
  178. /*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
  179. /*
  180. .wrapper .cart .cart-right .cart-right-item{
  181.     width: 100%;
  182.     height: 100%;
  183.     background-color: #535356;
  184.     color: #fff;
  185.     font-size: 4.5vw;
  186.     font-weight: 700;
  187.     user-select: none;
  188.     display: flex;
  189.     justify-content: center;
  190.     align-items: center;
  191. }
  192. */

3.5.确认订单页面（order.html）

3.5.1.html部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  7.         <link href="framework/reset.css" rel="stylesheet">
  8.         <link href="css/order.css" rel="stylesheet">
  9.         <title>饿了么 确认订单</title>
  10.     </head>
  11.     <body>
  12.         <div class="wrapper">
  13.             <!-- header部分 -->
  14.             <header>
  15.                 <p>确认订单</p>
  16.             </header>
  17.             <!-- 订单信息部分 -->
  18.             <div class="order-info">
  19.                 <h5>订单配送至：</h5>
  20.                 <div class="order-info-address">
  21.                     <p>沈阳市浑南区智慧四街1-121号</p>
  22.                     <i class="fa fa-angle-right"></i>
  23.                 </div>
  24.                 <p>习近平先生 13656785432</p>
  25.             </div>
  26.             <h3>万家饺子（软件园E18店）</h3>
  27.             <!-- 订单明细部分 -->
  28.             <ul class="order-detailed">
  29.                 <li>
  30.                     <div class="order-detailed-left">
  31.                         <img src="img/sp01.png">
  32.                         <p>纯肉鲜肉（水饺） x 2</p>
  33.                     </div>
  34.                     <p>&#165;15</p>
  35.                 </li>
  36.                 <li>
  37.                     <div class="order-detailed-left">
  38.                         <img src="img/sp02.png">
  39.                         <p>玉米鲜肉（水饺） x 1</p>
  40.                     </div>
  41.                     <p>&#165;16</p>
  42.                 </li>
  43.             </ul>
  44.             <div class="order-deliveryfee">
  45.                 <p>配送费</p>
  46.                 <p>&#165;3</p>
  47.             </div>
  48.             <!-- 合计部分 -->
  49.             <div class="total">
  50.                 <div class="total-left">
  51.                     &#165;49
  52.                 </div>
  53.                 <div class="total-right" onclick="location.href='payment.html'">
  54.                     去支付
  55.                 </div>
  56.             </div>
  57.         </div>    
  58.     </body>
  59. </html>

3.5.2.css部分

  1. /****************** 总容器 ******************/
  2. .wrapper{
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. /****************** header部分 ******************/
  7. .wrapper header{
  8.     width: 100%;
  9.     height: 12vw;
  10.     background-color: #0097FF;
  11.     color: #fff;
  12.     font-size: 4.8vw;
  13.     position: fixed;
  14.     left: 0;
  15.     top: 0;
  16.     z-index: 1000;
  17.     display: flex;
  18.     justify-content: center;
  19.     align-items: center;
  20. }
  21. /****************** 订单信息部分 ******************/
  22. .wrapper .order-info{
  23.     /*注意这里，不设置高，靠内容撑开。因为地址有可能折行*/
  24.     width: 100%;
  25.     margin-top: 12vw;
  26.     background-color: #0097EF;
  27.     box-sizing: border-box;
  28.     padding: 2vw;
  29.     color: #fff;
  30. }
  31. .wrapper .order-info h5{
  32.     font-size: 3vw;
  33.     font-weight: 300;
  34. }
  35. .wrapper .order-info .order-info-address{
  36.     width: 100%;
  37.     display: flex;
  38.     justify-content: space-between;
  39.     align-items: center;
  40.     font-weight: 700;
  41.     user-select: none;
  42.     cursor: pointer;
  43.     margin: 1vw 0;
  44. }
  45. .wrapper .order-info .order-info-address p{
  46.     width: 90%;
  47.     font-size: 5vw;
  48. }
  49. .wrapper .order-info .order-info-address i{
  50.     font-size: 6vw;
  51. }
  52. .wrapper .order-info p{
  53.     font-size: 3vw;
  54. }
  55. .wrapper h3{
  56.     box-sizing: border-box;
  57.     padding: 3vw;
  58.     font-size: 4vw;
  59.     color: #666;
  60.     border-bottom: solid 1px #DDD;
  61. }
  62. /****************** 订单明细部分 ******************/
  63. .wrapper .order-detailed{
  64.     width: 100%;
  65. }
  66. .wrapper .order-detailed li{
  67.     width: 100%;
  68.     height: 16vw;
  69.     box-sizing: border-box;
  70.     padding: 3vw;
  71.     color: #666;
  72.     display: flex;
  73.     justify-content: space-between;
  74.     align-items: center;
  75. }
  76. .wrapper .order-detailed li .order-detailed-left{
  77.     display: flex;
  78.     align-items: center;
  79. }
  80. .wrapper .order-detailed li .order-detailed-left img{
  81.     width: 10vw;
  82.     height: 10vw;
  83. }
  84. .wrapper .order-detailed li .order-detailed-left p{
  85.     font-size: 3.5vw;
  86.     margin-left: 3vw;
  87. }
  88. .wrapper .order-detailed li p{
  89.     font-size: 3.5vw;
  90. }
  91. .wrapper .order-deliveryfee{
  92.     width: 100%;
  93.     height: 16vw;
  94.     box-sizing: border-box;
  95.     padding: 3vw;
  96.     color: #666;
  97.     display: flex;
  98.     justify-content: space-between;
  99.     align-items: center;
  100.     font-size: 3.5vw;
  101. }
  102. /****************** 订单合计部分 ******************/
  103. .wrapper .total{
  104.     width: 100%;
  105.     height: 14vw;
  106.     position: fixed;
  107.     left: 0;
  108.     bottom: 0;
  109.     display: flex;
  110. }
  111. .wrapper .total .total-left{
  112.     flex: 2;
  113.     background-color: #505051;
  114.     color: #fff;
  115.     font-size: 4.5vw;
  116.     font-weight: 700;
  117.     user-select: none;
  118.     display: flex;
  119.     justify-content: center;
  120.     align-items: center;
  121. }
  122. .wrapper .total .total-right{
  123.     flex: 1;
  124.     background-color: #38CA73;
  125.     color: #fff;
  126.     font-size: 4.5vw;
  127.     font-weight: 700;
  128.     user-select: none;
  129.     cursor: pointer;
  130.     display: flex;
  131.     justify-content: center;
  132.     align-items: center;
  133. }

3.6.在线支付页面（payment.html）

3.6.1.html部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  7.         <link href="framework/reset.css" rel="stylesheet">
  8.         <link href="css/payment.css" rel="stylesheet">
  9.         <script src="js/payment.js"></script>
  10.         <title>饿了么 在线支付</title>
  11.     </head>
  12.     <body>
  13.         <div class="wrapper">
  14.             <!-- header部分 -->
  15.             <header>
  16.                 <p>在线支付</p>
  17.             </header>
  18.             <!-- 订单信息部分 -->
  19.             <h3>订单信息：</h3>
  20.             <div class="order-info">
  21.                 <p>
  22.                     万家饺子（软件园E18店）
  23.                     <i class="fa fa-caret-down" id="showBtn"></i>
  24.                 </p>
  25.                 <p>&#165;49</p>
  26.             </div>
  27.             <!-- 订单明细部分 -->
  28.             <ul class="order-detailet" id="detailetBox">
  29.                 <li>
  30.                     <p>纯肉鲜肉（水饺） x 2</p>
  31.                     <p>&#165;15</p>
  32.                 </li>
  33.                 <li>
  34.                     <p>玉米鲜肉（水饺） x 1</p>
  35.                     <p>&#165;16</p>
  36.                 </li>
  37.                 <li>
  38.                     <p>配送费</p>
  39.                     <p>&#165;3</p>
  40.                 </li>
  41.             </ul>
  42.             <!-- 支付方式部分 -->
  43.             <ul class="payment-type">
  44.                 <li>
  45.                     <img src="./img/alipay.png">
  46.                     <i class="fa fa-check-circle"></i>
  47.                 </li>
  48.                 <li>
  49.                     <img src="./img/wechat.png">
  50.                 </li>
  51.             </ul>
  52.             <div class="payment-button">
  53.                 <button>确认支付</button>
  54.             </div>
  55.             <!-- 底部菜单部分 -->
  56.             <ul class="footer">
  57.                 <li onclick="location.href='index.html'">
  58.                     <i class="fa fa-home"></i>
  59.                     <p>首页</p>
  60.                 </li>
  61.                 <li>
  62.                     <i class="fa fa-compass"></i>
  63.                     <p>发现</p>
  64.                 </li>
  65.                 <li onclick="location.href='orderList.html'">
  66.                     <i class="fa fa-file-text-o"></i>
  67.                     <p>订单</p>
  68.                 </li>
  69.                 <li>
  70.                     <i class="fa fa-user-o"></i>
  71.                     <p>我的</p>
  72.                 </li>
  73.             </ul>
  74.         </div>    
  75.     </body>
  76. </html>

3.6.2.css部分

  1. /****************** 总容器 ******************/
  2. .wrapper{
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. /****************** header部分 ******************/
  7. .wrapper header{
  8.     width: 100%;
  9.     height: 12vw;
  10.     background-color: #0097FF;
  11.     color: #fff;
  12.     font-size: 4.8vw;
  13.     position: fixed;
  14.     left: 0;
  15.     top: 0;
  16.     z-index: 1000;
  17.     display: flex;
  18.     justify-content: center;
  19.     align-items: center;
  20. }
  21. /****************** 订单信息部分 ******************/
  22. .wrapper h3{
  23.     margin-top: 12vw;
  24.     box-sizing: border-box;
  25.     padding: 4vw 4vw 0;
  26.     font-size: 4vw;
  27.     font-weight: 300;
  28.     color: #999;
  29. }
  30. .wrapper .order-info{
  31.     box-sizing: border-box;
  32.     padding: 4vw;
  33.     font-size: 4vw;
  34.     color: #666;
  35.     display: flex;
  36.     justify-content: space-between;
  37.     align-items: center;
  38. }
  39. .wrapper .order-info p:last-child{
  40.     color: orangered;
  41. }
  42. /****************** 订单明细部分 ******************/
  43. .wrapper .order-detailet{
  44.     width: 100%;
  45. }
  46. .wrapper .order-detailet li{
  47.     width: 100%;
  48.     box-sizing: border-box;
  49.     padding: 1vw 4vw;
  50.     display: flex;
  51.     justify-content: space-between;
  52.     align-items: center;
  53. }
  54. .wrapper .order-detailet li p{
  55.     font-size: 3vw;
  56.     color: #666;
  57. }
  58. /****************** 支付方式部分 ******************/
  59. .wrapper .payment-type{
  60.     width: 100%;
  61. }
  62. .wrapper .payment-type li{
  63.     width: 100%;
  64.     box-sizing: border-box;
  65.     padding: 4vw;
  66.     display: flex;
  67.     justify-content: space-between;
  68.     align-items: center;
  69. }
  70. .wrapper .payment-type li img{
  71.     width: 33vw;
  72.     height: 8.9vw;
  73. }
  74. .wrapper .payment-type li .fa-check-circle{
  75.     font-size: 5vw;
  76.     color: #38CA73;
  77. }
  78. .wrapper .payment-button{
  79.     width: 100%;
  80.     box-sizing: border-box;
  81.     padding: 4vw;
  82. }
  83. .wrapper .payment-button button{
  84.     width: 100%;
  85.     height: 10vw;
  86.     border: none;
  87.     /*去掉外轮廓线*/
  88.     outline: none;
  89.     border-radius: 4px;
  90.     background-color: #38CA73;
  91.     color: #fff;
  92. }
  93. /****************** 底部菜单部分 ******************/
  94. .wrapper .footer{
  95.     width: 100%;
  96.     height: 14vw;
  97.     border-top: solid 1px #DDD;
  98.     background-color: #fff;
  99.     position: fixed;
  100.     left: 0;
  101.     bottom: 0;
  102.     display: flex;
  103.     justify-content: space-around;
  104.     align-items: center;
  105. }
  106. .wrapper .footer li{
  107.     display: flex;
  108.     flex-direction: column;
  109.     justify-content: center;
  110.     align-items: center;
  111.     color: #999;
  112.     user-select: none;
  113.     cursor: pointer;
  114. }
  115. .wrapper .footer li p{
  116.     font-size: 2.8vw;
  117. }
  118. .wrapper .footer li i{
  119.     font-size: 5vw;
  120. }

3.7.历史订单页面（orderList.html）

3.7.1.html部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  7.         <link href="framework/reset.css" rel="stylesheet">
  8.         <link href="css/orderList.css" rel="stylesheet">
  9.         <script src="js/orderList.js"></script>
  10.         <title>饿了么 我的订单</title>
  11.     </head>
  12.     <body>
  13.         <div class="wrapper">
  14.             <!-- header部分 -->
  15.             <header>
  16.                 <p>我的订单</p>
  17.             </header>
  18.             <!-- 订单列表部分 -->
  19.             <h3>未支付订单信息：</h3>
  20.             <ul class="order">
  21.                 <li>
  22.                     <div class="order-info">
  23.                         <p>
  24.                             万家饺子（软件园E18店）
  25.                             <i class="fa fa-caret-down"></i>
  26.                         </p>
  27.                         <div class="order-info-right">
  28.                             <p>&#165;49</p>
  29.                             <div class="order-info-right-icon">去支付</div>
  30.                         </div>
  31.                     </div>
  32.                     <ul class="order-detailet">
  33.                         <li>
  34.                             <p>纯肉鲜肉（水饺） x 2</p>
  35.                             <p>&#165;15</p>
  36.                         </li>
  37.                         <li>
  38.                             <p>玉米鲜肉（水饺） x 1</p>
  39.                             <p>&#165;16</p>
  40.                         </li>
  41.                         <li>
  42.                             <p>配送费</p>
  43.                             <p>&#165;3</p>
  44.                         </li>
  45.                     </ul>
  46.                 </li>
  47.                 <li>
  48.                     <div class="order-info">
  49.                         <p>
  50.                             小锅饭豆腐馆（全运店）
  51.                             <i class="fa fa-caret-down"></i>
  52.                         </p>
  53.                         <div class="order-info-right">
  54.                             <p>&#165;55</p>
  55.                             <div class="order-info-right-icon">去支付</div>
  56.                         </div>
  57.                     </div>
  58.                     <ul class="order-detailet">
  59.                         <li>
  60.                             <p>纯肉鲜肉（水饺） x 2</p>
  61.                             <p>&#165;15</p>
  62.                         </li>
  63.                         <li>
  64.                             <p>玉米鲜肉（水饺） x 1</p>
  65.                             <p>&#165;16</p>
  66.                         </li>
  67.                         <li>
  68.                             <p>配送费</p>
  69.                             <p>&#165;3</p>
  70.                         </li>
  71.                     </ul>
  72.                 </li>
  73.             </ul>
  74.             <h3>已支付订单信息：</h3>
  75.             <ul class="order">
  76.                 <li>
  77.                     <div class="order-info">
  78.                         <p>
  79.                             万家饺子（软件园E18店）
  80.                             <i class="fa fa-caret-down"></i>
  81.                         </p>
  82.                         <div class="order-info-right">
  83.                             <p>&#165;49</p>
  84.                         </div>
  85.                     </div>
  86.                     <ul class="order-detailet">
  87.                         <li>
  88.                             <p>纯肉鲜肉（水饺） x 2</p>
  89.                             <p>&#165;15</p>
  90.                         </li>
  91.                         <li>
  92.                             <p>玉米鲜肉（水饺） x 1</p>
  93.                             <p>&#165;16</p>
  94.                         </li>
  95.                         <li>
  96.                             <p>配送费</p>
  97.                             <p>&#165;3</p>
  98.                         </li>
  99.                     </ul>
  100.                 </li>
  101.                 <li>
  102.                     <div class="order-info">
  103.                         <p>
  104.                             小锅饭豆腐馆（全运店）
  105.                             <i class="fa fa-caret-down"></i>
  106.                         </p>
  107.                         <div class="order-info-right">
  108.                             <p>&#165;55</p>
  109.                         </div>
  110.                     </div>
  111.                     <ul class="order-detailet">
  112.                         <li>
  113.                             <p>纯肉鲜肉（水饺） x 2</p>
  114.                             <p>&#165;15</p>
  115.                         </li>
  116.                         <li>
  117.                             <p>玉米鲜肉（水饺） x 1</p>
  118.                             <p>&#165;16</p>
  119.                         </li>
  120.                         <li>
  121.                             <p>配送费</p>
  122.                             <p>&#165;3</p>
  123.                         </li>
  124.                     </ul>
  125.                 </li>
  126.             </ul>
  127.             <!-- 底部菜单部分 -->
  128.             <ul class="footer">
  129.                 <li onclick="location.href='index.html'">
  130.                     <i class="fa fa-home"></i>
  131.                     <p>首页</p>
  132.                 </li>
  133.                 <li>
  134.                     <i class="fa fa-compass"></i>
  135.                     <p>发现</p>
  136.                 </li>
  137.                 <li onclick="location.href='orderList.html'">
  138.                     <i class="fa fa-file-text-o"></i>
  139.                     <p>订单</p>
  140.                 </li>
  141.                 <li>
  142.                     <i class="fa fa-user-o"></i>
  143.                     <p>我的</p>
  144.                 </li>
  145.             </ul>
  146.         </div>    
  147.     </body>
  148. </html>

3.7.2.css部分

  1. /****************** 总容器 ******************/
  2. .wrapper{
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. /****************** header部分 ******************/
  7. .wrapper header{
  8.     width: 100%;
  9.     height: 12vw;
  10.     background-color: #0097FF;
  11.     color: #fff;
  12.     font-size: 4.8vw;
  13.     position: fixed;
  14.     left: 0;
  15.     top: 0;
  16.     z-index: 1000;
  17.     display: flex;
  18.     justify-content: center;
  19.     align-items: center;
  20. }
  21. /****************** 历史订单列表部分 ******************/
  22. .wrapper h3{
  23.     margin-top: 12vw;
  24.     box-sizing: border-box;
  25.     padding: 4vw;
  26.     font-size: 4vw;
  27.     font-weight: 300;
  28.     color: #999;
  29. }
  30. .wrapper .order{
  31.     width: 100%;
  32. }
  33. .wrapper .order li{
  34.     width: 100%;
  35. }
  36. .wrapper .order li .order-info{
  37.     box-sizing: border-box;
  38.     padding: 2vw 4vw;
  39.     font-size: 4vw;
  40.     color: #666;
  41.     display: flex;
  42.     justify-content: space-between;
  43.     align-items: center;
  44. }
  45. .wrapper .order li .order-info .order-info-right{
  46.     display: flex;
  47. }
  48. .wrapper .order li .order-info .order-info-right .order-info-right-icon{
  49.     background-color: #f90;
  50.     color: #fff;
  51.     border-radius: 3px;
  52.     margin-left: 2vw;
  53.     user-select: none;
  54.     cursor: pointer;
  55. }
  56. .wrapper .order li .order-detailet{
  57.     width: 100%;
  58. }
  59. .wrapper .order li .order-detailet li{
  60.     width: 100%;
  61.     box-sizing: border-box;
  62.     padding: 1vw 4vw;
  63.     color: #666;
  64.     font-size: 3vw;
  65.     display: flex;
  66.     justify-content: space-between;
  67.     align-items: center;
  68. }
  69. /****************** 底部菜单部分 ******************/
  70. .wrapper .footer{
  71.     width: 100%;
  72.     height: 14vw;
  73.     border-top: solid 1px #DDD;
  74.     background-color: #fff;
  75.     position: fixed;
  76.     left: 0;
  77.     bottom: 0;
  78.     display: flex;
  79.     justify-content: space-around;
  80.     align-items: center;
  81. }
  82. .wrapper .footer li{
  83.     display: flex;
  84.     flex-direction: column;
  85.     justify-content: center;
  86.     align-items: center;
  87.     color: #999;
  88.     user-select: none;
  89.     cursor: pointer;
  90. }
  91. .wrapper .footer li p{
  92.     font-size: 2.8vw;
  93. }
  94. .wrapper .footer li i{
  95.     font-size: 5vw;
  96. }

3.8.登陆页面（login.html）

3.8.1.html部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  7.         <link href="framework/reset.css" rel="stylesheet">
  8.         <link href="css/login.css" rel="stylesheet">
  9.         <title>饿了么 用户登陆</title>
  10.     </head>
  11.     <body>
  12.         <div class="wrapper">
  13.             <!-- header部分 -->
  14.             <header>
  15.                 <p>用户登陆</p>
  16.             </header>
  17.             <!-- 表单部分 -->
  18.             <ul class="form-box">
  19.                 <li>
  20.                     <div class="title">
  21.                         手机号码：
  22.                     </div>
  23.                     <div class="content">
  24.                         <input type="text" placeholder="手机号码">
  25.                     </div>
  26.                 </li>
  27.                 <li>
  28.                     <div class="title">
  29.                         密码：
  30.                     </div>
  31.                     <div class="content">
  32.                         <input type="password" placeholder="密码">
  33.                     </div>
  34.                 </li>
  35.             </ul>
  36.             <div class="button-login">
  37.                 <button>登陆</button>
  38.             </div>
  39.             <div class="button-register">
  40.                 <button onclick="location.href='register.html'">去注册</button>
  41.             </div>
  42.             <!-- 底部菜单部分 -->
  43.             <ul class="footer">
  44.                 <li onclick="location.href='index.html'">
  45.                     <i class="fa fa-home"></i>
  46.                     <p>首页</p>
  47.                 </li>
  48.                 <li>
  49.                     <i class="fa fa-compass"></i>
  50.                     <p>发现</p>
  51.                 </li>
  52.                 <li onclick="location.href='orderList.html'">
  53.                     <i class="fa fa-file-text-o"></i>
  54.                     <p>订单</p>
  55.                 </li>
  56.                 <li>
  57.                     <i class="fa fa-user-o"></i>
  58.                     <p>我的</p>
  59.                 </li>
  60.             </ul>
  61.         </div>    
  62.     </body>
  63. </html>

3.8.2.css部分

  1. /****************** 总容器 ******************/
  2. .wrapper{
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. /****************** header部分 ******************/
  7. .wrapper header{
  8.     width: 100%;
  9.     height: 12vw;
  10.     background-color: #0097FF;
  11.     color: #fff;
  12.     font-size: 4.8vw;
  13.     position: fixed;
  14.     left: 0;
  15.     top: 0;
  16.     z-index: 1000;
  17.     display: flex;
  18.     justify-content: center;
  19.     align-items: center;
  20. }
  21. /****************** 表单部分 ******************/
  22. .wrapper .form-box{
  23.     width: 100%;
  24.     margin-top: 12vw;
  25. }
  26. .wrapper .form-box li{
  27.     box-sizing: border-box;
  28.     padding: 4vw 3vw 0 3vw;
  29.     display: flex;
  30.     align-items: center;
  31. }
  32. .wrapper .form-box li .title{
  33.     flex: 0 0 18vw;
  34.     font-size: 3vw;
  35.     font-weight: 700;
  36.     color: #666;
  37. }
  38. .wrapper .form-box li .content{
  39.     flex: 1;
  40. }
  41. .wrapper .form-box li .content input{
  42.     border: none;
  43.     outline: none;
  44.     width: 100%;
  45.     height: 4vw;
  46.     font-size: 3vw;
  47. }
  48. .wrapper .button-login{
  49.     width: 100%;
  50.     box-sizing: border-box;
  51.     padding: 4vw 3vw 0 3vw;
  52. }
  53. .wrapper .button-login button{
  54.     width: 100%;
  55.     height: 10vw;
  56.     font-size: 3.8vw;
  57.     font-weight: 700;
  58.     color: #fff;
  59.     background-color: #38CA73;
  60.     border-radius: 4px;
  61.     border: none;
  62.     outline: none;
  63. }
  64. .wrapper .button-register{
  65.     width: 100%;
  66.     box-sizing: border-box;
  67.     padding: 4vw 3vw 0 3vw;
  68. }
  69. .wrapper .button-register button{
  70.     width: 100%;
  71.     height: 10vw;
  72.     font-size: 3.8vw;
  73.     font-weight: 700;
  74.     /*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
  75.     color: #666;
  76.     background-color: #EEE;
  77.     border: solid 1px #DDD;
  78.     border-radius: 4px;
  79.     border: none;
  80.     outline: none;
  81. }
  82. /****************** 底部菜单部分 ******************/
  83. .wrapper .footer{
  84.     width: 100%;
  85.     height: 14vw;
  86.     border-top: solid 1px #DDD;
  87.     background-color: #fff;
  88.     position: fixed;
  89.     left: 0;
  90.     bottom: 0;
  91.     display: flex;
  92.     justify-content: space-around;
  93.     align-items: center;
  94. }
  95. .wrapper .footer li{
  96.     display: flex;
  97.     flex-direction: column;
  98.     justify-content: center;
  99.     align-items: center;
  100.     color: #999;
  101.     user-select: none;
  102.     cursor: pointer;
  103. }
  104. .wrapper .footer li p{
  105.     font-size: 2.8vw;
  106. }
  107. .wrapper .footer li i{
  108.     font-size: 5vw;
  109. }

3.9.注册页面（register.html）

3.9.1.html部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  7.         <link href="framework/reset.css" rel="stylesheet">
  8.         <link href="css/register.css" rel="stylesheet">
  9.         <title>饿了么 用户注册</title>
  10.     </head>
  11.     <body>
  12.         <div class="wrapper">
  13.             <!-- header部分 -->
  14.             <header>
  15.                 <p>用户注册</p>
  16.             </header>
  17.             <!-- 表单部分 -->
  18.             <ul class="form-box">
  19.                 <li>
  20.                     <div class="title">
  21.                         手机号码：
  22.                     </div>
  23.                     <div class="content">
  24.                         <input type="text" placeholder="手机号码">
  25.                     </div>
  26.                 </li>
  27.                 <li>
  28.                     <div class="title">
  29.                         密码：
  30.                     </div>
  31.                     <div class="content">
  32.                         <input type="password" placeholder="密码">
  33.                     </div>
  34.                 </li>
  35.                 <li>
  36.                     <div class="title">
  37.                         确认密码：
  38.                     </div>
  39.                     <div class="content">
  40.                         <input type="password" placeholder="确认密码">
  41.                     </div>
  42.                 </li>
  43.                 <li>
  44.                     <div class="title">
  45.                         性别：
  46.                     </div>
  47.                     <div class="content" style="font-size: 3vw;">
  48.                         <input type="radio" name="sex" checked style="width:6vw;height: 3.2vw;">男
  49.                         <input type="radio" name="sex" style="width:6vw;height: 3.2vw;">女
  50.                     </div>
  51.                 </li>
  52.             </ul>
  53.             <div class="button-login">
  54.                 <button onclick="location.href='login.html'">注册</button>
  55.             </div>
  56.             <!-- 底部菜单部分 -->
  57.             <ul class="footer">
  58.                 <li onclick="location.href='index.html'">
  59.                     <i class="fa fa-home"></i>
  60.                     <p>首页</p>
  61.                 </li>
  62.                 <li>
  63.                     <i class="fa fa-compass"></i>
  64.                     <p>发现</p>
  65.                 </li>
  66.                 <li onclick="location.href='orderList.html'">
  67.                     <i class="fa fa-file-text-o"></i>
  68.                     <p>订单</p>
  69.                 </li>
  70.                 <li>
  71.                     <i class="fa fa-user-o"></i>
  72.                     <p>我的</p>
  73.                 </li>
  74.             </ul>
  75.         </div>    
  76.     </body>
  77. </html>

3.9.2.css部分

  1. /****************** 总容器 ******************/
  2. .wrapper{
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. /****************** header部分 ******************/
  7. .wrapper header{
  8.     width: 100%;
  9.     height: 12vw;
  10.     background-color: #0097FF;
  11.     color: #fff;
  12.     font-size: 4.8vw;
  13.     position: fixed;
  14.     left: 0;
  15.     top: 0;
  16.     z-index: 1000;
  17.     display: flex;
  18.     justify-content: center;
  19.     align-items: center;
  20. }
  21. /****************** 表单部分 ******************/
  22. .wrapper .form-box{
  23.     width: 100%;
  24.     margin-top: 12vw;
  25. }
  26. .wrapper .form-box li{
  27.     box-sizing: border-box;
  28.     padding: 4vw 3vw 0 3vw;
  29.     display: flex;
  30.     align-items: center;
  31. }
  32. .wrapper .form-box li .title{
  33.     flex: 0 0 18vw;
  34.     font-size: 3vw;
  35.     font-weight: 700;
  36.     color: #666;
  37. }
  38. .wrapper .form-box li .content{
  39.     flex: 1;
  40. }
  41. .wrapper .form-box li .content input{
  42.     border: none;
  43.     outline: none;
  44.     width: 100%;
  45.     height: 4vw;
  46.     font-size: 3vw;
  47. }
  48. .wrapper .button-login{
  49.     width: 100%;
  50.     box-sizing: border-box;
  51.     padding: 4vw 3vw 0 3vw;
  52. }
  53. .wrapper .button-login button{
  54.     width: 100%;
  55.     height: 10vw;
  56.     font-size: 3.8vw;
  57.     font-weight: 700;
  58.     color: #fff;
  59.     background-color: #38CA73;
  60.     border-radius: 4px;
  61.     border: none;
  62.     outline: none;
  63. }
  64. .wrapper .button-register{
  65.     width: 100%;
  66.     box-sizing: border-box;
  67.     padding: 4vw 3vw 0 3vw;
  68. }
  69. .wrapper .button-register button{
  70.     width: 100%;
  71.     height: 10vw;
  72.     font-size: 3.8vw;
  73.     font-weight: 700;
  74.     color: #666;
  75.     background-color: #EEE;
  76.     border-radius: 4px;
  77.     border: none;
  78.     outline: none;
  79.     border: solid 1px #DDD;
  80. }
  81. /****************** 底部菜单部分 ******************/
  82. .wrapper .footer{
  83.     width: 100%;
  84.     height: 14vw;
  85.     border-top: solid 1px #DDD;
  86.     background-color: #fff;
  87.     position: fixed;
  88.     left: 0;
  89.     bottom: 0;
  90.     display: flex;
  91.     justify-content: space-around;
  92.     align-items: center;
  93. }
  94. .wrapper .footer li{
  95.     display: flex;
  96.     flex-direction: column;
  97.     justify-content: center;
  98.     align-items: center;
  99.     color: #999;
  100.     user-select: none;
  101.     cursor: pointer;
  102. }
  103. .wrapper .footer li p{
  104.     font-size: 2.8vw;
  105. }
  106. .wrapper .footer li i{
  107.     font-size: 5vw;
  108. }

[

](https://null_688_6639.gitee.io/javase/13%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE/)