【基础】小型移动项目笔记

学习慕课网html5+css3笔记

能够独立根据设计稿进行整套项目的需求，剖析及其开发
对项目开发流程需要有一个基本的 了解
可以灵活 运用切图，重构，前端的知识对项目进行灵活的控制。

需求分析

项目主题

单页面的弹幕
欢快的 三个页面 多页视觉放在一个网页文档 采用视觉差特效完成分页展示
音乐不跟随翻页，位置固定，播放旋转，可暂停。
需求的沟通与确认。

开发技能分析

移动端项目，采用html5作为项目的结构层
分析网页呈现形式，直接采用css3完成网页的 表现层
特效分析，采用css3完成主要特效，采用JavaScript 控制交互
背景音乐 js 控制audio
直接采用js控制翻页

性能优化

项目为移动端项目，尽可能简化结构层标签
尽可能少用图片 尽量直接用css3控制标签完成图片
尽可能减小文件大小，压缩图片无损最小值
减少服务器请求次数，用原生js代替zepto等前端框架

切图 重构 前端 优化

减少图片文件 背景图片采用jpg格式，其他图片才采用png24透明
小新项目 ，直接 手写 html5+css3完成
采用JavaScript控制html5api 完成特效
测试并优化整体网站性能 ，服务器测试

 

background-size:100%; 背景随浏览器大小变换

背景图片层级设低，z-index:-1;

background:url(../images/p1_lantern.png) no-repeat center bottom; 上下居中 放
在低端。

box-sizing:border-box;

最外层div page 设置 height:100%;
position:absolute; 三个div 都重叠 在一起。

编辑那个时，把其他的都隐藏。

表现层

对于指针图片 层级设置 z-index:1;

transform:rotate(-360deg); 每次旋转的角度都不一样

click 有0.3秒延时

page3.style.top = "100%"; 到-100%；

视口概念

8px切图法

meta 宽度 网页宽度=设备宽度 初始值是1 用户的缩放
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-
scale=1,maximum-scale=1,user-scale=no">

在手机中 数字变成拨号链接
数字不变成超链阶 <meta name="format-detection" content="telephone=no">

强制以谷歌内核 浏览器显示
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-
scale=1,maximum-scale=1,user-scale=no">
<meta name="format-detection" content="telephone=no">

项目网址：imooc.com/activity/project1