一步一步構建手機WebApp開發——頁面佈局篇
繼上一篇：一步一步構建手機WebApp開發——環境搭建篇事後，我相信不少朋友都想看看實戰案例，這一次的教程是頁面佈局篇，先上圖：javascript
如上圖所示，此篇教程即是教初學者如何快速佈局這樣的頁面。廢話少說，直接上代碼css
注意：此教程是接上一篇教程，也就是全部的內容是直接從body開始寫，固然，也會貼出全部代碼給你們。html
第一步：框架的佈局及幻燈片的佈局（Html)html5
① 如上圖所示，咱們應該準備如下容器，方便填充內容java
|
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>佈局jquery
|
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
>
|
第二步：框架的佈局樣式及幻燈片的佈局樣式（Css)css3
① 公共庫樣式web
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/* 禁用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
; }
|
② 頁面容器及幻燈片樣式算法
|
1
2
3
4
5
6
7
8
9
|
/* 頁面主代碼 */
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
; }
|
上面一步以下圖所示：瀏覽器
第三步：建立公共腳本類庫，並拓展Jquery對象實現簡單插件並初步調用（common.js)
① 添加Jquery拓展幻燈片插件，不懂Jquery插件的，請移步：Jquery插件精品教程，這是我認爲最好的教程
|
1
2
3
4
5
6
|
//頁面特效，這裏用到jquery最簡單的插件寫法
$.extend({
banner:
function
(ele) {
}
});
|
② 在前臺頁面引用（common.js),並調用幻燈片插件
|
1
2
3
4
5
6
|
<
script
type="text/javascript" src="scripts/common.js"></
script
>
<
script
type="text/javascript">
$(function () {
$.banner("#banner");
})
</
script
>
|
第四步：實現幻燈片banner的核心方法
① 獲取幻燈片的個數
|
1
|
var
imgSize = $(ele).find(
"img"
).size();
|
② 獲取幻燈片的寬度和寬度
|
1
2
|
var
imgWidth = $(ele).width();
var
imgHeight = $(ele).height();
|
③ 設置 <ul> 標籤的寬度爲：個數*單個寬度，及阻止li繼承父類，這樣爲了讓<li>有足夠的空間浮動成行排列，並顯示全部幻燈片
|
1
|
$(ele).children(
"ul"
).width(imgSize * imgWidth).children(
"li"
).width(imgWidth).show();
|
④ 根據幻燈片個數生成按鈕
|
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
|
// 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);
|
* 定義標識變量，判斷幻燈片是否完整執行動畫
|
1
|
var
isEnd =
true
;
// 定義標識，判斷是否滑動完成
|
⑤ 爲生成的按鈕綁定點擊事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$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
;
});
}
}
});
|
⑥ 爲幻燈片添加觸摸事件，前臺必須引用hammer.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
|
// 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();
}
});
|
通過上面6個小節，一個幻燈片滑動就弄好了，支持觸屏滑動，完整代碼爲：
|
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();
}
});
/******************************* 手機幻燈片特效結束***************************/
/*
* 注：完善版應該還有自動滑動，和監控瀏覽器時間，在這裏我就不詳細寫了，除非有朋友要求
*/
}
});
|
第五步：實現方塊按鈕菜單的佈局（Html）
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--方塊菜單-->
<
div
class="menu min-height">
<
a
href="" title="關於咱們"><
span
>關於咱們</
span
></
a
>
<
a
href="" title="設計團隊"><
span
>設計團隊</
span
></
a
>
<
a
href="" title="經典案例"><
span
>經典案例</
span
></
a
>
<
a
href="" title="服務保障"><
span
>服務保障</
span
></
a
>
<
a
href="" title="優惠活動"><
span
>優惠活動</
span
></
a
>
<
a
href="" title="裝飾課堂"><
span
>裝飾課堂</
span
></
a
>
<
a
href="" title="會議中心"><
span
>會議中心</
span
></
a
>
<
a
href="" title="聯繫咱們"><
span
>聯繫咱們</
span
></
a
>
</
div
>
|
第六步：實現方塊按鈕菜單的佈局樣式（Css）
① 四列布局算法：讓全部方塊的margin-left爲：1.5%，這樣就有1.5%*5=7.5%個縫隙，那麼每個方塊的寬度爲： 23.125%，代碼以下：
|
1
2
3
|
/* 方塊菜單 */
.menu a {
display
:
block
;
float
:
left
;
width
:
23.125%
;
height
:
80px
;
margin
:
5px
0
0
1.5%
;
color
:
#fff
; }
.menu a span {
padding
:
5px
; }
|
② 逐步爲各個方塊設置樣式及特殊樣式，首先須要掌握CSS3 選擇器：nth-child，意思就是獲取第幾個，CSS3選擇器教程：請移步：CSS3選擇器
|
1
2
3
4
5
6
7
8
9
|
/*因爲第一個垮了兩個方塊，也就是 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
; }
|
通過上面兩步，方塊菜單製做完成，以下圖所示：
第七步：添加版權描述（比較簡單，Html和CSS一塊兒寫）
Html
|
1
2
3
4
|
<!--描述-->
<
div
class="copyright clear">
版權全部：新生帝
</
div
>
|
Css
|
1
2
|
/* 版權 */
.copyright {
padding
:
8px
;
text-align
:
center
;
color
:
#444
; }
|
第八步：添加底部固定菜單
Html
|
1
2
3
4
5
6
7
8
|
<!--頁腳-->
<
div
id="footer" class="position-fixed">
<
ul
>
<
li
><
a
href="" title="">網站地圖</
a
></
li
>
<
li
><
a
href="" title="">關於咱們</
a
></
li
>
<
li
><
a
href="" title="">聯繫咱們</
a
></
li
>
</
ul
>
</
div
>
|
Css
|
1
2
3
4
5
|
/* 底部 */
#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
; }
|
通過上面七個步驟，一個完整的頁面佈局製做完畢！！！！
全部代碼以下：
Index.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
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
|
<!
DOCTYPE
html>
<
head
>
<
meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--禁止瀏覽器縮放-->
<
meta
name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<
meta
content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />
<!--清除瀏覽器緩存-->
<
meta
http-equiv="pragma" content="no-cache">
<
meta
http-equiv="Cache-Control" content="no-cache, must-revalidate">
<
meta
http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<!--iPhone 手機上設置手機號碼不被顯示爲撥號連接）-->
<
meta
content="telephone=no, address=no" name="format-detection" />
<!--IOS私有屬性，能夠添加到主屏幕-->
<
meta
name="apple-mobile-web-app-capable" content="yes" />
<!--屏幕頂部條的顏色-->
<
meta
name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<
title
>SaveMoney</
title
>
<!-- 重置樣式 -->
<
link
type="text/css" href="css/reset.css" rel="stylesheet" />
<!-- 主樣式 -->
<
link
type="text/css" href="css/common.css" rel="stylesheet" />
<!-- Jquery庫 -->
<
script
type="text/javascript" src="scripts/jquery-1.11.1.min.js"></
script
>
<!-- 手機觸摸插件 -->
<
script
type="text/javascript" src="scripts/hammer.js"></
script
>
<!--公共腳本庫-->
<
script
type="text/javascript" src="scripts/common.js"></
script
>
<!--讓IE8，IE9，支持Html5和Css3-->
<!--[if lte IE 8]>
<script src="scripts/selectivizr.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/css3-mediaqueries.js"></script>
<script src="scripts/html5shiv.js"></script>
<![endif]-->
</
head
>
<
body
>
<!--頁面容器-->
<
div
class="page-container min-height">
<!--頭部-->
<
div
id="head"></
div
>
<!--幻燈片-->
<
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
>
<!--主體-->
<
div
id="main">
<!--方塊菜單-->
<
div
class="menu min-height">
<
a
href="" title="關於咱們"><
span
>關於咱們</
span
></
a
>
<
a
href="" title="設計團隊"><
span
>設計團隊</
span
></
a
>
<
a
href="" title="經典案例"><
span
>經典案例</
span
></
a
>
<
a
href="" title="服務保障"><
span
>服務保障</
span
></
a
>
<
a
href="" title="優惠活動"><
span
>優惠活動</
span
></
a
>
<
a
href="" title="裝飾課堂"><
span
>裝飾課堂</
span
></
a
>
<
a
href="" title="會議中心"><
span
>會議中心</
span
></
a
>
<
a
href="" title="聯繫咱們"><
span
>聯繫咱們</
span
></
a
>
</
div
>
<!--描述-->
<
div
class="copyright clear">
版權全部：新生帝
</
div
>
</
div
>
<!--頁腳-->
<
div
id="footer" class="position-fixed">
<
ul
>
<
li
><
a
href="" title="">網站地圖</
a
></
li
>
<
li
><
a
href="" title="">關於咱們</
a
></
li
>
<
li
><
a
href="" title="">聯繫咱們</
a
></
li
>
</
ul
>
</
div
>
</
div
>
<
script
type="text/javascript">
$(function () {
$.banner("#banner");
})
</
script
>
</
body
>
</
html
>
|
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——完整項目篇
相關文章
- 1. 一步一步構建手機WebApp開發——頁面佈局篇
- 2. 一步一步構建手機WebApp開發——環境搭建篇
- 3. webApp 頁面佈局
- 4. 一步一步構建一個react應用-開篇
- 5. webApp 頁面適配佈局
- 6. 一步步學敏捷開發：開篇
- 7. [譯文]一步步構建發佈一個 TypeScript NPM 包
- 8. 一步一步教你如何開發h5頁面
- 9. 頁面佈局一
- 10. 一步一步學Silverlight 2系列（3）：界面佈局
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • PHP開發工具
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
