网易邮箱登录页面HTML5布局

已于 2024-06-03 21:08:42 修改
阅读量358 收藏
点赞数 2
文章标签： html5 前端 html
于 2024-05-03 13:32:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiaoBino_O/article/details/138414593
版权

在这里插入图片描述

<!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标签的下划线是删掉的。（因为没找到页面中的原图片，就没放新图了）

真想不出名啦
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 网页制作 网易邮箱登录页面 关键代码
qq_36074362的博客
10-12 4万+
网易邮箱登录        免费邮 企业邮 VIP邮箱 帮助                                   163/126/yeah三大免费邮箱均默认开放      全面支持iPhone/iPad及Android等系统      客户端、手机与网页，实现发送、阅读邮件立即同步普通登录手机号登录              
HTML网页设计之仿注册网易免费邮箱界面
09-22
应用HTML语言设计，简易设计，仿照网易163免费邮箱注册界面，添加用户名输入字符串控制长度以及匹配前后输入密码是否正确。
网易邮箱注册界面设计 html
zjl-wgf
02-27 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;139-网易注册界面搭建&lt;/title&gt; &lt;style&gt; body,div,dl,dt,dd,
CSS - 盒子模型
曹振飞的博客
07-02 529
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。 因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。内容：（content）盒子里面的东西；填充：(padding)怕盒子的内嵌泡沫；div{ padding-top:20px; padding-rig
HTML163网易邮箱登录页面源代码
11-16
HTML163网易邮箱登录页面源代码 input标签
网易邮箱登陆页面HTML5
qq_64960245的博客
05-26 1548
1.利用插入图片。2.利用和对免费邮到帮助进行超链接。
HTML练习---网易邮箱登陆
热门推荐
gengzhi1293443962的博客
10-12 2万+
网易邮箱登录 免费邮 企业邮 VIP邮箱 帮助 163/126/yeah三大免费邮箱均默认开放 全面支持iPhone/iPad及Android等系统 客户端、手机与网页，实现发送、阅读邮件立即同步普通登录手机号登录  
仿网易邮箱切换登录html代码
01-09
仿网易邮箱切换登录html代码，左侧tab点击切换登陆163，126，yeah等邮箱。
HTML网页练习之网易邮箱注册页面
12-01
在这个项目中，开发者使用HTML、CSS和JavaScript这三种核心技术，构建了一个类似于网易邮箱的实际注册页面。这个过程不仅涵盖了网页的基本结构和布局，还涉及到客户端的数据验证，确保用户输入的信息符合预定格式。 ...
如梦令+网易163邮箱 HTML+CSS代码
07-31
这个名为“如梦令+网易163邮箱 HTML+CSS代码”的压缩包文件很可能是包含了一个关于如何使用这两种语言来设计和格式化网易163邮箱界面的示例代码。下面，我们将深入探讨HTML和CSS在创建网页，尤其是邮箱界面中的应用...
网易邮箱大师界面实现.zip
06-27
仿网易邮箱大师界面实现，包含全部源码和最终效果。有侧边栏和底部导航栏，可以查看邮件和联系人。
163邮箱html页面
05-21
非常好的html页面模版
高仿网易邮箱登录界面
01-01
总结来说，复刻网易邮箱登录界面需要综合运用HTML来构建页面结构，CSS来设计视觉样式，以及JavaScript来实现动态交互。这个过程不仅能够帮助我们理解前端开发的基本流程，还能提升对用户体验设计的理解。通过实践，...
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
11-23
通过这个插件，开发者可以快速地创建出类似网易邮箱的全屏滚动页面，同时利用 jQuery 和 fullPage.js 提供的特性，实现动态的视觉效果和流畅的用户体验。对于那些希望创建吸引眼球的全屏滚动网站的开发者来说，这是...
网易邮箱登录界面制作方法
money_monkey的博客
07-14 4370
代码】网易邮箱登录界面制作方法。
实现写邮箱html页面,用html写的简单的邮箱登陆界面
weixin_33519829的博客
06-03 2331
前一段总是要登陆邮箱收邮件，而且每次要打开不同的邮箱，很费劲，所以自己写了一个登陆163，新浪等邮箱的简单邮箱登陆页面1.[文件] login-mails.html~3KB 下载(132)qiqi.htmlfunction MyBlur(obj){if(document.all.mailcheck.value=="1"){var m_suffix1 = document.getElem...
网易邮箱登录页面html5布局,css实现tab效果仿163邮箱样式
weixin_35826166的博客
06-03 2471
复制代码代码如下:163邮箱tab*{margin: 0px;padding: 0px;}.dvTab{font-family: 'Microsoft Yahei',verdana;font-size:14px;height: 36px;position: absolute;left: 0px;width: 100%;top: 52px;}.menu{margin-left:12px;color:...
HTML制作简易登录页面（网易笔记）
m0_55068275的博客
12-13 2704
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网易邮箱登录页面演示</title> <!--<style type="text/css"> header,section,footer{border: 1px solid red;} aside,section{display: inline-block;} <.
html制作网易邮箱登录页面
最新发布
06-02
HTML是一种标记语言，可以用于制作网页。如果您想制作网易邮箱登录页面，可以按照以下步骤进行： 1. 创建一个HTML文件，可以使用任何文本编辑器来创建，例如记事本、Sublime Text等。 2. 在HTML文件中使用DOCTYPE声明，告诉浏览器使用哪个HTML版本。 3. 在<head>标签中添加<meta>标签，用于指定编码方式和视口设置等信息。 4. 在<body>标签中添加表单元素，例如<input>、<label>等，用于收集用户输入的信息。 5. 使用CSS样式表美化页面，例如调整颜色、字体、布局等。 以下是一个简单的HTML代码示例，实现了网易邮箱登录页面的基本功能： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网易邮箱登录</title> <style> /* CSS样式表 */ body { background-color: #f2f2f2; font-family: Arial, sans-serif; } form { width: 400px; margin: 0 auto; background-color: #fff; padding: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } label { display: block; margin-bottom: 10px; } input { width: 100%; height: 40px; border-radius: 5px; border: none; padding: 10px; margin-bottom: 20px; box-sizing: border-box; } input[type="submit"] { background-color: #d33; color: #fff; cursor: pointer; } input[type="submit"]:hover { background-color: #c00; } </style> </head> <body> <form> <h1>网易邮箱登录</h1> <label for="email">邮箱</label> <input type="email" id="email" name="email" required> <label for="password">密码</label> <input type="password" id="password" name="password" required> <input type="submit" value="登录"> </form> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值