登录界面

2022/3/8 23:19:12

编程Tag： 登录 Font 界面 width height color border 1px

本文主要是介绍登录界面，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            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;   
            }  
        </style>
    </head>
    
    <body>
        <div id="login">
            <h1>Login</h1>
            <form method="post">
                <input type="text" name="username" id="username" value="" required="required" placeholder="用户名" />
                <br/>
                <input type="text" name="password" id="password" value="" required="required" placeholder="密码"/>
                <br/>
                <button class="but" type="submit">登录</button>
            </form>
        </div>
        
        
    </body>
</html>

这篇关于登录界面的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

登录界面

相关编程文章