欢迎来到萧静默的博客

书山有路勤为径,学海无涯苦作舟。

HTML-注册页面(表单布局)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表单注册页面</title>
    </head>

    <body>
        <table border="1px" align="center" width="100%" cellpadding="0px" cellspacing="0px">
            <!--LOGO部分-->
            <tr>
                <td>
                    <!--嵌套一行三列表格-->
                    <table border="0px" width="100%" cellspacing="0px" height="60px">
                        <tr>
                            <td width="33.3%"><img src="../img/logo.png" height="57px" alt="LOGO图片"></td>
                            <td width="33.3%"><img src="../img/header.png" height="57px" alt="LOGO图片" /></td>
                            <td width="33.3%" align="right"><a href=#>登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
                                <a href=# target="_blank">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;
                                <a href=#>购物车</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <!--导航栏-->
            <tr height="50px">
                <!--五组文字加4个空格-->
                <td bgcolor="black">&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="排版标签相关学习/04_网站信息显示界面.html" target="_blank">
                        <font size="5" color="white">首页</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="排版标签相关学习/04_网站信息显示界面.html">
                        <font color="white">手机数码</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="排版标签相关学习/04_网站信息显示界面.html">
                        <font color="white">电脑办公</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="排版标签相关学习/04_网站信息显示界面.html">
                        <font color="white">文档资料</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="排版标签相关学习/04_网站信息显示界面.html">
                        <font color="white">学习视频</font>
                    </a>
                </td>
            </tr>
            <!--注册页面-->
            <tr>
                <td width="100%" height="600px" background="../img/regist_bg.jpg">
                    <form action="#" method="get" name="regForm">
                        <table border="1px" width="750px" height="360px" align="center" cellpadding="opx" cellspacing="0px" bgcolor="white">
                            <tr height="40px">
                                <td colspan="2">
                                    <font size="4">会员注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER</td>
                                <!--<td>32</td>-->
                            </tr>
                            <tr>
                                <td>用户名:</td>
                                <td>
                                    <form><input type="text" name="user" size="34px" /></form>
                                </td>
                            </tr>
                            <tr>
                                <td>密码:</td>
                                <td><input type="password" name="password" size="34px" /></td>
                            </tr>
                            <tr>
                                <td>确认密码:</td>
                                <td><input type="password" name="repassword" size="34px" /></td>
                            </tr>
                            <tr>
                                <td>Email:</td>
                                <td><input type="text" name="email" size="34px" /></td>
                            </tr>
                            <tr>
                                <td>姓名:</td>
                                <td><input type="text" name="username" size="34px" /></td>
                            </tr>
                            <tr>
                                <td>性别:</td>
                                <td>
                                    <input type="radio" name="sex" value="男" /><input type="radio" name="sex" value="女" /></td>
                            </tr>
                            <tr>
                                <td>出生日期:</td>
                                <td><input type="date" name="birthday" size="34px" /></td>
                            </tr>
                            <tr>
                                <td>验证码:</td>
                                <td><input type="text" name="yzm" />
                                    <img src="../img/yanzhengma.png" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <input type="submit" value="注册" name="regetiest" />
                                    <input type="reset" value="重置" name="reset" />
                                </td>
                                <!--<td>32</td>-->
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>
            <!--广告图片2-->
            <tr>
                <td>
                    <img src="../img/footer.jpg" width="100%" />
                </td>
            </tr>
            <!--友情链接与版权信息-->
            <tr>
                <table>
                    <tr align="center">
                        <td align="center">
                            <a href="排版标签相关学习/04_网站信息显示界面.html" target="_blank">
                                <font>关于我们</font>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="排版标签相关学习/04_网站信息显示界面.html">
                                <font>联系我们</font>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href=#>
                                <font>招贤纳士</font>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href=#>
                                <font>法律声明</font>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="链接列表标签学习/01_无序列表.html" target="_blank" <font>友情链接</font>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href=#>
                                <font>支付方式</font>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href=#>
                                <font>配送方式</font>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href=#>
                                <font>服务声明</font>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href=#>
                                <font>广告声明</font>
                            </a>
                            <p>
                                <font face="楷体">Copyright @ 2018-2020 萧静默 版权所有</font>
                            </p>
                        </td>
                    </tr>
                </table>
            </tr>

        </table>
    </body>

</html>

 

posted @ 2020-10-19 14:32  萧静默  阅读(1240)  评论(0编辑  收藏  举报