首页 前端知识 网易邮箱登录页面HTML5布局

网易邮箱登录页面HTML5布局

2024-10-28 20:10:31 前端知识 前端哥 640 96 我要收藏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易邮箱登录</title>
    <style>
        table{
            border-spacing: 10px;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <table width="100%" heignt="200px">
        <tr>
            <td><img src="163logo.gif" alt=""></td>
            <td align="right">
                <a href="">免费邮</a>&nbsp;
                <a href="">企业邮</a>&nbsp;
                <a href="">VIP邮箱</a>&nbsp;
                <a href="">帮助</a>&nbsp;
            </td>
        </tr>
    </table>
    <br>
    <form action="" method="post" enctype="multipart/form-data">
        <table width="100%">
            <tr>
                <td><img src="imap.jpg" alt=""></td>
                <td rowspan="2" valign="top">

                    <form action="" method="post" enctype="multipart/form-data">
                        <table style="border: 2px solid;" width="100%">
                            <tr >
                                <td colspan="2"><h2><img src="loginIcon.gif" alt="">普通登录</h2></td>
                            </tr>
                            <tr valign="top">
                                <td >用户名</td>
                                <td><input type="email" name="uname" maxlength="32">@163.com
                                <br>
                            <br></td>
                            </tr>
                            <tr valign="top">
                                <td>&nbsp;</td>
                                <td><input type="password" name="pwd" maxlength="32">
                                <br>
                            <br></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td><select name="bb" id="">
                                    <option value="">默认</option>
                                    <option value="">极速</option>
                                </select>
                            <br>
                        </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <input type="radio" name="way">自动登录
                                    <input type="radio" name="way" checked>SSL
                                <br>
                            <br></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <input type="submit" value="登录">&nbsp;&nbsp;
                                   <input type="button" value="注册">
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>163/126/yeah三大免费邮箱均默认开放</li>
                        <li>全面支持iPhone/iPad及Android等系统</li>
                        <li>客户端、手机与网页,实现发送、阅读邮件立即同步普通登录手机号登录</li>
                    </ul>
                </td>
            </tr>
        </table>
    </form>
    <table bgcolor="#DBE3E2" width="100%">
        <tr>
            <td> <img src="netease_logo.gif" alt=""></td>
            <td align="right">
                <a href="">关于网易</a>&nbsp;
                <a href="">免费邮</a>&nbsp;
                <a href="">官方博客</a>&nbsp;
                <a href="">客服服务</a>&nbsp;
                <a href="">隐私政策</a>&nbsp;
                |<a href="">网易公司版权所有© 1997-2011</a>
            </td>
        </tr>
    </table>

</body>
</html>

在这里插入图片描述

这个代码中的 a标签的下划线是删掉的。(因为没找到页面中的原图片,就没放新图了)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19353.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!