很酷的CSS3仿Facebook登入表單

原文:

很酷的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
>

另外我們看到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...