登录页面HTML-CSDN博客

本文链接：https://blog.csdn.net/2301_76272092/article/details/140421891

一、HTML

<!DOCTYPE html> 
<html>
   <head>
        <meta charset="utf-8">
        <title>登录</title>                 
        <style>
            *{
              margin: 0;
              padding: 0;
             }

            .container{
              height: 100%;
              background-image: linear-gradient(to right,#a3fbf9,#f89ed0);
             } 

            body{
              text-align: center;
             } 

            h1{
              font-size: 45px;
             }

            a:link,a:visited{
              color: rgba(230, 28, 139, 0.35);
              text-decoration: none;
             }

            a:hover{
              color: cyan;
              text-decoration: none;
             }

            table{
              background-color: white;
              margin-top: 50px;
              margin-left: 440px;
              width: 480px;
              height: 600px;
              border-radius: 20px;
             }

           .login input{
              font-size: 20px;
              width: 200px;
              height: 40px;
              background-image: linear-gradient(to right,#a3fbf9,#f89ed0);
              color: #fff;
              border-radius: 20px;
             }

            input{
              outline: none;
              width: 350px;
              border-bottom: 1px solid #dbdbdb;
              border-top: 0;
              border-left: 0;
              border-right: 0;
             }

            ::placeholder{
              font-size: 14px;
             }
         </style>
   </head>
    <body class="container">                                                         
        <form action="#" method="post" autocomplete="on">
            <table>
                 <tr>
                    <td class="login-wrapper">
                        <h1>登录</h1>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label><input type="text" placeholder="用户名" maxlength="10" required/></label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label><input type="text" placeholder="密码" maxlength="20" required/></label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan class="login">
                            <input type="submit" value="登录"/>
                        </scan>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan id="post">
                            没有账号？<a href="#">注册</a>
                        </scan>
                    </td>
                 </tr>
            </table>
        </form>
    </body>
</html>

二、HTML+CSS

HTML:

<!DOCTYPE html>                                                                                                  <!--声明为html-->
<html>                                                                                                           <!--html标签-->
   <head>                                                                                                        <!--头部标签-->
        <meta charset="utf-8">
        <title>登录</title>
        <link rel="stylesheet" type="text/css" href="index.css"/>                    
   </head>
    <body class="container">                                                                                     <!--内容标签-->                                                        
        <form action="#" method="post" autocomplete="on">                                                        <!--form表单-->
            <table>                                                                                              <!--定义表格-->
                 <tr>
                    <td class="login-wrapper">
                        <h1>登录</h1>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label><input type="text" placeholder="用户名" maxlength="10" required/></label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label><input type="text" placeholder="密码" maxlength="20" required/></label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan class="login">
                            <input type="submit" value="登录"/>
                        </scan>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan id="post">
                            没有账号？<a href="#">注册</a>
                        </scan>
                    </td>
                 </tr>
            </table>
        </form>
    </body>
</html>

css:

  /* 去掉网页空白 */ 
*{
    margin: 0;
    padding: 0;
}

.container{
    height: 100%;
    /* 创建一个表示多种颜色的渐变图片 */
    background-image: linear-gradient(to right,#a3fbf9,#f89ed0);
}

/* 设置背景颜色 */
body{
    text-align: center;
}

/* 设置字体大小 */
h1{
    font-size: 45px;
}

a:link,a:visited{
    color: rgba(230, 28, 139, 0.35);
    /* 去除超链接下划线 */
    text-decoration: none;
}

a:hover{
    color: cyan;
    /* 鼠标放置出现下划线 */
    text-decoration: none;
}

/* 表单背景颜色 */
table{
    background-color: white;
    margin-top: 50px;
    margin-left: 440px;
    width: 480px;
    height: 600px;
    border-radius: 20px;
}

.login input{
    font-size: 20px;
    width: 200px;
    height: 40px;
    background-image: linear-gradient(to right,#a3fbf9,#f89ed0);
    color: #fff;
    border-radius: 20px;
}

input{
    outline: none;
    width: 350px;
    border-bottom: 1px solid #dbdbdb;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

::placeholder{
    font-size: 14px;
}