HTML学习第二天

最新推荐文章于 2024-11-14 00:00:11 发布

Labef_Peppa

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量131

点赞数

文章标签： html

本文链接：https://blog.csdn.net/n374471906/article/details/108716676

版权

编写一个简单的百度注册页面：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center">
        <tr>
            <td>
                <img src="images/logo_baidu.jpg" />
            </td>
            <td></td>
        </tr>

        <tr>
            <td><strong>添加注册信息</strong></td>
            <td></td>
        </tr>

        <tr>
            <td>邮箱：</td>
            <td><input type="text" name="youxiang" /></td>
        </tr>

        <tr>
            <td>密码：</td>
            <td><input type="password" name="password" /></td>
        </tr>

        <tr>
            <td>确认密码：</td>
            <td><input type="password" /></td>
        </tr>

        <tr>
            <td>验证码：</td>

            <td>
                <table>
                    <tr>
                        <td><input type="text" name="yanzheng" /></td>
                        <td> <img src="images/yz.jpg" /></td>
                        <td>
                            <a href="#">注册用户</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked" />我已阅读并接受
                <a href="#">《百度用户协议》</a>
            </td>
        </tr>

        <tr>

            <td></td>
            <td>
                <table width="80%">
                    <td><img src="images/button.jpg" /></td>
                    <td><input type="reset" value="重新填写" /></td>
                </table>
            </td>
        </tr>




    </table>
</body>
</html>

结果展示：
在这里插入图片描述

体会：
按照表格的格式来写这个页面，写到验证码这一行和下一行会发现，由于“我已阅读…”过长，如果验证码这一行用四个表格块就会把验证码图片和输入框之间拉开很大差距和下一行对齐，最后一行也是一样，所以就采取一个table内套table的方法，如验证码这一行，只有验证码三个字是第一个，之后三个全是一个，但是这个中容纳的是一个单行的table，table这一行中包含三个来容纳三个选项，从而就能够实现紧贴不分离了。