HTML5+CSS3开发移动端页面

前提知识：

1、能够独立根据设计稿进行整套项目的需求、剖析及其开发；

2、对项目开发流程需要有一个基本的了解；

3、可以灵活运用切图、重构、前端的知识对项目进行灵活控制。

开发步骤之需求分析：

1、确定项目主题，确定表现的形式；

2、设计稿图层分析，多页视觉放到一个网页文档，采取视觉差特效完成分页展示；

3、音乐不跟随翻页，位置固定，播放旋转，可暂停。

开发步骤之技术分析：

1、移动端项目，采用HTML 5作为项目的结构层；

2、分析网页呈现形势，直接采用CSS 3完成网页的表现层；

3、特效分析，采用CSS3完成主要特效，采用JavaScript控制交互；

4、背景音乐直接采取JavaScript控制audio的API进行控制；

5、直接采用原生态的JavaScript控制CSS 3实现翻页效果，放弃前端框架和类库。

开发步骤之性能优化分析：

1、项目作为移动端项目，尽可能简化结构层标签；

2、尽可能少用图片，尽量直接用CSS 3控制标签完成图片效果；

3、尽可能减小文件大小，压缩图片到无损最小值；

4、减少服务器请求次数，用原生态JavaScript代替Zepto等前端框架。

切图——>重构——>前端——>优化

1、减小图片文件，背景图片采用JPG格式，其他图片采用png24透明格式；

2、小型项目，直接采用手写HTML 5+CSS 3完成；

3、采用JavaScript控制HTML 5API完成前端特效；

结构层分析

整个结构层其实就是DIV再加上HTML5中audio新元素搭建起来，唯一需要记住的就是meta标签里面属性的含义，如：

1、<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

viewport 即可视区域

width=device-width 宽度是设备屏幕的宽度（像素）；

height=device-height 高度是设备屏幕的高度（像素）；

initial-scale 初始的缩放比例；

minimum-scale 允许用户缩放到的最小比例；

maximum-scale 允许用户缩放大的最大比例；

user-scalable 用户是否可以手动缩放。

2、<meta name=”format-detection” content=”telephone=no” />

telephone=no 就禁止了把数字转化为拨号链接！

3、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

它其实是指定浏览器按某种方式渲染。添加”chrome=1“将允许站点在使用了谷歌浏览器内嵌框架（Chrome Frame）的客户端渲染，对于没有使用的，则没有任何影响。

源代码：

<!doctype html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8" />

    <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-scalable=no" />

    <meta name="format-detection" content="telephone=no"/>

    <title>恭贺新春</title>

    <link rel="stylesheet" href="css/style.css" />

    <script src="js/script.js" type="text/javascript"></script>

</head>

<body>

    <div class="music">

        <img src="data:images/music_pointer.png" alt="" />

        <img id="music" src="data:images/music_disc.png" alt="" class="play" />

    </div>

    <div class="page" id="page1">

        <div class="bg"></div>

        <div class="p1_lantern">点击屏幕<br>开启好运2016</div>

        <div class="p1_imooc"></div>

        <div class="p1_words">2016年慕课网新年献</div>

    </div>

    <div class="page" id="page2">

        <div class="bg p2_bg_loading"></div>

        <div class="bg"></div>

        <div class="p2_circle"></div>

        <div class="p2_2016"></div>

    </div>

    <div class="page" id="page3">

        <div class="bg"></div>

        <div class="p3_logo"></div>

        <div class="p3_title"></div>

        <div class="p3_second"></div>

        <div class="p3_first"></div>

        <div class="p3_blessing"></div>

    </div>

    <audio autoplay="true">

        <source src="audio/happynewyear.mp3" type="audio/mpeg"></source>

    </audio>

</body>

</html>

样式层分析

样式层使用了大量的position属性作为盒子的布局属性，也利用了层级（z-index）避免该显示的盒子受到遮盖。关于CSS 3则定义了许多变形（transform）的动画（keyframes），然后利用animation调用属性，需要注意是其兼容性。让我觉得新颖的是vw和vh这两个数值，后来查看网上资料得知：

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

这两个数值和%的区别就是% 是相对于父元素的大小设定的比率，而vw和vh设定的大小只和视窗大小有关，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。

源代码：

/*all tag*/

* {margin:;padding:;border:none;font-size:.5625vw;font-family:"微软雅黑";}

html,body{height: %;overflow: hidden;}

.music{position:absolute;top: 3vh;right: 4vw;z-index: ;width: 15vw;height: 15vw;border: 4px solid #ef1639;border-radius: %;background: #fff;}

.music > img:first-of-type{

    position: absolute;

    top: %;

    right:2.5%;

    width: 28.421%;

    z-index: ;

}

.music > img:last-of-type{

    position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    width: %;

    z-index: ;

}

.music > img.play{

    -webkit-animation: music_disc 4s linear infinite ;

    -moz-animation: music_disc 4s linear infinite;

    -o-animation: music_disc 4s linear infinite;

    animation: music_disc 4s linear infinite;

}

@-webkit-keyframes music_disc{

    %{

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@--keyframes music_disc{

    %{

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@-ms-keyframes music_disc{

    %{

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@keyframes music_disc{

    %{

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

/* page */

.page{

    position: absolute;

    height:%;

    width: %;

}

.page > .bg {

    position:absolute;

    height:%;

    width:%;

    z-index: -;

}

/*page1*/

#page1{

    display: block;

}

#page1 > .bg{

    background: url("../images/p1_bg.jpg") no-repeat center center;

    background-size:%;

}

#page1 > .p1_lantern {

    position: absolute;

    color: #FFFFFF;

    top:-3.4%;

    right:;

    left:;

    margin: auto;

    background: url("../images/p1_lantern.png") no-repeat center bottom;

    background-size:%;

    width:45vw;

    height:.2vh;

    font-size:.506rem;

    padding-top:31vh;

    text-align: center;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -ms-box-sizing: border-box;

    -o-box-sizing: border-box;

    box-sizing: border-box;

}

#page1 > .p1_lantern:before{

    position: absolute;

    content:"";

    z-index: -;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    width: 30vw;

    height: 30vw;

    background: #d60b3b;

    opacity: .;

    border-radius: %;

    -webkit-box-shadow:   10vw 10vw #d60b3b;

    -moz-box-shadow:   10vw 10vw #d60b3b;

    -ms-box-shadow:   10vw 10vw #d60b3b;

    -o-box-shadow:   10vw 10vw #d60b3b;

    box-shadow:   10vw 10vw #d60b3b;

    -webkit-animation: p1_lantern .5s infinite alternate;

    --animation: p1_lantern .5s infinite alternate ;

    animation:  p1_lantern .5s infinite alternate;

}

@-webkit-keyframes p1_lantern{

    %{

        opacity: .;

        -webkit-transform: scale(.,.);

        transform: scale(.,.);

    }

    %{

        opacity: ;

    }

}

@keyframes p1_lantern{

    %{

        opacity: .;

        -webkit-transform: scale(.,.);

        transform: scale(.,.);

    }

    %{

        opacity: ;

    }

}

#page1 > .p1_imooc {

    position: absolute;

    right: ;

    bottom:9vh;

    left: ;

    margin: auto;

    background: url('../images/p1_imooc.png') no-repeat center center;

    background-size:% ;

    width:.656vw;

    height: .63vh;

}

#page1 > .p1_words {

    font-size:.134rem;

    position:absolute;

    right: ;

    bottom:48px;

    left: ;

    text-align: center;

    color: #;

}

/*page2*/

#page2{

    display: none;

    -webkit-transition: .5s;

    transition: .5s;

}

#page2.fadeOut{

    opacity: .;

    -webkit-transform: translate(,-%);

            transform: translate(,-%);

}

#page2 >  .p2_bg_loading{

    z-index: ;

    background: #ef1639;

    -webkit-animation: p2_bg_loading 1s linear forwards;

    animation: p2_bg_loading 1s linear forwards;

}

@-webkit-keyframes p2_bg_loading{

    %{opacity: ;}

    %{opacity: ;}

}

@keyframes p2_bg_loading{

    %{opacity: ;}

    %{opacity: ;}

}

#page2 > .bg{

    background: url("../images/p2_bg.jpg") no-repeat center center;

    background-size:%;

}

#page2 > .p2_circle {

    position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    background: url(../images/p2_circle_outer.png) no-repeat center center;

    background-size:% ;

    width: .375vw;

    height: .375vw;

    -webkit-animation: p2_circle_middle 1s infinite 3s alternate;

    --animation: p2_circle_middle 1s infinite 3s alternate ;

    animation:  p2_circle_middle 1s infinite 3s alternate;

}

@keyframes p2_circle_middle{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(720deg);

        transform: rotate(720deg);

    }

}

@-webkit-keyframes p2_circle_inner{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(-360deg);

        transform: rotate(-360deg);

    }

}

#page2 > .p2_circle:before{

        position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    background: url(../images/p2_circle_middle.png) no-repeat center center;

    background-size:% ;

    width: .625vw;

    height: .625vw;

    content: "";

    -webkit-animation: p2_circle_middle 1s infinite 2s alternate;

    --animation: p2_circle_middle 1s infinite 2s alternate ;

    animation:  p2_circle_middle 1s infinite 2s alternate;

}

@keyframes p2_circle_middle{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(720deg);

        transform: rotate(720deg);

    }

}

@-webkit-keyframes p2_circle_inner{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(720deg);

        transform: rotate(720deg);

    }

}

#page2 > .p2_circle:after {

    position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    border-radius: %;

    background: url(../images/p2_circle_inner.png) no-repeat center center;

    background-size:% ;

    width: .9375vw;

    height: .9375vw;

    content:"";

    -webkit-animation: p2_circle_inner 1s infinite 1s alternate;

    --animation: p2_circle_inner 1s infinite 1s alternate ;

    animation:  p2_circle_inner 1s infinite 1s alternate;

}

@keyframes p2_circle_inner{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(-1080deg);

        transform: rotate(-1080deg);

    }

}

@-webkit-keyframes p2_circle_inner{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(-1080deg);

        transform: rotate(-1080deg);

    }

}

#page2 > .p2_2016 {

    position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    background: url(../images/p2_2016.png) no-repeat center center;

    background-size:% ;

    width: .5vw;

    height: .24vh;

    content:"";

}

/*page3*/

#page3{

    display: none;

    -webkit-transition: .5s;

    transition: .5s;

}

#page3.fadeIn{

    -webkit-transform: translate(,-%);

    transform: translate(,-%);

}

#page3 > .bg{

    background: url("../images/p3_bg.jpg") no-repeat center center;

    background-size:%;

}

#page3 > .p3_logo{

    width: .6875vw;

    height: .327vh;

    position: absolute;

    top: .82vh;

    right: ;

    left: ;

    margin: auto;

    background: url(../images/p3_logo.png) no-repeat center center;

    background-size:% ;

}

#page3 > .p3_title {

    width: .125vw;

    height: 50vh;

    position: absolute;

    top: 21vh;

    right: ;

    left: ;

    margin: auto;

    background: url(../images/p3_title.png) no-repeat center center;

    background-size:% ;

}

#page3 > .p3_second {

    width: .8125vw;

    height: .652vh;

    position: absolute;

    top: .48vh;

    left: .75vw;

    margin: auto;

    background: url(../images/p3_couplet_second.png) no-repeat center center;

    background-size:% ;

}

#page3 > .p3_first {

    width: .8125vw;

    height: .652vh;

    position: absolute;

    top: .48vh;

    right: .75vw;

    margin: auto;

    background: url(../images/p3_couplet_first.png) no-repeat center center;

    background-size:% ;

}

#page3 > .p3_blessing {

    width: 32vw;

    height: 32vw;

    position: absolute;

    right: ;

    left: ;

    bottom: 10vh;

    margin: auto;

    border-radius: %;

    background: url(../images/p3_blessing.png) no-repeat center center;

    background-size:% ;

    -webkit-animation: p3_blessing 2s linear infinite;

    --animation: p3_blessing 2s linear infinite ;

    animation:  p3_blessing 2s linear infinite;

}

@keyframes p3_blessing{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@-webkit-keyframes p3_blessing{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

行为层分析

传统的行为交互开发步骤，首先获取元素节点，接着为各个节点绑定一个监听事件

window.onload = function(){

    var music = document.getElementById('music');

    var audio = document.getElementsByTagName('audio')[];

    var page1 = document.getElementById('page1');

    var page2 = document.getElementById('page2');

    var page3 = document.getElementById('page3');

    //当音乐播放完停止时候，自动停止光盘旋转效果

    audio.addEventListener("ended",function(event){

        music.setAttribute("class","");

    },false);

    music.addEventListener("touchstart",function(event){

        if(audio.paused){

            audio.play();

            this.setAttribute("class","play");

        }else{

            audio.pause();

            this.setAttribute("class","");

        }

    })

    page1.addEventListener("touchstart",function(event){

        page1.style.display = "none";

        page2.style.display = "block";

        page3.style.display = "block";

        page3.style.top = "100%";

        setTimeout(function(){

            page2.setAttribute("class","page fadeOut");

            page3.setAttribute("class","page fadeIn");

        },);

    },false);

}

在线演示地址

HTML5+CSS3开发移动端页面的更多相关文章

轻松使用px为单位开发移动端页面
研究移动端页面已经有许久了,一直执着于rem来开发,不谈性能怎么样,单从工作效率上看影响了不少,首先要固定设计稿的宽度,一般都是固定在640px,然后在根据根目录的字体大小来计算出每个元素的rem的值 ...
HTML5/CSS3 第三章页面布局
页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...
用css3解决移动端页面自适应横屏竖屏的思考
之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会这里举的样例还是平时 ...
HTML5/CSS3开发工具
1.谷歌Google Web Designer https://www.google.com/webdesigner/ 这个工具不能在xp上运行,可以在win7 win8上运行 http://www. ...
HTML5+css3 的开心网游戏页面
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素——什么是像素像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
html5/css3响应式页面开发总结
一,自适应和响应式的区别自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)
一.拉近我们的距离我想,很多人会问,如今IE6还占据颇多份额的中国,html5.css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图: ...
Html5+css3+angularjs+jquery+webAPi 开发手机web（一）
前言随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...

随机推荐

centos崩溃后如何修复
首先看能不能进单用户模式,能进去,就用mount -o remount,rw / 重置成可写的. 不能进单用户模式,就进入光盘救援模式,进去挂载了系统,这时候通常是必要的动态静态库出了问题,先应该做的 ...
服务器重启后Jenkins项目部分丢失问题解决方法
1.进入webapps/jenkins/WEB-INF目录下,vi web.xml 2.修改 HUDSON_HOME下的value为/root/.jenkins 3.重启Jenkins:http:/ ...
APP高级抓包
1.fiddler的证书安装问题时密码问题问题:我手机下载了fiddler证书从设置里面安装证书可是需要输入密码我没有设置过密码不知道密码是什么请问有人遇到过这样的问题的?求解决方法因为 ...
signed char型内存位bit表示
signed char型内存 80 81 82 83 84 85 86 87 88 89 8a 8b 8c 8d 8e 8f 90 91 92 93 94 95 96 97 98 99 9a 9b 9 ...
【linux】虚拟机内装Linux系统的ssh访问
一般在虚拟机内安装一个Linux系统,虚拟机网络设置为桥接后,Linux系统会在安装的过程中自动设置其为dhcp配置,会给其随机分配一个ip,这个ip可以用命令 "ifconfig" ...
GIT 恢复单个文件到历史版本
首先查看该文件的历史版本信息:git log <file> 恢复该文件到某个历史版本:git reset 版本号 <file> 检出改文件到工作区:git checkout - ...
九度oj题目1019：简单计算器
题目1019:简单计算器时间限制:1 秒内存限制:32 兆特殊判题:否提交:6346 解决:2334 题目描述: 读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达 ...
Xshell关闭导致jar服务终止，使Jar在CentOS后台运行
环境:Xsehll6,CentOS7 在项目文件夹新建一个runjar.sh 在sh中写入(举例说明) nohup java -Dfile.encoding=UTF- -jar fin-mgmt-.j ...
step3: 创建jobbole爬虫
scrapy startproject Redbacktestcd Redbacktest 创建jobbole爬虫 scrapy genspider jobbole2 blog.jobbole.com ...
WPF 资源字典
使用好处:存储需要被本地话的内容(错误消息字符串等,实现软编码),减少重复的代码,重用样式,实现多个项目之间的共享资源;修改一个地方所有引用的地方都会被修改,方便统一风格; 使用方法,归纳起来主要有下 ...

HTML5+CSS3开发移动端页面

HTML5+CSS3开发移动端页面的更多相关文章

随机推荐

热门专题