继上一篇：一步一步构建手机WebApp开发——环境搭建篇过后，我相信很多朋友都想看看实战案例，这一次的教程是页面布局篇，先上图：

　　

　　如上图所示，此篇教程便是教初学者如何快速布局这样的页面。废话少说，直接上代码

注意：此教程是接上一篇教程，也就是所有的内容是直接从body开始写，当然，也会贴出所有代码给大家。

第一步：框架的布局及幻灯片的布局（Html)

　　① 如上图所示，我们应该准备以下容器，方便填充内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--页面容器-->
    < div  class="page-container min-height">
        <!--头部-->
        < div  id="head">
    </ div >
        <!--幻灯片-->
        < div  id="banner" class="position-relative">
        </ div >
        <!--主体-->
        < div  id="main">
            <!--方块菜单-->
            < div  class="menu min-height">
            </ div >
            <!--描述-->
            < div  class="copyright clear">
            </ div >
        </ div >
        <!--页脚-->
        < div  id="footer" class="position-fixed">
        </ div >
    </ div >

　　② 由于此模板没有头部，所有直接从幻灯片div开始写起，准备三张图片，然后通过<ul>，<li>布局

　　

1
2
3
4
5
6
7
8
<!--幻灯片-->
         < div  id="banner" class="position-relative">
             < ul >
                 < li >< a  href="#" title="">< img  src="imgs/banner1.jpg" alt="" title="" /></ a ></ li >
                 < li >< a  href="#" title="">< img  src="imgs/banner2.jpg" alt="" title="" /></ a ></ li >
                 < li >< a  href="#" title="">< img  src="imgs/banner3.jpg" alt="" title="" /></ a ></ li >
             </ ul >
         </ div >

　　

Common.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
/* 禁用iPhone中Safari的字号自动调整 */
html { -webkit-text-size-adjust:  none ; }
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  display :  block ; }
/* 设置图片视频等自适应调整 */
img {  max-width :  100% ;  height :  auto ;  width :  auto \ 9 ;  /* ie8 */  }
.video  embed , .video object, .video iframe {  width :  100% ;  height :  auto ; }
/* 公共库 */
a {  text-decoration :  none ;  cursor :  pointer ; }
li {  list-style :  none ; }
a {  text-decoration :  none ;  color :  #555756 ; }
a:hover {  color :  #141414 ;  text-decoration :  none ; }
a img {  border :  none ; }
a > img {  vertical-align :  bottom ; }
.min-height {  min-height :  0 ;  height :  auto ;  _height :  0 ;  overflow :  hidden ;  _overflow :  visible ; }
.float- left  {  float :  left ; }
.float- right  {  float :  right ; }
.clear {  clear :  both ; }
.position- absolute  {  position :  absolute ; }
.position- relative  {  position :  relative ; }
.position- fixed  {  position :  fixed ; }
.overflow- hidden  {  overflow :  hidden ; }
.display-inline- block  {  display : inline- block ; }
/* 页面主代码 */
body {  font :  14px / 22px  "Georgia" ,  Helvetica ,  Arial ,  sans-serif ;  background :  #fff ;  color :  #595959 ; overflow-y:  scroll ; overflow-x:  hidden ; *overflow-y:  auto  !important ; }
/*设置容器最大宽度为640*/
.page-container {  max-width :  640px ;  margin :  0  auto ;  padding-bottom :  60px ; }
/*幻灯片*/
#banner {  width :  100% ;  overflow :  hidden ;  position :  relative ; }
#banner ul li {  display :  none ;  float :  left ; }
#banner ul li:first-of-type {  display :  block ; }
/* 方块菜单 */
.menu a {  display :  block ;  float :  left ;  width :  23.125% ;  height :  80px ;  margin :  5px  0  0  1.5% ;  color :  #fff ; }
.menu a span {  padding :  5px ; }
/*由于第一个垮了两个方块，也就是 23.125%*2+1.5%=47.75%，其中1.5%是一个缝隙（margin-left)*/
.menu a:nth-child( 1 ) {  background :  #666666 ;  width :  47.75% ;  height :  165px ; }
.menu a:nth-child( 2 ) {  background :  #1673d2 ; }
.menu a:nth-child( 3 ) {  background :  #008a00 ; }
.menu a:nth-child( 4 ) {  background :  #8d0196 ;  width :  47.75% ; }
.menu a:nth-child( 5 ) {  background :  #59d5e6 ; }
.menu a:nth-child( 6 ) {  background :  #fd5c04 ; }
.menu a:nth-child( 7 ) {  background :  #e86eb2 ; }
.menu a:nth-child( 8 ) {  background :  #666666 ; }
/* 版权 */
.copyright {  padding :  8px ;  text-align :  center ;  color :  #444 ; }
/* 底部 */
#footer {  bottom :  0 ;  height :  40px ;  width :  100% ;  z-index :  101 ;  background :  #333333 ; }
#footer ul li {  width :  33% ;  height :  40px ;  margin :  0  0  0  0.25% ;  float :  left ;  line-height :  40px ;  text-align :  center ; }
#footer ul li a {  color :  #fff ; }
#footer ul li {  background :  #ccc ; }
/*响应式媒体查询，*/
/*
  * -----------------------------------------
  *  320 ~ 480
  * -----------------------------------------
  */
@media only  screen  and ( min-width :  320px ) and ( max-width :  480px ) {
}
/*
  * -----------------------------------------
  *  321 ~   宽大于321的设备
  * -----------------------------------------
  */
@media only  screen  and ( min-width :  321px ) {
}
/*
  * -----------------------------------------
  *  ~ 320  宽小于320的设备
  * -----------------------------------------
  */
@media only  screen  and ( max-width :  320px ) {
}
/*
  * -----------------------------------------
  *  ~ 480  宽小于480的设备
  * -----------------------------------------
  */
@media only  screen  and ( max-width :  480px ) {
}
/* medium screens (excludes iPad & iPhone) */
/*
  * -----------------------------------------
  * 481 ~ 767  宽大于480且小于767的iPad和iPhone
  * -----------------------------------------
  */
@media only  screen  and ( min-width :  481px ) and ( max-width :  767px ) {
}
/* ipads (portrait and landscape) */
/*
  * -----------------------------------------
  * 768 ~ 1024  宽大于480且小于1024的iPad和iPhone
  * -----------------------------------------
  */
@media only  screen  and (min-device- width :  768px ) and (max-device- width :  1024px ) {
}
/* ipads (landscape) */
/*
  * -----------------------------------------
  * 768 ~ 1024  宽大于480且小于1024的iPad和iPhone
  * -----------------------------------------
  */
@media only  screen  and (min-device- width :  768px ) and (max-device- width :  1024px ) and (orientation:  landscape ) {
}
/* ipads (portrait) */
/*
  * -----------------------------------------
  * 768 ~ 1024  宽大于480且小于1024的iPad和iPhone
  * -----------------------------------------
  */
@media only  screen  and (min-device- width :  768px ) and (max-device- width :  1024px ) and (orientation:  portrait ) {
}
/*
  * -----------------------------------------
  * 1444 ~ 1824  宽大于1444且小于1824的设备
  * -----------------------------------------
  */
@media only  screen  and ( min-width :  1444px ) and ( max-width :  1824px ) {
}
/*
  * -----------------------------------------
  * 1824 ~  宽大于1824的设备
  * -----------------------------------------
  */
@media only  screen  and ( min-width :  1824px ) {
}
/*
  * -----------------------------------------
  * 2224 ~  宽大于2224的设备
  * -----------------------------------------
  */
@media only  screen  and ( min-width :  2224px ) {
}
/* iphone 4 and high pixel ratio (1.5+) devices */
/*
  * -----------------------------------------
  * iphone4 ~
  * -----------------------------------------
  */
@media only  screen  and (-webkit-min-device-pixel-ratio :  1.5 ), only  screen  and (min-device-pixel-ratio :  1.5 ) {
}
/* iphone 4 and higher pixel ratio (2+) devices (retina) */
@media only  screen  and (-webkit-min-device-pixel-ratio:  2 ), only  screen  and (min-device-pixel-ratio:  2 ) {
}

　　Common.Js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
//页面特效，这里用到jquery最简单的插件写法
$.extend({
     /******************************* 手机幻灯片特效开始***************************/
     banner:  function  (ele) {
         // 1.0 获取幻灯片的个数
         var  imgSize = $(ele).find( "img" ).size();
         // 2.0 获取幻灯片的宽度和宽度
         var  imgWidth = $(ele).width();
         var  imgHeight = $(ele).height();
         // 3.0 设置 <ul> 标签的宽度为：个数*单个宽度，及阻止li继承父类，这样为了让<li>有足够的空间浮动成行排列，并显示所有幻灯片
         $(ele).children( "ul" ).width(imgSize * imgWidth).children( "li" ).width(imgWidth).show();
         // 4.0 根据幻灯片个数生成按钮
         // 4.0.1 创建按钮容器并添加样式
         $btn = $( "<div class='btn position-absolute'></div>" );
         $btn.css({
             "z-index" :  "100" ,
             "width" :  "100%" ,
             "height" :  "20px" ,
             "left" :  "0" ,
             "top" : (imgHeight - 20) +  "px" ,
             "line-height" :  "20px" ,
             "text-align" :  "center"
         });
         // 4.0.2 生成按钮，特别声明：以下的样式大可在css文件中定义，在这里我就不定义了。
         for  ( var  i = 0; i < imgSize; i++) {
             $dot = $( "<span class='dot display-inline-block'></span>" );
             $dot.css({
                 "width" :  "12px" ,
                 "height" :  "12px" ,
                 "border-radius" :  "50%" ,
                 "background" :  "#fff" ,
                 "margin-right" :  "8px"
             });
             $btn.append($dot);
         }
         // 4.0.3 设置第一个选中，选中样式为active，
         $btn.find( "span:eq(0)" ).attr( "id" ,  "active" ).css({  "background" :  "#f00"  });
         // 4.0.4 添加到容器中
         $(ele).append($btn);
         var  isEnd =  true ;    // 定义标识，判断是否滑动完成
         // 5.0 为生成的按钮绑定点击事件
         $btn.children( "span" ).on({
             click:  function  () {
                 // 5.0.1 获取点击的索引
                 var  index = $( this ).index();
                 // 5.0.2 为点击的按钮添加选中样式，并滑动幻灯片
                 $( this ).attr( "id" ,  "active" ).css({  "background" :  "#f00"  }).siblings( "span" ).removeAttr( "id" ).css({  "background" :  "#fff"  });
                 // 5.0.3 滑动幻灯片
                 if  (isEnd ==  true ) {
                     isEnd ==  false ;
                     $(ele).children( "ul" ).animate({
                         marginLeft: -index * imgWidth
                     }, 300,  function  () {
                         isEnd =  true ;
                     });
                 }
             }
         });
         // 6.0 为幻灯片添加触摸事件，前台必须引用hammer.js
         // 6.0.1 创建一个新的hammer对象并且在初始化时指定要处理的dom元素
         var  hammertime =  new  Hammer($(ele)[0]);
         hammertime.get( 'swipe' ).set({ direction: Hammer.DIRECTION_ALL });　　 // 此代码会导致滚动条不能滑动，请注释后再使用
         // 向左滑动
         hammertime.on( "swipeleft" ,  function  (e) {
             // 6.0.2 判断当前幻灯片的索引
             var  currentIndex = $btn.find( "span#active" ).index();
             // 6.0.3 判断是否是最后一张
             if  (currentIndex + 1 < imgSize) {
                 // 主动点击按钮
                 $btn.children( "span" ).eq(currentIndex + 1).click();
             }
         });
         // 向右滑动
         hammertime.on( "swiperight" ,  function  (e) {
             // 6.0.2 判断当前幻灯片的索引
             var  currentIndex = $btn.find( "span#active" ).index();
             // 6.0.4 判断是否是第一张
             if  (currentIndex > 0) {
                 $btn.children( "span" ).eq(currentIndex - 1).click();
             }
         });
         /******************************* 手机幻灯片特效结束***************************/
         /*
          * 注：完善版应该还有自动滑动，和监控浏览器时间，在这里我就不详细写了，除非有朋友要求
          */
     }
});

　　

Demo:下载 http://pan.baidu.com/s/1sj6wlC5

补充说明：hammer.js会阻止浏览器滚动条滑动，也就是默认事件，可以注释触摸的代码：

1
//hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

　　注释这一行就不会出现不能滑动滚动条了。因为hammer.js默认不启用上下滑动事件，而启用上下滑动事件会阻止浏览器默认事件，当然，此教程没有用到上下滑动，所以注释这行代码就可以了。

hammer.js开发教程：http://www.cnblogs.com/iamlilinfeng/p/4239957.html

hammer.js 中文翻译官方文档：http://www.tuicool.com/articles/VNRjym7

jquery插件精品教程，我认为写的最好的：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

下一篇实战内容截图：手把手，一步一步构建WebApp——完整项目篇

一步一步构建手机WebApp开发——页面布局篇相关推荐

  1. 一步一步构建手机WebApp开发——环境搭建

    从2007年,乔布斯带来了第一代Iphone手机,整个移动互联网发生天翻地覆的变化,也同时证明了乔布斯的一句名言:"再一次改变世界". 在当今的移动互联网,手机App居多,很多Ap ...

  2. Cocos2D手机游戏开发之优化篇

    Cocos2D手机游戏开发之优化篇 在这个手机游戏盛行已久的年代,一款产品想要博得更多用户的喜爱就要在细节上做得更加到位.而游戏的优化在这里面起到了非常关键的作用.试想下,一款画面和玩法都深受用户喜欢 ...

  3. 在做vue h5 时因改变手机字体导致页面布局错乱 比如在微信公众号中 放入h5 客户把手机字体或者微信字体调大 导致页面错乱

    认定了 就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油 骚年 ** 正文: ** 在做vue h5 时因改变手机字体导致页面布局错乱 比如在微信公众号中 放入h5 客户把手机字体或者微信字 ...

  4. 手机WebApp开发常用框架

    PhoneGap JqueryMobile Sencha 转载于:https://www.cnblogs.com/gfqFighting/archive/2013/01/30/2883570.html

  5. WebApp开发实战视频教程

    商品配送系统手机WebApp开发(Asp.Net MVC5.HTML5.jQuery Mobile.Backbone) 适合人群:中级 课时数量:18课时 用到技术:Asp.Net MVC5.HTML ...

  6. 一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-演示使用报表构建UI-入库业务查询模块...

    回顾与说明 前面我们把"商品字典"."商品入库"."商品库存查询"三个模块已经概括或者详细的演示完了,这些模块涉及到简单数据的增.删.修,也 ...

  7. 基于postfix一步一步构建Mailserver，支持虚拟用户，支持WebMail

    我们来一步一步来构建MailServer,支持虚拟用户.虚拟域,支持Webmail,支持Mysql.这个实验化了两天的时间完成的,其中各种崎岖,认真的照着做,问题不大.不过新手还是不要做这个了,需要整 ...

  8. 一步一步教你使用AgileEAS.NET基础类库进行应用开发-基础篇-基于接口驱动的数据层...

    系列回顾 在前面的文章中,我用了大量的篇幅对UDA及ORM的使用进行了讲解和演示,我们已经知道并熟悉的使用UDA和ORM构建简单的应用,AgileEAS.NET在应用的纵向结构上建议使用分层结构,提出 ...

  9. 一步一步教你使用AgileEAS.NET基础类库进行应用开发-系列目录

    基实这个系统是我AgileEAS.NET平台应用开发教程-案例计划的详细分解,原来想着按前面文章的思路应用写,但是发布之前的想法有点乱,我就把他分解成两个系列,使用step-by-step的方式来降解 ...

最新文章

  1. python内置函数用来返回_Python内置函数用法
  2. HDU 1213 How Many Tables【并查集】
  3. kibana 后台启动
  4. 127.0.0.1 myz.php,XXE漏洞总结 · MYZ’s Blog
  5. 语音识别入门：从菜鸟到大佬
  6. Java使用RabbitMQ之订阅分发（Topic）
  7. 编译的警告：隐式声明与内建函数 ‘malloc’ 不兼容
  8. RHEL6.4下一键安装 Redmine
  9. java中handler机制_自己动手撸一个Handler，让你彻底搞懂Handler机制，揍吻你服不服？...
  10. so反编译为c语言,SO文件反汇编实践
  11. Windows安装hadoop
  12. HttpClient 同时支持发送http及htpps请求
  13. 为什么弃用lofter
  14. item_get - 获得搜好货商品详情
  15. 部分有关会计单词的英中文对照
  16. 爬虫练习：爬取网易云音乐热歌榜全部歌曲的热门评论
  17. 网络连通性以及网络不通解决办法
  18. 看了100%会做艺术二维码的制作教程
  19. 知乎社区吸引用户的几大特色
  20. FastAPI异步 web 框架简介+搭配loguru实现日志服务(转载+补充）

热门文章

  1. 什么是区块链的共识机制？
  2. C++多线程技术--API
  3. 认识哈希函数和哈希表
  4. Aspose.PDF for Java 20.x
  5. UNP卷一chapter17 ioctl操作
  6. ASP.NET验证控件合集 含代码演示
  7. adb连接小米电视，尝试去除开机广告失败补救方法
  8. bzero和memset函数区别联系
  9. 英文实体识别stanrdfold
  10. 连接查询（MySQL）