宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取

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

先来看看样子。

Html制作简单而漂亮的登录页面-风君子博客

html源码:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Login</title>  
        <link rel="stylesheet" type="text/css" href="Login.css"/>  
    </head>  
    <body>  
        <p id="login">  
            <h1>Login</h1>  
            <form method="post">  
                <input type="text" required="required" placeholder="用户名" name="u"></input>  
                <input type="password" required="required" placeholder="密码" name="p"></input>  
                <button class="but" type="submit">登录</button>  
            </form>  
        </p>  
    </body>  
    </html>

css代码:

CSS Code复制内容到剪贴板

  1. 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="text" required="required" **placeholder="用户名"** name="u"></input> 
<input type="password" required="required" **placeholder="密码"** name="p"></input>

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

Html制作简单而漂亮的登录页面-风君子博客

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

相关推荐:

向HTML中插入视频并兼容所有浏览器的方法

以上就是Html制作简单而漂亮的登录页面的详细内容,更多请关注风君子博客其它相关文章!