HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

HTML5+CSS3打造Twitter登陆页面效果

2011-12-15 17:46| 发布者: admin| 查看: 16281| 评论: 1

摘要: twitter的登录页面简单大方,但是如何只用HTML5 和CSS3 技术来实现登录的界面,请看如下代码HTMLform action="" method="post"div id='name' class='outerDiv'label for="name"Full name:/labelinput type="text" na ...
twitter的登录页面简单大方,但是如何只用HTML5 和CSS3 技术来实现登录的界面,请看如下代码

HTML

<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 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 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 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 id='submit' class='outerDiv'>
<input type="submit" value="Create my account" />
</div>
</form>

CSS3

#twitter input:not(:focus){
opacity:0.6;
}

#twitter input:required{
}

#twitter input:valid {
opacity:0.8;
}

#twitter input:focus:invalid{
border:1px solid red;
background-color:#FFEFF0;
}


以下是twitter登录的效果图

更多
1

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

相关阅读

发表评论

最新评论

引用 xujiao 2013-3-16 10:58
如何用你的代码得到你的效果图?用IE6运行的,是不是不支持CSS3?

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-25 11:29

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部