Web小练习01

发布于:2025-02-10 ⋅ 阅读:(37) ⋅ 点赞:(0)

#制作简易网页#

本章包括主页、注册页面、登陆页面

主页

1.1主页代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <style>
        html,body{
            background: linear-gradient(20deg,rgb(141, 180, 211),rgb(207, 155, 209));
            }
    </style>
</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>

1.2 展示

注册页面

2.1 注册页面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <style>
        html,body{
            height:100%;
            width:100%;
            background: linear-gradient(20deg,rgb(148,207,255),rgb(253,200,255));
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <form method="get" action="index.html">
        <table width="500" border="0" cellpadding="10" align="center" bgcolor="pink">
        <tr align="center">
            <td colspan="2">
                会员登录
            </td>
        </tr>

        <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="miman" 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>

2.2 展示

登陆页面

3.1 登陆页面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <style>
        html,body{
            height:100%;
            width:100%;
            background: linear-gradient(20deg,rgb(148,207,255),rgb(253,200,255));
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

</head>
<body>
    <form method="get" action="login.html">

        <table border="0" width="650" align="center" cellspacing="0" celladding="10" bgcolor="#9E7AC0">
            <caption align="center" style="text-align: center;">
                <font size="8">注册</font>
            </caption>

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

            <tr align="center">
                <td align="right"><label for="yonghuming">用户名:</label></td>
                <td><input type="text" id="yonghuming" placeholder="请输入用户名"/></td>
            </tr>

            <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 align="center">
                <td align="right"><label for="miman">再次输入密码:</label></td>
                <td ><input type="password" id="miman" 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>

3.2 展示


网站公告

今日签到

点亮在社区的每一天
去签到