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

内容发布更新时间 : 2024/11/14 20:43:06星期一 下面是文章的全部内容请认真阅读。

这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 html源码:

XML/HTML Code

<!DOCTYPE html>   <html lang=\ <head>  

    <meta charset=\     <title>Login</title>  

    <link rel=\ </head>   <body>  

    <div id=\

        <h1>Login</h1>           <form method=\

            <input type=\required=\placeholder=\用户名\

            <input type=\required=\密码\

            <button class=\登录</button>  

        </form>       </div>   </body>   </html>   css代码: CSS Code

html{   

    width: 100%;        height: 100%;        overflow: hidden;        font-style: sans-serif;    }    body{   

    width: 100%;        height: 100%;   

    font-family: 'Open Sans',sans-serif;        margin: 0;   

    background-color: #4A374A;    }   

#login{   

    position: absolute;   

    top: 50%;        left:50%;   

    margin: -150px 0 0 -150px;        width: 300px;        height: 300px;    }   

#login h1{   

    color: #fff;   

    text-shadow:0 0 10px;        letter-spacing: 1px;        text-align: center;    }    h1{   

    font-size: 2em;        margin: 0.67em 0;    }   

input{   

    width: 278px;        height: 18px;   

    margin-bottom: 10px;        outline: none;        padding: 10px;        font-size: 13px;        color: #fff;   

    text-shadow:1px 1px 1px;   

    border-top: 1px solid #312E3D;        border-left: 1px solid #312E3D;        border-right: 1px solid #312E3D;        border-bottom: 1px solid #56536A;        border-radius: 4px;   

    background-color: #2D2D3F;    }    .but{   

    width: 300px;        min-height: 20px;        display: block;   

    background-color: #4a77d4;        border: 1px solid #3762bc;        color: #fff;   

    padding: 9px 14px;        font-size: 15px;        line-height: normal;        border-radius: 5px;        margin: 0;   

}   总结: 代码如下:

<input type=\required=\**placeholder=\用户名\name=\

<input type=\required=\**placeholder=\密码\name=\

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

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

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4 ceshi