继上一篇：一步一步构建手机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——完整项目篇
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
