Bootstrap

Web前端第一次作业

主页代码:
 

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

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

    <title>主页</title>

</head>

<body>

    <h1 align="center">主页</h1><hr>

    <p><a href="login.html" target="_blank">登录</a></p>

    <p><a href="register.html" target="_blank">注册</a></p>

</body>

</html>

效果:

登录页面代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>登录页面</title>

</head>

<body>

    <form method="get" action="index.html">

        <table width="500" border="0" cellpadding="10" align="center" bgcolor="#98F5F9">

            <tr align="center">

                <td align="right"><label for="zhanghao">账号:</label></td>

                <td><input type="text" id="zhanghao" placeholder="请输入账号"/></td>

            </tr>

            <tr align="center">

                <td align="right"><label for="mima">密码:</label></td>

                <td><input type="password" id="mima" placeholder="请输入密码"/></td>

            </tr>

            <tr>

                <td colspan="2" height="50" align="center">

                    <input type="submit" value="登录" />

                    <input type="reset" value="重置" />

                </td>

            </tr>

        </table>

    </form>

</body>

</html>

效果:

注册页面代码:
 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>注册页面</title>

</head>

<body>

    <form method="get" action="login.html">

    <table border="0" width="650" align="center" cellpadding="0" cellspacing="0" bgcolor="#E8E8E8">

        <caption align="center" style="text-align: center;"><font size="8">注册</caption></font>

            <tr align="center">

                <td colspan="2">注册</td>

            </tr>

            <tr align="center">

                <td align="right"><label for="nicheng">昵称:</label></td>

                <td><input type="name" id="nicheng" placeholder="昵称"</td>

            </tr>

            <tr align="center">

                <td align="right"><label for="nicheng">账号:</label></td>

                <td><input type="name" id="zhanghao" placeholder="账号"</td>

            </tr>

            <tr align="center">

                <td align="right"><label for="mima">密码:</label></td>

                <td><input type="name" id="mima" placeholder="密码"</td>

            </tr>

            <tr align="center">

                <td align="right"><label for="mima">再次输入密码:</label></td>

                <td><input type="name" id="mima" placeholder="再次输入密码"</td>

            </tr>

            <tr>

                <td colspan="2" height="50" align="center">

                    <input type="submit" value="注册" />

                    <input type="reset" value="重置" />

                </td>

            </tr>

    </table>

</body>

</html>

效果:

;