## 一、首页预览
## 二、头部结构
头部结构可以分为两个部分：搜索条和背景图。代码如下：
```
<!--头部开始-->
<div class="header">
<div class="search-bar">
<div class="bar-location">
<div class="location-icon"></div>
<div class="location-text">南通市</div>
</div>
<div class="search-btn">
<p class="place-holder">鸡翅</p>
</div>
</div>
<img class="header-img"
src="https://app.nihaoshijie.com.cn/upload/bannertemp.e8a6fa63.jpg">
</div>
<!--头部结束-->
```
## 三、头部样式
在编写功能模块样式之前，一般我们会引入重置样式来对浏览器默认样式进行重置。样式代码如下：
```
/* reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix::after {
content: ' ';
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.one-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hide {
display: none;
}
```
引入重置样式之后，我们就可以开始编写头部样式了，样式代码如下：
```
.header {
position: relative;
}
.header .header-img {
width: 100%;
height: 4.746667rem;
}
```
在此处我们使用了`rem`单位来设置头部区域的高度，那么我们就需要设定`1rem`的值，我们将其动态地设置为视口宽度的10分之一。注意：此时1rem的值设置，存在多种方式。
```
(function() {
var docEl = document.documentElement;
function setRemUnit() {
// 获取到rem的基准值
var rem = docEl.clientWidth / 10;
// 动态设置html根元素的 font-size
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
// 窗口大小变化时 触发
window.addEventListener('resize', setRemUnit);
// 窗口出现在当前屏幕时 （有浏览器兼容性）
window.addEventListener('pageshow', function(e) {
if (e.persisted) {
setRemUnit();
}
});
})();
```
## 四、头部搜索
```
.search-bar {
width: 100%;
height: 1.066667rem;
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-top: 0.213333rem;
}
.search-bar .bar-location {
margin-right: 0.533333rem;
border-radius: 0.346667rem;
background-color: rgba(0,0,0,0.33);
width: 2.453333rem;
height: 0.746667rem;
}
.search-bar .location-icon {
display: inline-block;
width: 0.4rem;
height: 0.533333rem;
vertical-align: 0.213333rem;
margin-left: 0.16rem;
background-image: url('../img/locationIcon.png');
background-size: cover;
}
.search-bar .location-text {
position: relative;
display: inline-block;
font-size: 0.373333rem;
color: #fff;
vertical-align: 0.32rem;
margin-left: -0.08rem;
}
.search-bar .location-text::after {
content: ' ';
display: block;
width: 0.373333rem;
height: 0.373333rem;
background-image: url('../img/arrowIcon.png');
background-size: cover;
position: absolute;
right: -0.4rem;
top: -0.026667rem;
}
.search-bar .search-btn {
position: relative;
width: 4.533333rem;
height: 0.8rem;
background-color: #fff;
border-radius: 0.533333rem;
}
.search-bar .search-btn::before {
content: ' ';
display: block;
width: 0.373333rem;
height: 0.373333rem;
background-image: url('../img/searchIcon.png');
background-size: cover;
top: 0.213333rem;
left: 0.266667rem;
position: absolute;
}
.search-bar .place-holder {
color: #a9a9a9;
font-size: 0.373333rem;
height: 100%;
line-height: 0.8rem;
margin-left: 0.746667rem;
}
```
## 五、类目
首先我们需要编写类目的 HTML 结构，代码如下：
```
<!-- 类目开始 -->
<div class="category-content clearfix">
<div class="category-item">
<img class="item-icon"
src="http://p1.meituan.net/jungle/bd3ea637aeaa2fb6120b6938b5e468a13442.png">
<p class="item-name">美食</p>
</div>
<div class="category-item">
<img class="item-icon"
src="http://p0.meituan.net/jungle/6b93ee96be3df7cf2bb6e661280b047d3975.png">
<p class="item-name">美团超市</p>
</div>
<div class="category-item">
<img class="item-icon"
src="http://p0.meituan.net/jungle/f33ed552c52b4466b6308a2c14dbc62d4882.png">
<p class="item-name">生鲜果蔬</p>
</div>
<div class="category-item">
<img class="item-icon"
src="http://p0.meituan.net/jungle/45816fffb346c194d58e961fde7c0fad4901.png">
<p class="item-name">甜点饮品</p>
</div>
<div class="category-item">
<img class="item-icon"
src="http://p0.meituan.net/jungle/f51c34aea31bf3685be15dedde2632bc5391.png">
<p class="item-name">美团专送</p>
</div>
<div class="category-item">
<img class="item-icon"
src="http://p1.meituan.net/jungle/1543bbcb048218424e2420a6934e17b24236.png">
<p class="item-name">正餐优选</p>
</div>
<div class="category-item">
<img class="item-icon"
src="http://p0.meituan.net/jungle/b528beea0749cb18dd34a38bd2439ed43867.png">
<p class="item-name">快餐小吃</p>
</div>
<div class="category-item">
<img class="item-icon"
src="http://p1.meituan.net/jungle/0e63b86b4ff14d214c1999a979fd21d14273.png">
<p class="item-name">汉堡披萨</p>
</div>
</div>
<!-- 类目结束 -->
```
类目的布局样式采用`flex`布局，代码如下：
```
.category-content {
padding-bottom: 0.266667rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.category-content .category-item {
width: 25%;
padding-top: 0.373333rem;
font-size: 0.346667rem;
display: flex;
flex-direction: column;
align-items: center;
}
.category-content .item-icon {
width: 1.253333rem;
}
.category-content .item-name {
margin-top: 0.373333rem;
}
```
## 六、商家列表
我们接着来编写商家列表的HTML结构，代码如下：
```
<!-- 商家列表开始 -->
<div class="list-content">
<h4 class="list-title">
<span class="title-line"></span>
<span>附近商家</span>
<span class="title-line"></span>
</h4>
<div class="list-wrap">
<div class="r-item-content">
<img class="item-img"
src="http://p0.meituan.net/xianfu/aa86bc1b9a218ea5e094b861c03b59b94873.jpg">
<div class="brand brand-pin">品牌</div>
<div class="item-info-content">
<p class="item-title">深圳麦当劳前海二餐厅</p>
<div class="item-desc clearfix">
<div class="item-score">
<div class="star-score">
<div class="star fullstar"></div>
<div class="star fullstar"></div>
<div class="star fullstar"></div>
<div class="star fullstar"></div>
<div class="star halfstar"></div>
</div>
</div>
<div class="item-count">月售999+</div>
<div class="item-distance"> 2.3km</div>
<div class="item-time">30分钟 |</div>
</div>
<div class="item-price">
<div class="item-pre-price">起送 ¥0</div>
</div>
<div class="item-others">
<div class="other-info">
<img class="other-tag"
src="http://p0.meituan.net/xianfu/476ba65ee80b6385bab292c085baed17940.png">
<p class="other-content one-line">本店支持开发票，开票金额0元起</p>
</div>
</div>
</div>
</div>
<div class="r-item-content">
<img class="item-img"
src="http://p1.meituan.net/waimaipoi/a069cda780cfad105f7d34b193f4cd8027807.jpg">
<div class="brand brand-pin">品牌</div>
<div class="item-info-content">
<p class="item-title">尊宝比萨(依云伴山店)</p>
<div class="item-desc clearfix">
<div class="item-score">
<div class="star-score">
<div class="star fullstar"></div>
<div class="star fullstar"></div>
<div class="star fullstar"></div>
<div class="star fullstar"></div>
<div class="star halfstar"></div>
</div>
</div>
<div class="item-count">月售999+</div>
<div class="item-distance"> 231m</div>
<div class="item-time">35分钟 |</div>
</div>
<div class="item-price">
<div class="item-pre-price">起送 ¥30</div>
</div>
<div class="item-others"></div>
</div>
</div>
</div>
<div class="loading">加载完成</div>
</div>
<!-- 商家列表结束 -->
```
元素布局样式实现方式较多，我们可以利用多种布局方式一起来完成样式编写，代码如下：
```
.list-content {
overflow: hidden;
padding-bottom: 1.333333rem;
}
.list-content .list-title {
text-align: center;
font-size: 0.426667rem;
margin-top: 0.373333rem;
margin-bottom: 0.133333rem;
}
.list-content .title-line {
display: inline-block;
border-bottom: 0.026667rem solid #949494;
height: 0.026667rem;
width: 0.8rem;
margin-left: 0.106667rem;
margin-right: 0.106667rem;
margin-bottom: 0.106667rem;
}
.loading {
padding-bottom: 0.266667rem;
padding-top: 0.266667rem;
font-size: 0.426667rem;
text-align: center;
color: #ccc;
}
.r-item-content {
display: flex;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
margin-left: 0.266667rem;
margin-right: 0.266667rem;
color: #656565;
position: relative;
}
.r-item-content .item-img {
width: 2.293333rem;
height: 1.733333rem;
border: 0.026667rem solid #e4e4e4;
}
.r-item-content .item-info-content {
flex: 1;
margin-left: 0.186667rem;
overflow: hidden;
}
.r-item-content .brand {
position: absolute;
left: 0.026667rem;
top: 0.426667rem;
font-size: 0.32rem;
padding: 0.053333rem;
color: #fff;
}
.r-item-content .brand-pin {
background-color: #ffa627;
}
.r-item-content .brand-xin {
background-color: #21c56c;
}
.r-item-content .item-title {
margin-top: 0.08rem;
font-size: 0.426667rem;
font-weight: 500;
color: #333;
}
.r-item-content .item-desc {
margin-top: 0.346667rem;
font-size: 0.32rem;
}
.r-item-content .item-count {
float: left;
margin-left: 0.133333rem;
}
.r-item-content .item-time {
float: right;
}
.r-item-content .item-distance {
float: right;
}
.r-item-content .item-score {
float: left;
}
.r-item-content .item-price {
margin-top: 0.266667rem;
font-size: 0.32rem;
height: 0.64rem;
}
.r-item-content .other-info {
color: #898989;
margin-top: 0.186667rem;
font-size: 0.32rem;
display: flex;
}
.r-item-content .other-tag {
width: 0.373333rem;
height: 0.373333rem;
}
.other-content {
margin-left: 0.08rem;
height: 0.373333rem;
width: 6.133333rem;
margin-top: 0.026667rem;
}
```
## 七、星级评分
我们在显示星级评分的时候，没有设置样式，这里我们需要使用一些图片来来显示星级。样式如下：
```
```
## 八、底部菜单
页面最底部菜单栏如下：
```
<!-- 底部菜单栏开始 -->
<div class="bottom-bar">
<a class="index btn-item active" href="#">
<div class="tab-icon"></div>
<div class="btn-name">首页</div>
</a>
<a class="order btn-item" href="#">
<div class="tab-icon"></div>
<div class="btn-name">订单</div>
</a>
<a class="my btn-item" href="#">
<div class="tab-icon"></div>
<div class="btn-name">我的</div>
</a>
</div>
<!-- 底部菜单栏结束 -->
```
底部菜单栏应该使用固定在视口底部，我们应该使用固定定位来完整布局，布局样式如下：
```
.bottom-bar {
position: fixed;
bottom: 0;
width: 100%;
height: 1.333333rem;
display: flex;
border-top: 1px solid #b6b6b6;
background-color: rgba(246,246,246,0.95);
}
.bottom-bar .btn-item {
flex: 1;
display: flex;
font-size: 0.293333rem;
flex-direction: column;
align-items: center;
justify-content: center;
color: #999;
}
.bottom-bar .tab-icon {
margin-bottom: 0.106667rem;
width: 0.666667rem;
height: 0.666667rem;
background-size: cover;
}
.bottom-bar .index.btn-item .tab-icon {
background-image: url('../img/homeIcon.png');
}
.bottom-bar .my.btn-item .tab-icon {
background-image: url('../img/myIcon.png');
}
.bottom-bar .order.btn-item .tab-icon {
background-image: url('../img/orderIcon.png');
}
.bottom-bar .btn-item.active {
color: #000;
}
.bottom-bar .index.btn-item.active .tab-icon {
background-image: url('../img/homeIconActive.png');
}
.bottom-bar .my.btn-item.active .tab-icon {
background-image: url('../img/myIconActive.png');
}
.bottom-bar .order.btn-item.active .tab-icon {
background-image: url('../img/orderIconActive.png');
}
```
## 九、本节作业
* 商家列表：在真实情况下，我们获取商家列表数据都是通过请求后端数据来获得，为了模拟这一情况，新建数据文件`shops.json`，通过`jquery`中`ajax`来读取商家数据，渲染商家列表页面。
```
$.get('../data/shops.json', function(data){
console.log(data);
});
```
* 在`shops.json`中我们提供了大量商家数据，但是在实际应用中，都是用户滚动屏幕来获取新的数据，我们可以监听`window`或者`document`的滚动事件，每次新增显示10条或者20条数据。
```
window.addEventListener('scroll',function(){
var clientHeight = document.documentElement.clientHeight;
var scrollHeight = document.body.scrollHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// ...
}
```
- 第一章：移动开发入门
- 第一节：概述
- 第二节：基础概念
- 第一课时：像素
- 第二课时：视口
- 第二章：Flex 布局
- 第一节：概述
- 第二节：容器属性
- 第一课时：flex-direction 属性
- 第二课时：flex-wrap 属性
- 第三课时：flex-flow 属性
- 第四课时：justify-content 属性
- 第五课时：align-items 属性
- 第六课时：align-content 属性
- 第三节：项目属性
- 第一课时：order 属性
- 第二课时：flex-grow 属性
- 第三课时：flex-shrink 属性
- 第四课时：flex-basis 属性
- 第五课时：flex 属性
- 第六课时：align-self 属性
- 第四节：Flex 实例
- 第一课时：常见页面布局
- 第三章：响应式布局
- 第一节：概述
- 第二节：媒体查询
- 第一课时：概述
- 第二课时：响应式设计
- 第三节：栅格系统
- 第一课时：概述
- 第二课时：案例分析
- 第三课时：Bootstrap 简介
- 第四节：响应式案例
- 第一课时：三星首页
- 第四章：移动端适配
- 第五章：移动端事件
- 第一节：概述
- 第二节：touch 事件
- 第三节：触摸事件对象
- 第四节：其他事件
- 第五节：移动端幻灯片
- 第六章：移动端常见问题
- 第一节：浏览器兼容性
- 第二节：移动端动画
- 第三节：300ms 延迟
- 第四节：文字溢出省略
- 第五节：水平居中和垂直居中
- 第七章：项目案例
- 第一节：美团外卖
- 第一课时：首页
- 第二课时：订单页面
- 第三课时：我的页面
- 第四课时：详情页面
- 第五课时：购物车页