很酷的CSS3仿Facebook登入表單

2021-09-06 15:15:35 字數 1627 閱讀 4686

原文:

很酷的css3仿facebook登入表單

今天看到一款很不錯的css3登入表單,外觀是仿facebook的登入表單,還挺不錯的,另外也支援簡單的表單輸入框驗證。下圖是表單的效果圖:

我們也可以在這裡檢視表單的demo演示。

接下來我們來分析一下這款表單的源**,首先是html**:

<

section

class

="login-form-wrap"

>

<

h1>facebook

h1>

<

form

class

="login-form"

action

="post"

action

="#"

>

<

label

>

<

input

type

="email"

name

="email"

required placeholder

="email"

>

label

>

<

label

>

<

input

type

="password"

name

="password"

required placeholder

="password"

>

label

>

<

input

type

="submit"

value

="login"

>

form

>

<

h5><

a href

="#"

>forgot password

a>

h5>

section

>

html**很簡單,就是構造了乙個表單。

另外我們看到input元素中利用了required屬性來便捷地驗證輸入的格式。

接下來是css3**,這個漂亮的外觀全靠它了:

.login-form-wrap .login-form-wrap:before .login-form-wrap > h1 .login-form-wrap > h5 .login-form-wrap > h5 > a .login-form input[type="email"], .login-form input[type="password"] .login-form input[type="email"] .login-form input[type="password"] .login-form input[type="submit"] .login-form input[type="submit"]:hover .login-form input[type="submit"]:active
都是很普通的樣式屬性,也沒什麼可以解說的,就這樣好了。

很酷的CSS3仿Facebook登入表單

今天看到一款很不錯的css3登入表單,外觀是仿facebook的登入表單,還挺不錯的,另外也支援簡單的表單輸入框驗證。下圖是表單的效果圖 我們也可以在這裡檢視表單的demo演示。接下來我們來分析一下這款表單的源 首先是html section class login form wrap h1 fac...

很酷的CSS3仿Facebook登入表單

今天看到一款很不錯的css3登入表單,外觀是仿facebook的登入表單,還挺不錯的,另外也支援簡單的表單輸入框驗證。下圖是表單的效果圖 我們也可以在這裡檢視表單的demo演示。接下來我們來分析一下這款表單的源 首先是html section class login form wrap h1 fac...

CSS3 仿微信聊天小氣泡

今天給大家分享乙個我剛做的專案中的乙個小案例,因為我們在做乙個聊天的功能,之前的聊天頁面ui很醜,我就不在這裡展示給大家了。頁面大致就是這個樣子,接下來我們來一起學習製作步驟吧。divclass leftd spanng class leftd h imgng src img c pic.pn di...