html怎样做登录页面,使用HTML 5和CSS3制作登录页面完整步骤

本文详细介绍使用HTML 5 和CSS3 制作一个登录页面的完整过程。

login.html

Log In

Forgot your password?Register

所用到的HTML 5的特性：

◆ placeholder – 输入框的简短提示，当该输入框获得输入焦点时，该提示信息自动消失

◆ required – 指定该输入元素是否必须提供

◆ autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点

◆ type=”password” – 指定密码输入(非HTML5专有)

CSS

在这里我们用到了 CSS3 的一些专有属性，包括：

Box-shadow可以帮我们制作效果很好的边框阴影

#login

{

box-shadow:

0 0 2px rgba(0, 0, 0, 0.2),

0 1px 1px rgba(0, 0, 0, .2),

0 3px 0 #fff,

0 4px 0 rgba(0, 0, 0, .2),

0 6px 0 #fff,

0 7px 0 rgba(0, 0, 0, .2);

}

Sti