• 运用HTML5+CSS3和CSS滤镜做的精美的登录界面

    原始出处http://chenjinfei.blog.51cto.com/2965201/774865
    1. <!DOCTYPE HTML> 
    2. <html> 
    3. <head> 
    4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    5. <meta http-equiv="description" content="运用CSS3和CSS滤镜做的精美的登录界面，无用到图片的喔！"> 
    6. <meta http-equiv="author" content="chenjinfei"> 
    7. <meta http-equiv="date" content="2012-2-6"> 
    8. <title>登录</title> 
    9. <link rel="stylesheet" href="style/common/common.css"> 
    10. <style type="text/css"> 
    11. body { 
    12.     margin:0; 
    13.     padding:0; 
    14.     background-color:#E4E8EC; 
    15. } 
    16. .wrap { 
    17.     margin:150px auto; 
    18.     380px; 
    19.     overflow:hidden; 
    20. } 
    21. .loginForm { 
    22.     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, 0.2); 
    23.     position:absolute; 
    24.     z-index:0; 
    25.     background-color:#FFF; 
    26.     border-radius:4px; 
    27.     height:250px; 
    28.     380px; 
    29.     background: -webkit-gradient(linear, left top, left 24, from(#EEE), color-stop(4%, #FFF), to(#EEE)); 
    30.     background: -moz-linear-gradient(top, #EEE, #FFF 1px, #EEE 24px); 
    31.     background: -o-linear-gradient(top, #EEEEEE, #FFFFFF 1px, #EEEEEE 24px); 
    32. } 
    33. .loginForm:before { 
    34.     content:''; 
    35.     position:absolute; 
    36.     z-index:-1; 
    37.     border:1px dashed #CCC; 
    38.     top:5px; 
    39.     bottom:5px; 
    40.     left:5px; 
    41.     right:5px; 
    42.     box-shadow: 0 0 0 1px #FFF; 
    43. } 
    44. .loginForm h1 { 
    45.     text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5); 
    46.     text-transform:uppercase; 
    47.     text-align:center; 
    48.     color:#666; 
    49.     line-height:3em; 
    50.     margin:16px 0 20px 0; 
    51.     letter-spacing: 4px; 
    52.     font:normal 26px/1 Microsoft YaHei, sans-serif; 
    53. } 
    54. fieldset { 
    55.     border:none; 
    56.     padding:10px 10px 0; 
    57. } 
    58. fieldset input[type=text] { 
    59.     background:url(style/default/images/user.png) 4px 5px no-repeat; 
    60. } 
    61. fieldset input[type=password] { 
    62.     background:url(style/default/images/password.png) 4px 5px no-repeat; 
    63. } 
    64. fieldset input[type=text], fieldset input[type=password] { 
    65.     100%; 
    66.     line-height:2em; 
    67.     font-size:12px; 
    68.     height:24px; 
    69.     border:none; 
    70.     padding:3px 4px 3px 2.2em; 
    71.     300px; 
    72. } 
    73. fieldset input[type=submit] { 
    74.     text-align:center; 
    75.     padding:2px 20px; 
    76.     line-height:2em; 
    77.     border:1px solid #FF1500; 
    78.     border-radius:3px; 
    79.     background: -webkit-gradient(linear, left top, left 24, from(#FF6900), color-stop(0%, #FF9800), to(#FF6900)); 
    80.     background: -moz-linear-gradient(top, #FF6900, #FF9800 0, #FF6900 24px); 
    81.     background:-o-linear-gradient(top, #FF6900, #FF9800 0, #FF6900 24px); 
    82. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900'); 
    83.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900')"; 
    84.     height:30px; 
    85.     cursor:pointer; 
    86.     letter-spacing: 4px; 
    87.     margin-left:10px; 
    88.     color:#FFF; 
    89.     font-weight:bold; 
    90. } 
    91. fieldset input[type=submit]:hover { 
    92.     background: -webkit-gradient(linear, left top, left 24, from(#FF9800), color-stop(0%, #FF6900), to(#FF9800)); 
    93.     background: -moz-linear-gradient(top, #FF9800, #FF6900 0, #FF9800 24px); 
    94.     background:-o-linear-gradient(top, #FF6900, #FF6900 0, #FF9800 24px); 
    95. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800'); 
    96.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800')"; 
    97. } 
    98. .inputWrap { 
    99.     background: -webkit-gradient(linear, left top, left 24, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    100.     background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px); 
    101.     background: -o-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px); 
    102.     border-radius:3px; 
    103.     border:1px solid #CCC; 
    104.     margin:10px 10px 0; 
    105. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF'); 
    106.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF')"; 
    107. } 
    108. fieldset input[type=checkbox] { 
    109.     margin-left:10px; 
    110.     vertical-align:middle; 
    111. } 
    112. fieldset a { 
    113.     color:blue; 
    114.     font-size:12px; 
    115.     margin:6px 0 0 10px; 
    116.     text-decoration:none; 
    117. } 
    118. fieldset a:hover { 
    119.     text-decoration:underline; 
    120. } 
    121. fieldset span { 
    122.     font-size:12px; 
    123. } 
    124. </style> 
    125. <!--为了让IE支持HTML5元素，做如下操作：--> 
    126. <!--[if IE]> 
    127. <script type="text/javascript"> 
    128. document.createElement("section"); 
    129. document.createElement("header"); 
    130. document.createElement("footer"); 
    131. </script> 
    132. <![endif]--> 
    133. </head> 
    134.  
    135. <body> 
    136. <div class="wrap"> 
    137.   <form action="#" method="post"> 
    138.     <section class="loginForm"> 
    139.       <header> 
    140.         <h1>登录</h1> 
    141.       </header> 
    142.       <div class="loginForm_content"> 
    143.         <fieldset> 
    144.           <div class="inputWrap"> 
    145.             <input type="text" name="userName" placeholder="邮箱/会员帐号/手机号" autofocus required> 
    146.           </div> 
    147.           <div class="inputWrap"> 
    148.             <input type="password" name="password" placeholder="请输入密码" required> 
    149.           </div> 
    150.         </fieldset> 
    151.         <fieldset> 
    152.           <input type="checkbox" checked="checked"> 
    153.           <span>下次自动登录</span> 
    154.         </fieldset> 
    155.         <fieldset> 
    156.           <input type="submit" value="登录"> 
    157.           <a href="#">忘记密码？</a> <a href="#">注册</a> 
    158.         </fieldset> 
    159.       </div> 
    160.     </section> 
    161.   </form> 
    162. </div> 
    163. </body> 
    164. </html>  
  • 相关阅读:
    论文笔记4
    论文笔记3
    论文笔记2
    论文笔记1
    论文笔记
    AFG与AWG的比较
    Linux下“有线线缆被拔出”问题的解决
    python生成excel格式座位表
    PythonTip--一马当先--bfs
    python pygame--倒计时
  • 原文地址：https://www.cnblogs.com/sky-net/p/4702218.html
Copyright © 2020-2023  润新知