登录框效果
更深层次地应用Html5和CSS3的样式设置，可以将原来平淡的网页装饰得非常华丽。比如一个常见的登录框，如下：
网页的HTML代码如下：
所用到的HTML5 的特性：
?placeholder–输入框的简短提示，当该输入框获得输入焦点时，该提示信息自动消失
?required–指定该输入元素是否必须提供
?autofocus–指定输入框是否在页面加载完毕自动获取输入焦点
?type=”password”–指定密码输入（非HTML5专有）
注意里面四个，是将表单分为四个平行的区域，分别放用户名输入框、密码输入框、记住状态单选框、登录按钮。网页代码就是这样，其它工作全部在样式表里完成，在网页头部加上样式表链接。
样式表取名为style.css，放在网站的css文件夹里，样式表中的设计主要如下：
第1步：body和最外面的名为DL_container的div的样式
*表示对所有标签要求的格式：不许溢出占别的标签的位置，里面的所有项目符号之类的全不可见。
最外面的登录div容器是宽30个默认字符，离body顶端10个字符距离，左右居中。第2步：登录区域的div（类名为cd-login）样式
在这里我们用到了CSS3 的一些专有属性，包括：
Box-shadow 可以帮我们制作效果很好的边框阴影
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);
box-shadow: 10px 5px 5px black;
四个参数分别表示左偏移10px，右偏移5px，阴影模糊半径5px（占据范围），阴影颜色为黑色。
可以在一个box-shadow里面连续加好几个边框阴影，上面就用了6个阴影组成这种效果：
两条灰色边，一条白边，一条灰边，再一条白边，一条一条灰边。
rgba(0, 0, 0, 0.2)，rgba括号中前3个数字代表着red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低。第3步：为登录区域的div（类名为cd-login）加边框虚线
#cd-login:before是表示在div的前面加上别的内容，这里就是加上了虚线边框，里面content是空的，没有具体的内容，只是加了边框。如下：虚线的边框就是这样加上去的。
第4步：Form表单（类名为cd-form）里面的一般样式
Form本身的内边距为1.4个字符宽度。
里面的每一个类名为fieldset的div都是相对于该form定位，div的上边距为1.4个字符，左右边距为0；第一个类名为fieldset的div上边距为0，最后一个类名为fieldset的div下边距为0，就是放按钮的那个，里面按钮居中text-align: center;。
Form表单里面的都label字体都是16px大小
第5步：表单中label的样式设计
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
这几句是隐藏label标签文本的方法，就是把文字“用户名”放到最右边位置显示，但是又不许自动换行，又不许溢出占别的位置，其实就是看不见文字。
用背景图片替换原来应该显示的“用户名”和“密码”。
第6步：表单中输入文本框、密码框的样式设计
文本框cd-text的样式：
密码框cd-pass的样式：
第7步：表单中提交按钮的样式设计
最后效果如图：
该实例源代码请百度“华夏电商”，进入本专业博客查找下载。