簡單的註冊頁面製作

最近中做一個小專案，其中涉及到登入和註冊頁面的製作，接下來就為大家介紹一下製作的過程，不足之處請各位大神批評指出。

1、向上效果圖：

2、製作難點是如何將A區的文字右對齊。

我的製作思路是：給A區的文字設定一個寬度，再將文字的text-align屬性設定為 right。

3、下面是頁面的結構（部分）：

<

div

>

<

span

>

請輸入郵箱地址

span

>

<

input

type

=

“email”

name

=

“emailText”

id

=

“emailText”

placeholder

=

“xxx。@xxx。com”

/>

<

p

>

郵箱地址請按要求格式輸入

p

>

div

>

<

div

>

<

span

>

請輸入密碼

span

>

<

input

type

=

“password”

name

=

“pass”

id

=

“pass1”

/>

div

>

<

div

>

<

span

>

請重複輸入密碼

span

>

<

input

type

=

“password”

name

=

“pass2”

id

=

“pass2”

/>

<

p

>

密碼請為6-16位英文數字

p

>

div

>

4、下面是頁面的佈局（部分）：

#

signup

span

{

float

：

left

；

width

：

35

%

；

text-align

：

right

；

font-size

：

14

px

；

padding-right

：

10

px

；

}

#

signup

p

{

width

：

200

px

；

margin

：

0

0

0

35

%

；

font-size

：

12

px

；

line-height

：

20

px

；

color

：

#ccc

；

padding-left

：

10

px

；

}

#

signup

textarea

{

width

：

50

%

；

height

：

100

px

；

resize

：

none

；

}

5、值得一提的是下面的這段樣式：

解釋：因為span是行內元素，不支援寬高。當給span元素設定width：35%時，其樣式在頁面中並不會表現出來。當給span元素加上float：left時，行內元素就支援寬高了。加上text-align： right；是為了讓文字居右顯示。加padding-right： 10px；是為了留白，讓文字與輸入框之間有一定的距離。

6、至此就完成了（頁面略吃藕，但總算是完成啦啦啦！！），趕快去試試吧！

注：註冊頁面原始碼請檢視：get到一個註冊頁面的製作 - 寒雨落軒的個人空間