藏宝游传奇

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 181|回复: 0

[网页制作] Html制作简单而漂亮的登录页面

[复制链接]
  • TA的每日心情
    开心
    2020-12-29 20:57
  • 签到天数: 3 天

    [LV.2]圆转纯熟

    4332

    主题

    4336

    帖子

    26万

    积分

    超级版主

    Rank: 8Rank: 8

    积分
    265717
    发表于 2020-11-5 11:14:12 | 显示全部楼层 |阅读模式
    这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    先来看看样子。
    01.jpg
    html源码:
    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代码:
    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. }
    复制代码
    总结:
    1. <input type="text" required="required" **placeholder="用户名"** name="u"></input>
    2. <input type="password" required="required" **placeholder="密码"** name="p"></input>
    复制代码
    placeholder="用户名"的作用:占位符
    02.jpg
    以上就是本文的全部内容,希望对大家的学习有所帮助。

    回复

    使用道具 举报

    Archiver|手机版|小黑屋|藏宝游

    GMT+8, 2021-10-20 03:28 , Processed in 0.046536 second(s), 30 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表