开发纪实

创建上游仓库 分包团队fork上游仓库 在上游仓库点击fork按钮 分包团队在下游分头开发 git clone 下游仓库 基于dev分支拉取功能分支 分包整合最新内容 拉取上游仓库的dev 在下游本地

@效果预览 页面布局，它还真就是个布局！整体与局部永远都是相对的！——爱因斯坦：我没说过 @布局思路 整个banner区域作为一个大盒子，根据设计图其尺寸为1190*447，水平居中放置； 上图的橙色

@效果预览 @布局思路 给上一节中的铺排好位置的div设置图片背景呗； 最右侧用户信息区和二维码区，元素直排 + 宽高都居中，今天我们使用全新知识弹性盒来做！ @HTML部分 @样式部分 给盒子设置背

@效果预览 @布局思路 标题栏、白底灰边的内容盒子均复用前面封装好的样式即可！ 故曰：花开堪折直须折，能不搬砖就别搬！ ul+li+浮动，实现横排+自动折行； 直排弹性盒实现单品内纵向信息排列，交叉轴

项目篇 @互联网项目的一般研发流程 互联网项目的一般研发流程 @获得设计效果图 本例中由于是直接山寨美团网，也就不需要美术替我们出图了 浏览器截图 使用 Chrome浏览器 打开 美团并缓慢地一撸到底

@预期效果 今天我们来完成顶栏的布局，设计效果图如下： @布局思路 观察效果图，众多导航链接被分成左右两个片区，一部分向左浮动，一部分向右浮动，我们先在内容上将其分为左右两部分； 我们使用没有特殊语义

@效果预览 正在赶来... @布局思路 正在赶来... @HTML部分 标题盒子 横排轮播图 @SCSS部分 预设字体 css/reset.css 封装标题盒子样式 ↑↑↑ 标题盒子的样式改改背景色就

@效果预览 @布局思路 @HTML部分 @SCSS部分 @知识链接 极简页面布局知识手册 @获取源码 猛戳此处获取老师源码！ 更高处见！

@效果预览 @布局思路 @HTML部分 @SCSS部分 @知识链接 极简页面布局知识手册 @获取源码 猛戳此处获取老师源码！ 更高处见！

@效果预览 感觉身体里有一股真气在逐渐升腾，糟了！可能是心动的感觉？ @布局思路 宏观拆分 给整个页头以197的高度 + 白色背景 + 怪异盒模型（即197包含内容高+上下内边距）； 用一个div1盛

@效果预览 @布局思路 给菜单ul整体使用主轴为纵向的弹性盒，实现li的纵向排列； 纵向（主轴）上平均分布子元素； 在li内部将菜单项图标和箭头图标分别向左和向右浮动； 给li内的文字span的tex

@效果预览 @布局思路 @HTML部分 @精灵图 @SCSS部分 公共样式 1190宽水平居中的盒子 左右浮动 清除内部子元素的浮动 页脚样式 @知识链接 极简页面布局知识手册 @获取源码 猛戳此处获

@给盒子加阴影 知识传送门 盒子阴影 @伪元素小装饰 @伪元素指示器 原理解释 @鼠标覆盖时出现元素 豆腐块未被鼠标hover时，按钮显示为透明底+透明字； 豆腐块被鼠标hover时，按钮显示为黑底+

@效果预览 @布局思路 标题栏使用上节中封装好的title-box样式； 使用ul+li+浮动制作横排折行效果； 单个li内部使用直排弹性盒，p标签内部文本左对齐； 小球相对于大图做绝对定位，定到右下

@Vant简介 Vant是一个轻量、可靠的移动端 Vue 组件库； 专用于开发O手机H5页面； 我们在使用它的同时，更要学习人家的组件封装和设计思想； Vant4官方文档 @安装与导入 安装Vant

创建工程 npm init vue@latest 工程名mymovie,后续选项中必须选择Vue-Router，其它皆No; 运行工程 搭建基本路由跳转 定义页面组件 src/views/FilmVi

抓取卖座电影数据 使用json-server搭建mock数据服务器 全局安装json-server 导入并暴露数据 mock/mockData.js 配置路由表 mock/mockRouter.jso

@页面跳转 定义详情页路由 router/index.js 点击电影条目跳转详情页 从详情页返回 @详情页导航条的动态透明 给标题元素添加ref 在详情渲染完毕时逮到标题栏元素 根据页面滚动距离调整标

样式处理 安装sass 在组件内使用sass的分支语法scss作为组件的样式编辑语言 设置必要的全局样式 src/assets/base.css 配置嵌套路由 配置目标： /film/nowPlayi

样式优化 宽高溢出视口校正 全局根布局与视口等宽等高，溢出区域使用滚动浏览； 注意配合box-sizing值border-box，即width/height包含padding与margin； src/