- 構建移動網站與APP：HTML 5移動開發入門與實戰（跨平臺移動開發叢書）
- 常新峰
- 2542字
- 2020-11-29 00:14:06
2.4 范例——創建一個HTML 5版的APP注冊頁面
本例是一個常見的用戶注冊頁面，表單由3個文本框組成，類型分別為email、text和password。進入頁面后，鼠標會自動聚焦到“電子郵箱”文本框，同時文本框的邊框會產生紅色漸變的效果。點擊“昵稱”文本框，“電子郵件”文本框的邊框紅色消失，此時“昵稱”文本框的邊框出現紅色漸變效果，“密碼”文本框的效果相同。
使用支持HTML 5表單新特性的瀏覽器Google Chrome打開網頁文件，運行效果如圖2.11所示。打開網頁的同時，“電子郵箱”文本框會漸變為紅色，運行效果如圖2.12所示。點擊“注冊”按鈕，進行表單驗證，運行效果如圖2.13所示。
圖2.11 HTML 5版的注冊頁面
圖2.12 “電子郵件”文本框的邊框變紅
本例中采用了大量的CSS 3特效，包括剛進入頁面聚焦漸變的動畫、表單背景色的顏色漸變、文本框的陰影等。通過本示例可以了解如何運用CSS 3制作一個簡單的注冊頁面。
圖2.13 點擊“注冊”按鈕
2.4.1 代碼設計
利用編輯器編輯如下代碼，并保存為“2-3．創建一個HTML 5版的注冊頁面．html”文件。
【代碼2-3】
01 <! doctype html>
02 <html>
03 <head>
04 <style>
05 *:focus{ outline: none; } /* 所有元素焦點樣式 */
06 body { text-align: center; }
07 form /* 表單樣式 */
08 {
09 height: 240px;
10 width: 400px;
11 margin: -200px 0 0-240px;
12 padding: 30px;
13 position: absolute;
14 top: 50%;
15 left: 50%;
16 z-index: 0;
17 background-color: #eee;
18
19 /* gradient帶webkit前綴被Safari 4+, Chrome支持 */
20 background-image: -webkit-gradient(linear, left top, left
bottom, from(#fff), to(#eee));
21 /* linear-gradient帶webkit前綴被Chrome 10+, Safari 5.1+, iOS
5+ 支持 */
22 background-image: -webkit-linear-gradient(top, #fff, #eee);
23 /* linear-gradient帶moz前綴被Firefox 3.6-15 支持 */
24 background-image: -moz-linear-gradient(top, #fff, #eee);
25 /* linear-gradient帶ms前綴被IE9+ 支持 */
26 background-image: -ms-linear-gradient(top, #fff, #eee);
27 /* linear-gradient帶o前綴被Opera 10.5-12.00 支持 */
28 background-image: -o-linear-gradient(top, #fff, #eee);
29 /* 標準格式linear-gradient被Opera 10.5, IE9+, Safari 5, Chrome,
30 Firefox 4+, iOS 4, Android 2.1+ 支持 */
31 background-image: linear-gradient(top, #fff, #eee);
32 /* border-radius帶moz前綴被Firefox 3.5+ 支持 */
33 -moz-border-radius: 3px;
34 /* border-radius帶webkit前綴被Safari 3-4, iOS 1-3.2, Android
≤1.6 支持*/
35 -webkit-border-radius: 3px;
36 /* 標準格式border-radius被Opera 10.5, IE9+, Safari 5, Chrome,
37 Firefox 4+, iOS 4, Android 2.1+支持 */
38 border-radius: 3px;
39
40 /* box-shadow帶webkit前綴被Safari 3-4, iOS 4.0.2-4.2,
Android 2.3+ 支持 */
41 -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px
42 rgba(0, 0, 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2) ;
43 /* box-shadow帶moz前綴被Firefox 4+ 支持 */
44 -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0,
45 0, 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2) ;
46 /* 標準格式box-shadow被Opera 10.5, IE9+, Firefox 4+, Chrome 6+,
iOS 5 支持*/
47 box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0,
48 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2) ;
49 }
50 form:before /* before偽元素表示在一個元素的內容之前插入content屬性定義的
內容與樣式*/
51 {
52 content: ''; /* content屬性與：befor及：after偽元素配合使用，生成某個
53 CSS選擇器之前或之后的內容 */
54 position: absolute;
55 z-index: -1;
56 border: 1px dashed #ccc;
57 top: 5px;
58 bottom: 5px;
59 left: 5px;
60 right: 5px;
61
62 -moz-box-shadow: 0 0 0 1px #fff; /* Firefox 4+ */
63 -webkit-box-shadow: 0 0 0 1px #fff; /* Safari 3-4, iOS 4.0.2
4.2, Android 2.3+ */
64 box-shadow: 0 0 0 1px #fff; /* Opera 10.5, IE9+, Firefox
4+, Chrome 6+, iOS 5 */
65 }
66 input /* 所有文本框樣式 */
67 {
68 float: left;
69 padding: 15px 15px 15px 45px;
70 margin: 0 0 10px 0;
71 width: 353px;
72 border: 1px solid #CCC;
73 background: #F1F1F1;
74 font-size: 14px;
75 -webkit-border-radius: 5px;
76 -moz-border-radius: 5px;
77 border-radius: 5px;
78
79 -moz-border-radius: 5px; /* Firefox 3.5+ */
80 -webkit-border-radius: 5px; /* Safari 3-4, iOS 1-3.2, Android
≤1.6 */
81 border-radius: 5px; /* Opera 10.5, IE9+, Safari 5, Chrome,
Firefox 4+, iOS 4, Android 2.1+ */
82 -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; /* inset
表示盒內陰影；Firefox 4+ */
83 -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 white; /*
Safari 3-4, iOS 4.0.2-4.2, Android
84 2.3+ */
85 box-shadow: 0 1px 1px #CCC inset, 0 1px 0 white; /* Opera
10.5, IE9+, Firefox 4+,
86 Chrome 6+, iOS 5 */
87
88 /* ease(逐漸慢下來); linear(勻速); ease-in(由慢到快); ease-out(由快到
慢); ease-in-out(先慢到快再到
89 慢) */
90 -webkit-transition: all 0.5s ease-in-out; /* Safari 3.2+,
Chrome */
91 -moz-transition: all 0.5s ease-in-out; /* Firefox 4-15 */
92 -o-transition: all 0.5s ease-in-out; /* Opera 10.5-12.00 */
93 transition: all 0.5s ease-in-out; /* Firefox 16+, Opera
12.50+ */
94 }
95 input:focus /* 所有文本框焦點樣式 */
96 {
97 background-color: #fff;
98 border-color: #e8c291;
99 outline: none;
100 -moz-box-shadow: 0 0 0 1px #e8c291 inset;
101 -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
102 box-shadow: 0 0 0 1px #e8c291 inset;
103 }
104 input:hover /* 所有文本框鼠標懸停樣式 */
105 {
106 border-color: inherit ! important;
107 background-color: #EfEfEf;
108 -webkit-border-radius: 5px 0 0 5px;
109 -moz-border-radius: 5px 0 0 5px;
110 border-radius: 5px 0 0 5px;
111 }
112 input:not(:focus) { opacity: 0.6; } /* 所有文本框非焦點樣式 */
113 input:valid { opacity: 0.8; } /* 所有文本框輸入有效樣式 */
114 input:focus:invalid /* 所有文本框焦點但輸入無效樣式 */
115 {
116 border: 1px solid red;
117 background-color: #FFEFF0;
118 }
119 section { width: 400px; margin: 0 auto; } /* 章節樣式 */
120 .clearfix { clear: both; } /* 清除浮動樣式 */
121 #submit:hover, /* 提交按鈕鼠標懸停和焦點樣式 */
122 #submit:focus
123 {
124 background-color: #FDDB6F;
125
126 /* 可以參考form樣式中的gradient注釋 */
127 background-image: -webkit-gradient(linear, left top, left
bottom, from(#FFB94B), to(#FDDB6F));
128 background-image: -webkit-linear-gradient(top, #FFB94B,
#FDDB6F);
129 background-image: -moz-linear-gradient(top, #FFB94B, #FDDB6F);
130 background-image: -ms-linear-gradient(top, #FFB94B, #FDDB6F);
131 background-image: -o-linear-gradient(top, #FFB94B, #FDDB6F);
132 background-image: linear-gradient(top, #FFB94B, #FDDB6F);
133 }
134 #submit /* 提交按鈕樣式 */
135 {
136 background-color: #FFB94B;
137 border-width: 1px;
138 border-style: solid;
139 border-color: #D69E31 #E3A037 #D5982D #E3A037;
140 float: left;
141 height: 35px;
142 padding: 0;
143 width: 120px;
144 cursor: pointer;
145 font: bold 15px Arial, Helvetica;
146 color: #8F5A0A;
147 margin: 20px 0 0 0;
148
149 /* 可以參考form樣式中的gradient注釋 */
150 background-image: -webkit-gradient(linear, left top, left
bottom, from(#FDDB6F), to(#FFB94B));
151 background-image: -webkit-linear-gradient(top, #FDDB6F,
#FFB94B);
152 background-image: -moz-linear-gradient(top, #FDDB6F, #FFB94B);
153 background-image: -ms-linear-gradient(top, #FDDB6F, #FFB94B);
154 background-image: -o-linear-gradient(top, #FDDB6F, #FFB94B);
155 background-image: linear-gradient(top, #FDDB6F, #FFB94B);
156
157 /* 可以參考form樣式中的border-radius注釋 */
158 -moz-border-radius: 3px;
159 -webkit-border-radius: 3px;
160 border-radius: 3px;
161
162 /* 給文字加上陰影，早在CSS 2中已經出現 */
163 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
164
165 /* 可以參考form樣式中的box-shadow注釋 */
166 -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255,
255, 255, 0.3) inset;
167 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0
rgba(255, 255, 255, 0.3) inset;
168 box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255,
255, 0.3) inset;
169 }
170 .item-name { background: url(../images/user.png) 10px 11px no
repeat; } /* 昵稱背景樣式 */
171 .item-email { background: url(../images/email.png) 10px 11px no
repeat; } /* 密碼背景樣式 */
172 .item-password { background: url(../images/keys.png) 10px 11px no
repeat; } /* 電子郵箱背景樣式 */
173 </style>
174 <script src="../js/jquery-1.8.3.js"></script>
175 <script src="../js/modernizr.custom.2.6.2.js"></script>
176 </head>
177 <body>
178 <header><h2>搞定輸入框自動聚焦</h2></header>
179 <section>
180 <form action="" method="post">
181 <div class="clearfix">
182 <! -- 第1個autofocus -->
183 <input type="email" tabindex="1" id="email" class="item
email" placeholder="電子郵箱" autofocus required/>
184 </div>
185 <div class="clearfix">
186 <! -- 第2個autofocus -->
187 <input type="text" tabindex="2" id="name" class="item-name"
placeholder="昵稱" autofocus
188 required/>
189 </div>
190 <div class="clearfix">
191 <! -- 第3個autofocus -->
192 <input type="password" tabindex="3" id="password"
class="item-password" placeholder="密
193 碼" autofocus autocomplete="off" required/>
194 </div>
195 <div class="clearfix"><input type="submit" tabindex="4"
id="submit" value="注 冊" /></div>
196 </form>
197 </section>
198 </body>
199 </html>
提示
代碼中可以看到很多樣式前帶有-webkit、-moz、-o、-ms的前綴，注釋中給出了瀏覽器的支持情況。想更多地了解各瀏覽器前綴，可以參考網址http://css3please.com。
2.4.2 代碼分析
本示例側重從CSS 3出發，介紹如何構建一個注冊頁面，下面講解其中用到的CSS 3技巧。
【代碼2-3】中第19～31行、126～132行、149～155行使用了CSS 3 Gradient（漸變）。漸變分為線性漸變（Linear Gradients）和徑向漸變（Radial Gradients）。這里使用了線性漸變，WebKit內核的瀏覽器語法如下。
-webkit-gradient(<type>, [<point> || <angle>, ]? <stop>, <stop> [, <stop>]* )
在WebKit下Gradient使用的語法如圖2.14所示。
圖2.14 WebKit下Gradient使用
第1個參數表示漸變類型，漸變類型分為linear（線性漸變）和radial（徑向漸變）兩種。第2個和第3個參數分別表示漸變的起點和終點，可以用坐標形式或方位值，比如right top（右上角）和right bottom（右下角），也可以使用角度，比如red 10%。第4個和第5個參數表示起始和終止的漸變顏色。
再看標準瀏覽器的Gradient語法：
linear-gradient([point || angle, ]? stop, stop [, stop]*)
標準瀏覽器下Gradient的使用如圖2.15所示。
圖2.15 標準瀏覽器下Gradient的使用
標準瀏覽器下Gradient的漸變類型不在第1個參數上，而是寫在樣式名稱上。第1個參數表示漸變的起點，可以使用方位值或者角度值，第2個和第3個參數和WebKit相同。
提示
想了解更多Gradient的使用，可以參考網址http://css-tricks.com/examples/CSS 3Gradient/。
代碼32～38行、79～81行、108～110行、158～160行使用了CSS 3的border-radius，中文意思是“圓角”，語法如下：
border-radius : none | <length>{1,4} [ / <length>{1,4} ]?
其中，length是由浮點數字和單位標識符組成的長度值，可以使用em、ex、pt、px、百分比等，不可為負值。圓角還有其他一些相關屬性，比如border-top-right-radius、border-bottom-rightradius、border-bottom-left-radius、border-top-left-radius。
代碼40～47行、62～64行、82～85行、100～102行、165～168行使用了CSS 3的boxshadow，語法如下：
box-shadow :<length> <length> <length> <length> || <color>
參數說明：陰影水平偏移值（可取正負值）；陰影垂直偏移值（可取正負值）；陰影邊框；陰影模糊值；陰影顏色。
例子中使用的盒陰影效果屬于盒外陰影，除此之外還有盒內陰影，使用時可增加一個inset，代碼如下：
box-shadow :inset 10px 10px 5px #000000;
如果還想了解更多的盒陰影，可以去http://www.css3maker.com/box-shadow.html動態感受下box-shadow的強大效果。
推薦閱讀
- HornetQ Messaging Developer’s Guide
- 數據庫系統原理及MySQL應用教程（第2版）
- ASP.NET Web API：Build RESTful web applications and services on the .NET framework
- 零基礎學C++程序設計
- Wireshark Network Security
- Practical DevOps
- PHP編程基礎與實踐教程
- 創意UI：Photoshop玩轉APP設計
- HTML5 Canvas核心技術：圖形、動畫與游戲開發
- Java Web入門很輕松（微課超值版）
- Java網絡編程實用精解
- Learning Zimbra Server Essentials
- 軟件測試項目實戰之功能測試篇
- Netty 4核心原理與手寫RPC框架實戰
- MATLAB/Simulink建模與仿真