HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本结构</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container" id="container">
<header id="header">头部</header>
<section id="section">
<!--一级页面开始-->
<div id="tab1">第一页
<a href="#list1">点我跳向第一页的二级页面</a>
<!-- <a href="c.html">点我</a> -->
</div>
<div id="tab2">第二页
<a href="#list2">点我跳向第二页的二级页面</a>
</div>
<div id="tab3">第三页
<a href="#list3">点我跳向第三页的二级页面</a>
</div>
<div id="tab4">第四页
<a href="#list4">点我跳向第四页的二级页面</a>
</div>
<!--一级页面结束-->
<!--二级页面开始-->
<div id="list1">
我是第一页的二级页面的内容
<a href="#content1">点我跳向第一页的三级页面</a>
</div>
<div id="list2">
我是第二页的二级页面的内容
<a href="#content2">点我跳向第二页的三级页面</a>
</div>
<div id="list3">
我是第三页的二级页面的内容
<a href="#content3">点我跳向第三页的三级页面</a>
</div>
<div id="list4">
我是第四页的二级页面的内容
<a href="#content4">点我跳向第四页的三级页面</a>
</div>
<!--二级页面结束-->

<!--三级页面开始-->
<div id="content1">
我是第一页的三级页面的内容
</div>
<div id="content2">
我是第二页的三级页面的内容
</div>
<div id="content3">
我是第三页的三级页面的内容
</div>
<div id="content4">
我是第四页的三级页面的内容
</div>
<!--三级页面结束-->
</section>
<footer id="footer">
<nav>
<a href="#tab1">第一个</a>
<a href="#tab2">第二个</a>
<a href="#tab3">第三个</a>
<a href="#tab4">第四个</a>
</nav>
</footer>
</div>
<script src="js/zepto.js"></script>
<script src="js/index.js"></script>
</body>
</html>

JS文件

①index.js

$(function(){
$("#container").on("click","a[href]",function(e){
e.preventDefault();//取消a的默认行为 js阻止链接跳转
//获取点击的那个tab的id值
var id=$(this).attr("href");
//console.log(id);
$(id).css({
'-webkit-transform':'translate3d(0,0,0)',
'-webkit-transition':'transform 300ms' //设置动画时间
}).siblings().css({
//"left","100%"
'-webkit-transform':'translate3d(100%,0,0)',
'-webkit-transition':'transform 300ms' //设置动画时间
});
})
})

②引入zepto.min.js

CSS文件

@import "m_reset.css";

//封装的内容
.wh(@w,@h){width:@w; height:@h;}
.b(@b){background: @b;}
.lh(@lh){line-height: @lh;}
.r{position: relative;}
.a{position: absolute;}
.f{position: fixed;}
.box(@dir:vertical){
display: -webkit-box;
-webkit-box-orient:@dir;
-webkit-box-flex:1;
}

html{font-size: 62.5%;}
.container,html,body{.wh(100%,100%)}
.container{
.wh(100%,100%);
display:-webkit-box;//定义一个弹性盒
-webkit-box-orient:vertical;//将弹性盒设置为垂直
header{
.wh(100%,4rem);
.b(red);
//box-shadow: 0 1px 1px rbga(0,0,0,0.8);
text-align: center;
.lh(4rem);
color:#fff;
}
}
//主题部分
section{
-webkit-box-flex:1;
.wh(100%,100%);
//overflow:scroll;
overflow:hidden;
.r;
//text-align: center;
//-webkit-box-pack:center;
//-webkit-box-align:center;
&>div{
.wh(100%,100%);
.a;
.b(#f1f0f6);
//left:100%;
-webkit-transform:translate3d(100%,0,0);
//默认显示第一页
&:nth-child(1){
//left: 0;
-webkit-transform:translate3d(0,0,0);
}
}
}
footer{
.wh(100%,4rem);
.b(yellow);
nav{
//display: -webkit-box;
//height: 50px;
.box(horizontal);
a{
display: block;
-webkit-box-flex: 1;
text-align: center;
.lh(4rem);
color: black;
}
}
}

APP模板框架的更多相关文章

  1. 整合springboot（app后台框架搭建四）

    springboot可以说是为了适用SOA服务出现,一方面,极大的简便了配置,加速了开发速度:第二方面,也是一个嵌入式的web服务,通过jar包运行就是一个web服务: 还有提供了很多metric,i ...

  2. Framework7 – 赞！功能齐全的 iOS7 App 前端框架

    Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...

  3. App技术框架

    一.App技术框架的类型 图1 三种App技术框架之间的关系 目前App的技术框架基本分为三种(图1): (1)Native App:互动型,iOS.Android.WP各一套,而且要维护历史版本,要 ...

  4. 你得知道这3个最基础的APP技术框架

    出处:优设网作者:信籽链接:http://www.uisdc.com/3-basic-app-technical-framework 信籽(手淘设计师):不知道大家有没有遇到过这种情景,当你做好一个设 ...

  5. 一个超级简单的HTML模板框架源代码以及使用示例

    HTML模板框架源代码 var HtmlTemplate = (function () { function HtmlTemplate(htmlSource) { this.htmlSource = ...

  6. springmvc跨域+token验证（app后台框架搭建二）

    这是app后台框架搭建的第二课,主要针对app应用是跨域的运用,讲解怎么配置跨域服务:其次讲解怎么进行token验证,通过拦截器设置token验证和把token设置到http报文中.主要有如下:   ...

  7. 通过实例介绍Android App自动化测试框架--Unittest

    1.为什么需要使用框架实现自动化测试 作为测试工程师,可能在代码能力上相比开发工程师要弱一点,所以我们在写脚本的时候就会相对容易的碰到更多的问题,如果有一个成熟的框架供给我们使用的话,可以帮助我们避免 ...

  8. APP自动化框架LazyAndroid使用手册（2）--元素自动抓取

    作者:黄书力 概述 前面的一篇博文简要介绍了安卓自动化测试框架LazyAndroid的组成结构和基本功能,本文将详细描述此框架中元素自动抓取工具lazy-uiautomaterviewer的使用方法. ...

  9. Android特效专辑(四)——APP主页框架TabHost绑定ViewPager的替换者TabLayout

    Android特效专辑(四)--APP主页框架TabHost绑定ViewPager的替换者TabLayout 现在很多app都在追求简单明了,功能又要强大,不过我还是喜欢之前的app风格,就是TabH ...

随机推荐

  1. cocos2d-x-2.2.0_win7+vs2010

    cocos2d-x-2.2.0_win7+vs2010搭建_eclipse+ndk-r9+cygwin搭建_教程以及编译问题汇总 声明:我是才用c/c++和cocos2d-x的如果有错误欢迎指出 文章 ...

  2. PHP的curl实现get，post 和 cookie（几个实例）

    类似于dreamhost这类主机服务商,是显示fopen的使用 的.使用php的curl可以实现支持FTP.FTPS.HTTP HTPPS SCP SFTP TFTP TELNET DICT FILE ...

  3. EasyUI tree扩展获取实心节点

    <script type="text/javascript"> //扩展 获得tree 的实心节点 $(function(){ $.extend($.fn.tree.m ...

  4. 新手教程：wordpress博客安装图文教导

    每一个建立博客的新朋友,当准备好域名和主机后,不知道怎么安装博客,我刚建立昆明SEO的时候,也费了很多时间,终于搭建成功,下面是我一步一步实战得来的总结. 第一步:域名解析,根据域名注册商不同,解析操 ...

  5. 关于前端JS模块加载器实现的一些细节

    最近工作需要,实现一个特定环境的模块加载方案,实现过程中有一些技术细节不解,便参考 了一些项目的api设计约定与实现,记录下来备忘. 本文不探讨为什么实现模块化,以及模块化相关的规范,直接考虑一些技术 ...

  6. oracle中backup模式

    在数据库打开的情况下备份(归档模式),把表空间或者数据库置于backup 模式下, 如: SQL> alter database  begin  backup; Database altered ...

  7. 最近修bug的一点感悟

    写在前面话 项目从13年1月份,现场开发,4月中旬,项目开发接近尾声,三个开发,留两个在现场,我被调回公司,5月份现场一同事离职,只有一个同事在开发,结果PM想让这一个同事承担余下的开发和bug工作, ...

  8. 办理滑铁卢大学(本科)学历认证『微信171922772』UW学位证成绩单使馆认证University of Waterloo

    办理滑铁卢大学(本科)学历认证『微信171922772』UW学位证成绩单使馆认证University of Waterloo QQ/微信171922772办理毕业证成绩单.真实使馆及教育部学历认证★诚 ...

  9. 浅谈Web前端浏览器兼容问题

    对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同 ...

  10. iOS开发-OC语言 (四)数组

    知识点 1.NSArray 2.NSMutableArray 1.数组的基本用法: 2.数组的遍历 3.数组排序 ===========   NSArray  不可变数组  ============= ...