网易邮箱注册静态页面

最新推荐文章于 2024-05-03 13:32:20 发布
最新推荐文章于 2024-05-03 13:32:20 发布
阅读量3.1k 收藏 6
点赞数 2
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/The_X_One/article/details/84112908
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易注册界面</title>

    <style>
        /*1.清空默认边距*/
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

        /*2.清空默认样式*/
        a{
            text-decoration: none;
            color: #003399;
        }
        ul, ol{
            list-style: none;
        }

        /*3.利用body设置整个界面的文字信息文字大小 文字字体 文字颜色*/
        body{
            font-size: 12px;
            color: #333;
        }
        
        .header{
            width: 960px;
            height: 80px;
            margin: 0 auto;
            padding-top: 30px;
            box-sizing: border-box;
        }
        .header .logo{
            width: 644px;
            height: 27px;
            /*图片不平铺，从0，0 开始显示*/
            background: url("img/wangyiregister/glb_v2.png") no-repeat 0 0;
            float: left;
        }
        .header .logo a{
            display: inline-block;
            width: 130px;
            height: 27px;
        }
        .header .links{
            float: right;
            width: 200px;
            height: 27px;
            text-align: right;
            padding-right: 5px;

        }
        .header .links a{
            line-height: 27px;
        }
        .content{
            width: 960px;
            height: 747px;
            margin: 0 auto;
        }
        .content .top{
            width: 960px;
            height: 38px;
            background: url("img/wangyiregister/line-center.png") repeat-x;
        }
        .content .left{
            width: 960px;
            height: 38px;
            background: url("img/wangyiregister/line-left.png") no-repeat left 0;
        }
        .content .right{
            width: 960px;
            height: 38px;
            background: url("img/wangyiregister/line-right.png") no-repeat right 0;
        }
        .content .right h1{
            font-size: 14px;
            color: white;
            line-height: 38px;
            text-indent: 20px;
        }
        .content .bottom{
            width: 960px;
            height: 709px;
        }
        .content .bottom .article{
            width: 645px;
            height: 709px;
            float: left;
            padding-top: 50px;
            box-sizing: border-box;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-top: none;
            border-right: none;
        }
        .content .bottom .article .articleTop{
            width: 527px;
            height: 66px;
            margin-left: 115px;

        }
        .content .bottom .article .articleTop ul{
            width: 412px;
            height: 34px;
            background: url("img/wangyiregister/tab.jpg");
        }
        .content .bottom .article .articleTop ul li{
            width: 137px;
            height: 34px;
            float: left;
            line-height: 34px;
            text-align: center;
            font-size: 14px;
        }
        .content .bottom .article .articleBottom{
            width: 566px;
            height: 547px;
            margin-left: 76px;
        }
        .content .bottom .article .articleBottom .line{
            width: 437px;
            height: 27px;
        }

        .content .bottom .article .articleBottom .vcodeline{
            width: 437px;
            height: 113px;
            margin-bottom: 10px;
        }

        .content .bottom .article .articleBottom .line .star{
            width: 0px;
            font-size: 14px;
            color: red;
        }
        .content .bottom .article .articleBottom .vcodeline .vcodestar{
            width: 0px;
            color: red;
            font-size: 14px;
        }

        .content .bottom .article .articleBottom .line span{
            float: left;
            width: 82px;
            height: 27px;
            line-height: 27px;
            text-align: right;
            font-size: 14px;
        }

        .content .bottom .article .articleBottom .vcodeline span{
            float: left;
            width: 82px;
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            text-align: right;
        }

        .content .bottom .article .articleBottom .line div{
            float: right;
            height: 27px;
            width: 333px;
        }

        .content .bottom .article .articleBottom .vcodeline div{
            float: right;
            height: 52px;
            width: 333px;
        }
        .content .bottom .article .articleBottom .line input{
            width: 214px;
            height: 27px;
            border: 1px solid #ccc;
        }
        .content .bottom .article .articleBottom .line select{
            width: 98px;
            height: 28px;
        }
        .content .bottom .article .articleBottom p{
            margin-left: 102px;
            margin-top: 7px;
            margin-bottom: 21px;
            color: #a69999;
        }
        .content .bottom .article .articleBottom .check{
            margin-bottom: 15px;
        }
        .content .bottom .article .articleBottom .register{
            width: 119px;
            height: 37px;
            background: url("img/wangyiregister/glb_v2.png") no-repeat -144px -360px;
            border: none;
            color: white;
            font-size: 14px;
            margin-left: 102px;
        }
        .content .bottom .article .articleBottom .line .special{
            width: 330px;
        }

        .content .bottom .article .articleBottom .vcodeline .vcodediv{
            width: 200px;
            height: 113px;
            float: left;
        }
        .content .bottom .article .articleBottom .vcodeline .vcodeInput{
            width: 200px;
            height: 27px;
            margin-top: 13px;
        }
        .content .bottom .article .articleBottom .vcodeline .vcodeimg{
            width: 120px;
            height: 52px;
            float: right;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .content .bottom .article .articleBottom .vcodeline .vcodeP{
            margin-left: 0px;
            margin-bottom: 11px;
        }

        .content .bottom .article .articleBottom .vcodeline .vcodesubmit{
            width: 140px;
            height: 30px;
            font-size: 14px;
        }

        .content .bottom .aside {
            width: 315px;
            height: 709px;
            float: right;
            padding-top: 106px;
            padding-left: 45px;
            box-sizing: border-box;
            border: 1px solid #e0e0e0;
            border-top: none;
            background-color: #f5f5f5;
        }
        .footer{
            width: 960px;
            height: 80px;
            margin: 0 auto;
        }
        .footer p{
            color: #999999;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        .footer p a {
            color: #999999;
        }
    </style>

</head>
<body>
<!--头部开始-->
<div class="header">
    <div class="logo">
        <a href="#" title="网易163免费邮"></a><a href="#" title="网易126免费邮"></a><a href="#" title="网易Yeah.net免费邮"></a>
    </div>
    <div class="links">
        <a href="#">了解更多</a>
        |
        <a href="#">反馈意见</a>
    </div>
</div>
<!--头部结束-->
<!--内容开始-->
<div class="content">
    <!--内容顶部开始-->
    <div class="top">
        <div class="left">
            <div class="right">
                <h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
            </div>
        </div>

    </div>
    <!--内容顶部结束-->
    <!--内容底部开始-->
    <div class="bottom">
        <div class="article">
            <div class="articleTop">
                <ul>
                    <li>注册字母邮箱</li>
                    <li>注册手机号码邮箱</li>
                    <li>注册VIP邮箱</li>
                </ul>
            </div>
            <div class="articleBottom">
                <div class="line">
                    <span>
                        <span class="star">*</span>邮件地址</span>
                    <div>
                        <input type="text" >@<select>
                        <option value="163.com">163.com</option>
                        <option value="126.com">126.com</option>
                        <option value="yeah.net">yeah.net</option>
                    </select>
                    </div>
                </div>
                <p>6~18个字符，可使用字母、数字、下划线，需以字母开头</p>

                <div class="line">
                    <span><span class="star">*</span>密码</span>
                    <div >
                        <input type="password" class="special">
                    </div>
                </div>
                <p>6~16个字符，区分大小写</p>

                <div class="line">
                    <span><span class="star">*</span>确认密码</span>
                    <div >
                        <input type="password" class="special">
                    </div>
                </div>
                <p>请再次填写密码</p>

                <div class="line">
                    <span><span class="star">*</span>手机号码</span>
                    <div >
                        <input type="text" class="special">
                    </div>
                </div>
                <p>忘记密码时，可以通过该手机号码快速找回密码</p>

                <div class="vcodeline">
                    <span><span class="vcodestar">*</span>验证码</span>
                    <div>
                        <div class="vcodediv">
                            <input type="text" class="vcodeInput">
                            <p class="vcodeP">请填写图片中的字符，不区分大小写</p>
                            <input type="submit" class="vcodesubmit" value="免费获取验证码">
                        </div>
                        <div class="vcodeimg">
                            <img src="img/wangyiregister/call.jpg" alt="">
                            <a href="#">看不清楚？换张图片</a>
                        </div>
                    </div>
                </div>

                <div class="line">
                    <span><span class="star">*</span>短信验证码</span>
                    <div >
                        <input type="text" class="special">
                    </div>
                </div>
                <p>请查收手机短信，并填写短信中的验证码</p>

                <p class="check">
                    <input type="checkbox" checked="checked">
                    同意<a href="#">"服务条款"</a>和<a href="#">"隐私权相关政策"</a>
                </p>
                <input type="submit" value="立即注册" class="register">
            </div>
        </div>
        <div class="aside">
            <img src="img/wangyiregister/reg_master.gif" alt="">
        </div>
    </div>
    <!--内容底部结束-->
</div>
<!--内容结束-->
<!--底部开始-->
<div class="footer">
    <p>
        <a href="#">关于网易</a>
        <a href="#">关于网易免费邮</a>
        <a href="#">邮箱官方博客</a>
        <a href="#">客户服务</a>
        <a href="#">隐私政策</a>
        |  网易公司版权所有 © 1997-2018
    </p>
    <p>数据来源：艾媒咨询《2015-2018中国个人邮箱行业研究报告》</p>

</div>
<!--底部结束-->

</body>
</html>

图片：

tab.jpg
在这里插入图片描述

glb_v2.png在这里插入图片描述
line-center.png
在这里插入图片描述
line-left.png
在这里插入图片描述
line-right.png
在这里插入图片描述
call.jpg
在这里插入图片描述
reg_master.gif
在这里插入图片描述

风凉ZZ
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
如何用dw编写一个网页注册：
qq_46924416的博客
10-28 5086
如何用dw编写一个网页注册： 代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> ul li{ text-indent: 3em; line-height:2em; } ul li{ list-style-type: none; list-style
163邮箱html页面
05-21
非常好的html页面模版
网易邮箱登录页面HTML5布局
最新发布
XiaoBino_O的博客
05-03 355
网易邮箱登录界面HTML5布局
编写网易邮箱登陆界面
qq_44651930的博客
10-25 2693
html+css编写网易邮箱登陆界面
制作邮件模板的规范
kola的博客
10-15 1517
邮件模板的制作和我们平时的写html是有一些不一样的地方，在做邮件模板的时候踩了很多坑，尤其是outlook邮箱客户端，会自动屏蔽掉很多html标签，导致我们的样式错乱，但是在客户端又无法调试，所以给我们造成了很多困扰，这个文章只记录一下我们做邮件模板需要注意的地方： 一：静态页面的制作 1.邮件模板中，图片及文字应具有平衡的比例，从门户的判断机制上看，邮件正文中文本的比例越合理，被判断为垃圾邮件的可能性越小，尤其是网易。 通常建议 根据邮件的内容将非效果性文字都以文本的形式展现。 2.切图片时候，在不影响
仿网易邮箱切换登录html代码
01-09
仿网易邮箱切换登录html代码，左侧tab点击切换登陆163，126，yeah等邮箱。
html做一个简单的网易邮箱注册
m0_56218765的博客
05-02 2753
效果呈现就是这样！ 主要用到的是比较简单的控件，单选框、下拉框、按纽， <body> <form> <label>邮件地址</label> <input type="text" name="address" maxlength="18" minlength="6"> <label>@</label> <select> &lt
HTML163网易邮箱登录页面源代码
11-16
在本主题中，我们聚焦于HTML在实现网易163邮箱登录页面中的应用，特别是`input`标签的使用。 HTML允许开发者构建结构化的文档，通过标签来定义文本、图像和其他元素的样式和功能。在登录页面中，`input`标签扮演着...
163邮箱网站原型 静态页面
05-23
"163邮箱网站原型静态页面"项目，就是以网易163邮箱为蓝本，创建的一个非交互式的、不依赖服务器动态生成内容的网页模型。通过这个项目，我们可以深入学习和探讨以下几个关键知识点： 1. HTML结构：静态页面的核心...
仿126邮箱的后台静态页面框架
10-12
【标题】"仿126邮箱的后台静态页面框架"主要涉及到的是网页设计与开发的知识点，特别是前端技术的应用。126邮箱是中国知名的电子邮件服务提供商之一，其用户界面设计简洁、功能齐全，因此，仿造126邮箱的后台静态...
126静态登录页面。。
04-17
标题中的“126静态登录页面”指的是一个用于模拟或实际使用的网易126邮箱登录界面的静态网页设计。在互联网行业中，静态页面通常是指不包含服务器端动态生成内容的HTML页面，它们的内容在用户访问时不会改变。这种...
邮件系统html静态网页模版
09-12
邮件系统html静态网页模版
网易邮箱注册HTML+CSS
m0_68183839的博客
05-16 3595
网易邮箱html+css
HTML连载56-网易注册界面实战之全部代码
weixin_44630050的博客
12-11 1818
一、今天完成了网易邮箱注册界面的全部编写，编写一个小小的网页就需要这么多时间来进行设计、测量、排版、编写、测试，才能进行使用，同时编写这个网页复习了几乎前面的所有内容，最后来一个汇总就可以了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...
HTML练习---网易邮箱登陆
热门推荐
gengzhi1293443962的博客
10-12 2万+
网易邮箱登录 免费邮 企业邮 VIP邮箱 帮助 163/126/yeah三大免费邮箱均默认开放 全面支持iPhone/iPad及Android等系统 客户端、手机与网页，实现发送、阅读邮件立即同步普通登录手机号登录  
html制作网易邮箱注册页面,用js实现163网易邮箱注册界面
weixin_35426913的博客
06-03 3086
html>mischenfunctioncheck(frm){varuname=frm.uname.value;varpwd1=frm.pwd1.value;varpwd2=frm.pwd2.value;varfs=frm.favorite;varfs_no=false;varuname_ok=true;varpwd1_ok=true;varpwd2_ok=true;document.get...
网易邮箱 html scc js
cakcxy的博客
02-23 891
html部分 考试模板 <div style="width: 1200px;height: 600px;background: #f2fff0;margin: 0px auto; border: solid 0.5px"> <div style="width: 100%;height: 15%;background: #fff7f4;"&gt...
HTML，模仿网易登陆界面
qq_51131331的博客
01-09 3621
1、展示效果： 2、网页代码： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-widt...
实现写邮箱html页面,用html写的简单的邮箱登陆界面
weixin_33519829的博客
06-03 2330
前一段总是要登陆邮箱收邮件，而且每次要打开不同的邮箱，很费劲，所以自己写了一个登陆163，新浪等邮箱的简单邮箱登陆页面1.[文件] login-mails.html~3KB 下载(132)qiqi.htmlfunction MyBlur(obj){if(document.all.mailcheck.value=="1"){var m_suffix1 = document.getElem...
html电话号码注册静态页面代码
01-08
以上是一个简单的HTML静态页面代码，用于电话号码注册。页面包含一个表单，表单中有一个标签和一个输入框用于输入电话号码，以及一个提交按钮用于提交注册。电话号码输入框的类型为"tel"，这样在移动设备上会自动...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值