CSS3制作Login栏
今天在这篇教程中主要想和大家一起探讨一下登录和注册表单的制作方法,具体如何制作一个表单,我在此就不多说了,我主要想说的是如何使用CSS3的相关属性来制作一个美丽而有简洁的表单风格。这篇教程的思路主要来自于Red大师的两篇博文《Simple and effective dropdown login box》和《Slick login form with HTML5 & CSS3》这里我主要演示第一个案例效果,并在Red的基础上作了相应的修改。如下面的DEMO所示:
以前我们制作登录和注册表单都是简单的两个链接,然后指定到相对应的页面中,这里我们改为了以前那种方式,采用弹出窗的制作方法,其主要是避免等待加载一个单独的页面,以这种方式来增强用户的体验,因为用户有可能立即登录或者注册。
在完成这个案例之前,我们需要来看一个login表单的制作,这个也是使用纯CSS3制作的,详细的制作方法大家可以参考Red的《Slick login form with HTML5 & CSS3》或者打开在线的Demo:
具体代码如下所示:
HTML Markup
- <form id="login">
CSS Code
- *{
这个Login表单中我们应用了一些HTML的东西:
placeholder:占位符属性,
required:这个表示的是表单元素是必填的一部分,少了他不行
autofocus:自动对焦
type="password":HTML5中的一个新类型,指定其输入元素是一个纯文本编辑输入密码框
大家通过上面简单的了解了HTML5和CSS3制作表单的过程和相关代码,下面我们就回到这次教程中的案例来。从上面的DEMO中我们可以明确的知道,我们这个案例主要采用了:
Tabs的结构:我们此处的两个链接采用的是Tabs的结构,
使用了HTML的实体符制作三角效果,使用jQuery制作了折叠与展开的效果
接下来直接上代码吧:其主要包含HTML结构、CSS3制作的样式代码、jQuery制作的折叠与扩展功能:
HTML Markup
- <header class="clearfix">
上面是整个HTML的代码,其实关键性的代码就是:
- <ul id="tabs">
这里我们使用了两个实体符来制作了三角形的效果:▼(▼)和 ▲(▲)有关于使用HTML的实体符制作图像,本站在《CSS3和HTML实体符制作带图片效果的Buttons》有介绍过,当然大家也可以使用另外的方法来制作这个三角形,比如说border制作三角,对此有兴趣的同学可以参考本站的《纯CSS制作的图形效果》。
CSS Code
- * {
到此我们使用样式美化工作就算是完成了,这里很多属性对于大家来说都很熟悉了,因为使用了大多数CSS3的属性制作效果。如果大家对CSS3还不是很熟悉的话,我建议您先了解其相关的属性使用。这样对你会有很大的帮助。如果您想学习更多的CSS3知识,你就点击本站的CSS3专栏,里面包括了CSS3的基本属性的使用方法和相关实例。
jQuery Code
上面我们花了很多行的篇幅书写了案例的CSS样式,下面的jQuery代码是帮助我们完成此例的功能,具体的就看代码吧:
- <script type="text/javascript">
这样我们最终效果就实现了,大家可以点击DEMO
转自W3CPlus
【CSS3制作Login栏】相关文章
1. CSS3制作Login栏
2. Magí
3. 利用CSS3制作动画效果
4. 用css3制作纸张效果
5. 利用CSS3制作动画效果
6. CSS3制作的分页导航
8. CSS3制作分步注册表单
9. CSS3制作价格标牌
10. CSS3制作下拉菜单
本文来源:https://www.51html5.com/a889.html
﹝CSS3制作Login栏﹞相关内容
- CSS3制作下拉工具条
- css3制作日历风格登陆表单
- CSS3制作登录表单
- CSS3制作莲花开放
- 用CSS3制作一个令人印象深刻的产品展示
- Frog Log
- 谷歌将整合其博客平台Blogger与Google+服务
- 谷歌推出给予HTML5技术的网页版Google Catalogs功能
- 用css3写遨游的logo
- 用CSS3绘制新浪微博logo