一步一步构建手机WebApp开发——页面布局篇
继上一篇：一步一步构建手机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
id="banner" class="position-relative">
<
div
id="main">
<
div
class="menu min-height">
<
div
class="copyright clear">
<
div
id="footer" class="position-fixed">
|
② 由于此模板没有头部，所有直接从幻灯片div开始写起，准备三张图片，然后通过，
|
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="" />
<
li
><
a
href="#" title=""><
img
src="imgs/banner2.jpg" alt="" title="" />
<
li
><
a
href="#" title=""><
img
src="imgs/banner3.jpg" alt="" title="" />
|
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 设置
$(ele).children(
"ul"
).width(imgSize * imgWidth).children(
"li"
).width(imgWidth).show();
// 4.0 根据幻灯片个数生成按钮
// 4.0.1 创建按钮容器并添加样式
$btn = $(
""
);
$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 = $(
""
);
$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
|