HTML5和CSS3教程.doc

HTML5和CSS3教程（-）登录本文详细介绍使用HTML5 和CSS3 制作一个登录页面的完整过程，可以让读者对html5和css3有个大概到了解。login.html代码如下：查看原始代码1. 2. Log In 3. 4. 5. 6. 7. 8. 9. Forgot your password?Register 10. 11. 所用到的HTML 5的特性： placeholder 输入框的简短提示，当该输入框获得输入焦点时，该提示信息自动消失 required 指定该输入元素是否必须提供 autofocus 指定输入框是否在页面加载完毕自动获取输入焦点 type=”password” 指定密码输入(非HTML5专有)CSS在这里我们用到了 CSS3 的一些专有属性，包括：Box-shadow 可以帮我们制作效果很好的边框阴影查看原始代码1. #login 2. 3. box-shadow: 4. 0 0 2px rgba(0, 0, 0, 0.2), 5. 0 1px 1px rgba(0, 0, 0, .2), 6. 0 3px 0 #fff, 7. 0 4px 0 rgba(0, 0, 0, .2), 8. 0 6px 0 #fff, 9. 0 7px 0 rgba(0, 0, 0, .2); 10. Stitch effect (缝效果)查看原始代码1. #login 2. 3. position: absolute; 4. z-index: 0; 5. 6.7. #login:before 8. 9. content: ; 10. position: absolute; 11. z-index: -1; 12. border: 1px dashed #ccc; 13. top: 5px; 14. bottom: 5px; 15. left: 5px; 16. right: 5px; 17. -moz-box-shadow: 0 0 0 1px #fff; 18. -webkit-box-shadow: 0 0 0 1px #fff; 19. box-shadow: 0 0 0 1px #fff; 20. Subtle gradient lines (微妙的渐变线)查看原始代码1. h1 2. 3. text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5); 4. text-transform: uppercase; 5. text-align: center; 6. color: #666; 7. margin: 0 0 30px 0; 8. letter-spacing: 4px; 9. font: normal 26px/1 Verdana, Helvetica; 10. position: relative; 11. 12.13. h1:after, h1:before 14. 15. background-color: #777; 16. content: ; 17. height: 1px; 18. position: absolute; 19. top: 15px; 20. width: 120px; 21. 22.23. h1:after 24. 25. background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff); 26. background-image: -webkit-linear-gradient(left, #777, #fff); 27. background-image: -moz-linear-gradient(left, #777, #fff); 28. background-image: -ms-linear-gradient(left, #777, #fff); 29. background-image: -o-linear-gradient(left, #777, #fff); 30. background-image: linear-gradient(left, #777, #fff); 31. right: 0; 32. 33.34. h1:before 35. 36. background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff); 37. background-image: -webkit-linear-gradient(right, #777, #fff); 38. background-image: -moz-linear-gradient(right, #777, #fff); 39. background-image: -ms-linear-gradient(right, #777, #fff); 40. background-image: -o-li