HTML5及CSS3教程.docVIP

HTML5和CSS3教程（-） 登录 本文详细介绍使用HTML5 和CSS3 制作一个登录页面的完整过程，可以让读者对html5和css3有个大概到了解。 login.html代码如下：查看原始代码 form id=login h1Log In/h1 fieldset id=inputs input id=username type=text placeholder=Username autofocus required input id=password type=password placeholder=Password required /fieldset fieldset id=actions input type=submit id=submit value=Log in a href=Forgot your password?/aa href=Register/a /fieldset /form 所用到的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)??; } Stitch effect (缝效果) 查看原始代码 #login { position: absolute; z-index: 0; } #login:before { content: ; position: absolute; z-index: -1; border: 1px dashed #ccc??; top: 5px; bottom: 5px; left: 5px; right: 5px; -moz-box-shadow: 0 0 0 1px #fff??; -webkit-box-shadow: 0 0 0 1px #fff??; box-shadow: 0 0 0 1px #fff??; } Subtle gradient lines (微妙的渐变线) 查看原始代码 h1 { text-shadow: 0 1px 0 rgba(255, 255, 255, .7)??, 0px 2px 0 rgba(0, 0, 0, .5)??; text-transform: uppercase; text-align: center; color: #666??; margin: 0 0 30px 0; letter-spacing: 4px; font: normal 26px/1 Verdana, Helvetica; position: relative; } h1:after, h1:before { background-color: #777??; content: ; height: 1px; position: absolute; top: 15px; width: 120px; } h1:after { background-image: -webkit-gradient(linear, left top, right top, from(#777??), to(#fff??)); background-image: -webkit-linear-gradient(left, #777??, #fff??); background-image: -moz-linear-gradient(left, #777??, #fff??); background-image: -ms-linear-gradient(left, #777??, #fff??); background-image: -o-linear-gradient(left, #777??, #fff??); background-image: linear-gradient(l