原文:
很酷的css3仿facebook登入表單
今天看到一款很不錯的css3登入表單,外觀是仿facebook的登入表單,還挺不錯的,另外也支援簡單的表單輸入框驗證。下圖是表單的效果圖:
我們也可以在這裡檢視表單的demo演示。
接下來我們來分析一下這款表單的源**,首先是html**:
<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...