• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Html制作简单而漂亮的登录页面

    先来看看样子。

    html源码：

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Login</title>  
    6.     <link rel="stylesheet" type="text/css" href="Login.css"/>  
    7. </head>  
    8. <body>  
    9.     <div id="login">  
    10.         <h1>Login</h1>  
    11.         <form method="post">  
    12.             <input type="text" required="required" placeholder="用户名" name="u"></input>  
    13.             <input type="password" required="required" placeholder="密码" name="p"></input>  
    14.             <button class="but" type="submit">登录</button>  
    15.         </form>  
    16.     </div>  
    17. </body>  
    18. </html>  

    css代码：

    CSS Code复制内容到剪贴板
    1. html{   
    2.     width: 100%;   
    3.     height: 100%;   
    4.     overflow: hidden;   
    5.     font-style: sans-serif;   
    6. }   
    7. body{   
    8.     width: 100%;   
    9.     height: 100%;   
    10.     font-family: 'Open Sans',sans-serif;   
    11.     margin: 0;   
    12.     background-color: #4A374A;   
    13. }   
    14. #login{   
    15.     position: absolute;   
    16.     top: 50%;   
    17.     left:50%;   
    18.     margin: -150px 0 0 -150px;   
    19.     width: 300px;   
    20.     height: 300px;   
    21. }   
    22. #login h1{   
    23.     color: #fff;   
    24.     text-shadow:0 0 10px;   
    25.     letter-spacing: 1px;   
    26.     text-align: center;   
    27. }   
    28. h1{   
    29.     font-size: 2em;   
    30.     margin: 0.67em 0;   
    31. }   
    32. input{   
    33.     width: 278px;   
    34.     height: 18px;   
    35.     margin-bottom: 10px;   
    36.     outline: none;   
    37.     padding: 10px;   
    38.     font-size: 13px;   
    39.     color: #fff;   
    40.     text-shadow:1px 1px 1px;   
    41.     border-top: 1px solid #312E3D;   
    42.     border-left: 1px solid #312E3D;   
    43.     border-right: 1px solid #312E3D;   
    44.     border-bottom: 1px solid #56536A;   
    45.     border-radius: 4px;   
    46.     background-color: #2D2D3F;   
    47. }   
    48. .but{   
    49.     width: 300px;   
    50.     min-height: 20px;   
    51.     display: block;   
    52.     background-color: #4a77d4;   
    53.     border: 1px solid #3762bc;   
    54.     color: #fff;   
    55.     padding: 9px 14px;   
    56.     font-size: 15px;   
    57.     line-height: normal;   
    58.     border-radius: 5px;   
    59.     margin: 0;   
    60. }  

    总结：

    复制代码
    代码如下:
    <input type="text" required="required" **placeholder="用户名"** name="u"></input>
    <input type="password" required="required" **placeholder="密码"** name="p"></input>

    placeholder="用户名"的作用:占位符

    以上就是本文的全部内容，希望对大家的学习有所帮助。

    上一篇：关于表格table嵌套,边框合并问题的解决方法
    下一篇：深入理解html表单输入监听
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    Html制作简单而漂亮的登录页面 Html,制作,简单,而,漂,亮的,