序
     移动端的web网页使用的是响应式设计，但一般我们看到的网站页面都是跳转刷新得到的，比如通过点击一个menu后进入到另一个页面
今天来说下是移动端的单页面的布局。单页面就是一切操作和布局都是在一个页面下进行 不需要页面跳转 ，再通俗的说就是类似于平常的选项卡
但是他又比选项卡要复杂一点 因为他是在手机端 并且当做是一个页面

单页面的作用以及优势：
    1.嵌套到native里实现app的混合开发
    2.数据量小的页面用单页面便于开发和维护
    3.无需跳转页面响应更快

Demo效果

扫描二维码 ，或直接用手机访问http://www.feman.cn/h5/html5mobileLayout.html

代码实践

1 页面html结构

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
  6.     <title>html5 移动端单页面布局</title>
  7. </head>
  8. <body>
  9.     <!--页面主体部分-->
  10. <div class="main">
  11.     <section class="curr">
  12.         <img src="https://d13yacurqjgara.cloudfront.net/users/136389/screenshots/1732382/dashboardfash_perspective_1x.png" alt="">
  13.         <img src="https://d13yacurqjgara.cloudfront.net/users/1061/screenshots/678418/pixelplant_ipad.jpg" alt="">
  14.         <img src="https://d13yacurqjgara.cloudfront.net/users/255/screenshots/1332988/blog_1x.png" alt="">
  15.         <img src="https://d13yacurqjgara.cloudfront.net/users/188162/screenshots/1143662/satigo_website_1x.jpg" alt="">
  16.     </section>
  17.     <section  class="hide">
  18.         <img src="https://d13yacurqjgara.cloudfront.net/users/4404/screenshots/757400/css3.jpg" alt="">
  19.         <img src="https://d13yacurqjgara.cloudfront.net/users/1061/screenshots/620200/camerastore.jpg" alt="">
  20.         <img src="https://d13yacurqjgara.cloudfront.net/users/269922/screenshots/1008644/files.jpg" alt="">
  21.         <img src="https://d13yacurqjgara.cloudfront.net/users/12787/screenshots/1243088/dribbblemini_1x.png" alt="">
  22.     </section>
  23.     <section class="hide">
  24.         <img src="https://d13yacurqjgara.cloudfront.net/users/84550/screenshots/1236264/clip.png" alt="">
  25.         <img src="https://d13yacurqjgara.cloudfront.net/users/2158/screenshots/377946/hra.png" alt="">
  26.     </section>
  27.     <section class="hide">
  28.         <img src="https://d13yacurqjgara.cloudfront.net/users/114529/screenshots/534146/scienza2.jpeg" alt="">
  29.         <img src="https://d13yacurqjgara.cloudfront.net/users/33345/screenshots/1150666/zen-of-ruby_1x.png" alt="">
  30.         <img src="https://d13yacurqjgara.cloudfront.net/users/33345/screenshots/965067/company-info_1x.png" alt="">
  31.     </section>
  32. </div>
  33. <!--页面菜单按钮-->
  34. <div class="menu">
  35.     <ul>
  36.         <li class="curr">Html5</li>
  37.         <li>Css3</li>
  38.         <li>Javascript</li>
  39.         <li>About</li>
  40.     </ul>
  41. </div>
  42. <script src="js/zepto.js"></script>
  43. </body>
  44. </html>

注：页面图片均来自dribbble

demo里面我用的全是图片静态展示 你可以添加自己的结构或动态程序
页面结构跟我们平常写的选项卡没什么区别，接下来我们用css装饰这个结构让他在手机上呈现出页面的效果

2 css

  1. <style>
  2. /*初始化css*/
  3. *{ margin:0; padding: 0;}
  4. li{ list-style-type: none;}
  5. img{ max-width: 100%; display: block; margin: 0 auto 5px auto;}
  6. html,body{ width: 100%; height: 100%; background: #e4e4e4;
  7.     -webkit-tap-highlight-color: rgba(88,44,22,0.9);
  8.     -webkit-touch-callout: none;
  9.     -webkit-user-select: none;
  10.  
  11. }
  12. /*主体页面样式*/
  13. .main{ width: 100%; height: auto; position: relative;}
  14. .main section{ width: 100%; height: auto; position:absolute; left: 0; top:0; }
  15. .main section.hide{ display: none;}
  16. .main section.curr{ display: block;}
  17.  
  18. /*菜单样式*/
  19. .menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;}
  20. .menu.menucurr{ background: #ea4c88;}
  21. .menu ul{width: 100%; height: 100%; }
  22. .menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;}
  23. .menu li.curr{ background: #ea4c88;}
  24. .menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}
  25. </style>

移动端的页面多数情况下用百分比或者媒体查询来设置页面的宽高度 这样会达到响应的效果
这里解释几点
1.-webkit-tap-highlight-color: rgba(0,0,0,0);也可以写成-webkit-tap-highlight-color: transparent; 去掉点击时高光显示 你也可以更改里面的参数 达到你想要的点击显示高光效果
2.-webkit-touch-callout: none; //长按页面时不触发系统菜单
3.-webkit-user-select: none; //长按无法选择文本 这个很有用 一般如果body里面没有添加这个属性的手机页面 当我们长按某段文字的时候就会出现选中这段文字弹出“复制，全选”等选项 但在webapp开发里 这个就显得很不友好 所以尤其是在webapp开发的时候 为了达到与native一样的真实效果 必须的添加
4.html,body{ width: 100%; height: 100%;} 这个是整个文档的初始化宽高度 后面的子级都是按照这个数据设置
5.main和子级的height都设置为auto 你也可以不用设 但如果你的页面是允许滚动的话最好还是要设一下
6.我们把menu使用固定定位到页面底部 你也可以把他定位在顶部 或任何你想定位的地方
7.menu 里面的tab我们使用的是百分比分配 因为有border-right所以不能很准确的分配多少 这个应该会有什么更精准的方法平均分配 待研究 (这个已解决 用css3的display:flex 可以实现平分的效果)

3 js

  1. <script>
  2.     $(function(){
  3.         $(".menu li").each(function(index){
  4.             $(this).tap(function(){
  5.                 $(this).addClass("curr").siblings().removeClass("curr");
  6.                 $(".main section").eq(index).show().siblings().hide();
  7.                 if(index==3){
  8.                     $(".menu").addClass("menucurr");
  9.                 }else{
  10.                     $(".menu").removeClass("menucurr");
  11.                 }
  12.             })
  13.  
  14.         })
  15.     })
  16. </script>

引用的框架是zepto.js 目前移动开发比较流行的js框架 zepto的语法跟jquery是相通的 所以可以按照jquery的写法编写
　　这里的点击menu事件不是使用click而是tap 这是zepto为移动端专门编写的一个点击方法 确切的说应该叫轻触 他比click的点击速度要快 使用的是touch事件 这个在默认的zepto里面是没有的 需要把touch这个模块儿添加进来才可使用tap

这样一个移动端的单页面就完成了

     这是个比较简单的单页面

     根据这个思维还可以更灵活的编写一些动态的并且更绚丽的页面！

html5 移动端单页面布局的更多相关文章

  1. h5单页面布局

    前段时间做了一个PC端单页面应用 GitHub因为项目开始的比较仓促,加上本人前端经验特别少,虽然项目大体完成了,但是页面布局确成立它的硬伤...为了填补心里落差,专门做了一个h5的单页面布局,代码很 ...

  2. html5: table表格与页面布局整理

    传统表格布局之table标签排版总结:   默认样式: <style> table { max-width: 800px; border-spacing: 2px; border-coll ...

  3. 移动端html页面布局

    记录一下: ---------- 如果设计稿尺寸为 : 96px: 1. rem html{ font-size:62.5%; } 的情况下 : 4.8rem: 2. rem html{ font-s ...

  4. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  5. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  6. 移动端WEB页面

    百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...

  7. H5单页面架构：requirejs + angular + angular-route

    说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的 ...

  8. 前端单页面富应用(SPA)的实现

    一. 什么是单页面富应用? 单页面应用:Single Page Application 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进.后退等机制被破坏等问题.并且页面访问会被浏览器保 ...

  9. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

随机推荐

  1. 【Android】cocos2d-x-3.1.1环境搭建与创建工程( Win7 32位系统)

    参考资料: http://blog.csdn.net/wxc237786026/article/details/32907079 1.环境搭建 2.创建工程 2.1 VS2012运行 2.2 Andr ...

  2. 也可以使用如下命令更改您的默认 Shell

    也可以使用如下命令更改您的默认 Shell chsh -s /bin/zsh (需要输入您的密码)

  3. Reactor构架模式

    http://www.cnblogs.com/hzbook/archive/2012/07/19/2599698.html Reactor框架是ACE各个框架中最基础的一个框架,其他框架都或多或少地用 ...

  4. Native App执行JS

    iOS: - (void)webViewDidFinishLoad:(UIWebView *)webView{        //js方法名+参数    NSString* jsCode = [NSS ...

  5. Javacript中(function(){})() 与 (function(){}()) 区别 {转}

    这个问题可以从不同的角度来看,但从结果上来说 :他们是一样的.首先,如果从AST(抽象语法树)的角度来看,两者的AST是一模一样的,最终结果都是一次函数调用.因此,就解析器产生的结果论而言,两者是没有 ...

  6. Sqli-labs less 64

    Less-64 此处的sql语句为 $sql="SELECT * FROM security.users WHERE id=(($id)) LIMIT 0,1"; 示例payloa ...

  7. allow_url_include和allow_url_fopen

    allow_url_fopen没什么好说的,主要是allow_url_include 从PHP5.2开始allow_url_include就默认为Off了,而allow_url_fopen一直是On的 ...

  8. HDU 4588 Count The Carries（找规律，模拟）

    题目 大意: 求二进制的a加到b的进位数. 思路: 列出前几个2进制,找规律模拟. #include <stdio.h> #include <iostream> #includ ...

  9. iOS-xib(自定义UITableViewCell)

    1.创建一个自定义的xib

  10. Cygwin,Mingw

    MinGW vs Cygwin MinGW是Minimalistic GNU for Windows的缩写,也就是Win版的GCC. Cygwin则是全面模拟了Linux的接口,提供给运行在它上面的的 ...