利用css3實現仿Twitter注冊頁



11 43 15



特效描述:利用css3實現 仿Twitter 注冊頁,利用css3實現仿Twitter注冊頁

代碼結構

1. 引入CSS

<link rel="stylesheet" href="images/twitter-signup.css" type="text/css">
<link rel="stylesheet" href="images/main.css" type="text/css">

2. HTML代碼

		<div id="container">
			<br><br><br>
			<div class="label">html5+css3仿Twitter注冊頁</div>
			<br><br>
			<div id="twitter-outer">
				<div id="twitter-logo">
					<img src="images/twitter_logo_header.png" alt="Twitter.com" height="36" width="155"> 
					<div class="content-bubble-arrow"></div>
				</div>
				<div id="twitter">
			<form action="" method="post"> 
						<div id='name' class='outerDiv'>
							<label for="name">Full name:</label> 
							<input type="text" name="name" required  /> 
							<div class='message' id='nameDiv'> Enter your first and last name. </div>
						</div>
						<div class='clearfix'></div>
						<div id='username' class='outerDiv'>
							<label for="number">Username:</label> 
							<input type="text" name="username" required  /> 
							<div class='message' id='usernameDiv'> Pick a unique name on Twitter. </div>
						</div>
						<div class='clearfix'></div>
						<div id='password' class='outerDiv'>
							<label for="password">Password:</label> 
							<input type="password" name="password" required /> 
							<div class='message' id='websiteDiv'> 6 characters or more (be tricky!). </div>
						</div>
						<div class='clearfix'></div>
						<div id='email' class='outerDiv'>
							<label for="email">Email:</label> 
							<input type="email" name="email" required /> 
							<div class='message' id='emailDiv'> We'll send you a confirmation. </div>
						</div>
						<div class='clearfix'></div>
						<div id='submit' class='outerDiv'>
							<input type="submit" value="Create my account" /> 
						</div>
						<div class='clearfix'></div>
					</form>
					<div class="clearfix"></div>
				</div>
			</div>	
		<br>
		</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 css繪制樣式 文字提示框 提示文字 文本框 text文本框 注冊框 按鈕控制 鼠標滑過 鼠標懸停 跟隨鼠標移動
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子