web前端---html 5----QQ登入页面(初)

发布于:2024-10-18 ⋅ 阅读:(5) ⋅ 点赞:(0)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .theme{

            width: 800px;

            height: 600px;

            margin: 0px auto;

        }

       .head{

            width: 100%;

            height: 40px;

            padding: 10px 10px;

            background-color:#38a4e7;

            color: #ffffff;

            font-size: 15px;

       }

       .box li {

        list-style: none;

        float: left;

        border-right:1.5px solid #ffffff ;

       }

       .box li a {

        padding:5px ;

       }

       .box li:last-child{

        border-right: 0;

       }

       .form-group p input{

        width: 280px;

        height: 30px;

       }

       .form-group p button{

        width: 285px;

        height: 35px;

        background-color: rgb(40, 177, 83);

        border: none;

        color: #ffffff;

       }

       .box1 li{

        list-style: none;

        width: 1px;

        height: 300px;

        background-color: #939393;

       }

    </style>

</head>

<body>

    <form action="#" method="post">

    <div class="theme">

        <div class="head">

            <table >

                <tr>

                    <td><img src="./wb前端/img/down.jpeg" alt="qq" style="height: 40px ;width: 40px;"></td>

                    <td><font size="3" color="ffffff">QQ登录</font></td>

                    <td width="400"></td>

                    <td class="box">

                        <li>    

                             <a><img src="./wb前端/img/down (2).jpeg" alt="?" style="height: 17px;width: 20px;">QQ登录</a>

                        </li>

                        <li><a>授权管理</a></li>

                        <li><a >申请接入</a></li>

                    </td>

                </tr>

            </table>

        </div>

        <table>

           <tr>

                <td width="40"></td>

                <th>

                    <p><h2>帐号密码登录</h2></p>

                    <p>推荐使用<font color="#387be7">快速安全登录</font>,防止盗号。</p>

                    <div class="form-group">

                    <p><input type="text" name="enter" id="enter" placeholder="支持QQ号/邮箱/手机号登录" ></p>

                    <p><input type="password" name="password" id="password" placeholder="密码" ></p>

                    <p><button type="submit" name="ENER" >授权并登录</button> </p>

                    </div>

                    <br>

                    <pre size="1">                      忘记密码?丨注册新账号丨意见反馈</pre>

                </th>

                <td width="30"></td>

                <td class="box1" width="30"><li></li></td>

                <td>

                    <hr style="color: #939393;" >

                      <a><font color="#3fb3fb">腾讯网 </font>将获得以下权限:</a>  

                    <hr style="color: #939393;">

                      <a ><input type="checkbox" name="all" id="all" value="all">全选</a>

                    <hr style="color: #939393;">

                        <a ><input type="checkbox" name="get" id="get" value=get">获得您的昵称、头像、性别及会员信息</a>

                        <br>

                        <br>

                        <br>

                    <p><a>授权后表明你已同意<font color="#3fb3fb">QQ登录服务协议</font> </a></p>

                </td>

            </tr>

        </table>    

    </div>

    </form>

</body>

</html>