H5网易注册页面实战

最新推荐文章于 2023-05-24 18:13:57 发布
最新推荐文章于 2023-05-24 18:13:57 发布
阅读量511 收藏
点赞数
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43689609/article/details/103104040
版权

H5网易注册页面实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易注册界面</title>
    <style>
        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
        }
        a{
            text-decoration: none;
            color:#ccc;
        }

        body{
            font-size: 12px;
        }

        .header{
            width:960px;
            height:80px;
            margin:0 auto;
            padding-top: 28px; 
            box-sizing:border-box;
        }
        .header .logo{
            width:644px;
            height:27px;
            background-image: url("2.png");
            background-repeat: no-repeat;  
            background-position:0px 0px;
            float:left;
        }
        .header .logo a{
            width:125px;
            height:27px;
            display:inline-block; 
        }
        .header .links{
            width:200px;
            height:27px;
            float:right;
            text-align:right; 
        }
        .header .links a{
            color:#ccc;
            line-height:27px; 
        }
        .content{
            width:960px;
            height:600px;
            margin:0 auto;
        }
        .content .top{
            width:960px;
            height:38px;
            background:url("lc.png") repeat-x;
        }
        .top .top-left{
            width:960px;
            height:38px;
            background:url("images/line-left.png") no-repeat left 0; 
        }
        .top h1{
            color:white;
            font-size:12px;
            line-height:38px; 
            text-indent:2em;  
        }
        .top .top-right{
            width:960px;
            height:38px;
            background:url("1.png") no-repeat right -530x;
            float:right;
        }

        .content .bottom{
            width:960px;
            height:562px;
        }
        .bottom .bottom-left{
            width:642px;
            height:562px;
            float:left;
            padding-top:50px;
            padding-left:80px;
            border:1px solid #cdcdcd;
            border-top:none;
            box-sizing:border-box;
            background-color: #f8f8f8;
        }
        .bottom-left .left-top{
            width:560px;
            height:60px;
        }
        .left-top ul{
            list-style:none;  
            width:412px;
            height:34px;
            background:url("images/tab.jpg") no-repeat left 0;
        }
        ul li{
            float:left;
            width:137px;
            height:34px;
            line-height:34px;
            text-align:center;
        }
        li a{
            color: #0f0f0f;
            font-size:15px;
        }

        .bottom-left .left-bottom{
            width:560px;
            height:373px;
        }
        .left-bottom .input-line{
            width:413px;
            height:28px;
        }
        .input-line span{
            float:left;
            width:60px;
            height:28px;
            font-size:13px;
            line-height:28px;
            text-align:right;
        }
        .input-line .star {
            font-size:16px;
            width:0;
            color: red;
        }
        .input-line div{
            float:right;
            width:333px;
            height:28px;
        }
        .input-line input{
            width:210px;
            height:24px;
        }
        .input-line select{
            width:100px;
            height:26px;
        }
        .input-line img{
            width:100px;
            height:28px;
            float:left;
            margin-left:19px;
        }

        .input-line .vcode-input{
            float:left;
        }
        .left-bottom p{
            margin-left:80px;
            line-height:28px;
        }
        .left-bottom .pwd{
            width: 332px;
            height: 24px;
        }
        .left-bottom  input[type=submit]{
            width:119px;
            height:37px;
            background:url("2.png") no-repeat -144px -360px;
            border:none;
            font-size:20px;
            color:white;
            margin-left:80px;
            margin-top:22px;
        }

        .bottom .bottom-right{
            width:318px;
            height:562px;
            background: #f5f5f5;
            float:right;
            padding-top:105px;
            padding-left:45px;
            box-sizing:border-box;
            border:1px solid #ccc;
            border-top:none; 
        }

        .footer{
            width:960px;
            height:48px;
            /*background-color:green;*/
            margin:0 auto;
        }
        .footer p{
            color:#ccc;
            line-height:48px;
            text-align:center;
        }
    </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="top-left">
            <div class="top-right">
                <h1>欢迎注册无限容量网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
            </div>
        </div>
    </div>
    <!--中顶部结束-->

    <!--中底部开始-->
    <div class="bottom">
        <div class="bottom-left">
            <div class="left-top">
                <ul>
                    <li><a href="#">注册字母邮箱</a></li>
                    <li><a href="#">注册手机号码邮箱</a></li>
                    <li><a href="#">注册VIP邮箱</a></li>
                </ul>
            </div>
            <div class="left-bottom">
                <div class="input-line">
                    <span><span class="star">*</span>邮件地址</span>
                    <div>
                        <input type="text" value="建议使用手机号码注册" />@<select>
                        <option value="163.com">163.com</option>
                        <option value="126.com">126.com</option>
                        <option value="lnj.net">lnj.com</option>
                    </select>
                    </div>
                </div>
                <p>6~18个字符，可使用字母、数字、下划线。需以字母隔开</p>

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

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

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

                <div class="input-line">
                    <span><span class="star">*</span>验证码</span>
                    <div>
                        <input class="vcode-input" type="text" />
                        <img src="https://reg.mail.163.com/unireg/call.do?cmd=register.verifyCode&v=common/verifycode/vc_en&vt=main_acode&env=787067117193&t=1573914003793" />
                    </div>
                </div>
                <p>请填写图片中的字符，不区分大小写</p>

                <p>
                    <input type="checkbox" checked="checked" name="tongyi" />
                    同意<a href="#">“服务条款”</a>和<a href="#">“隐私权保护和个人信息利用政策”</a>
                </p>

                <input type="submit" value="立即注册" />
            </div>
        </div>
        <div class="bottom-right">
            <img src="1.png" alt="" />
        </div>
    </div>
    <!--中底部结束-->
</div>
<!--中部结束-->

<!--尾部开始-->
<div class="footer">
    <p>
        <a href="#">关于网易</a>
        <a href="#">关于网易免费邮</a>
        <a href="#">邮箱官方博客</a>
        <a href="#">客户服务</a>
        <a href="#">隐私政策</a>
        | 网易公司版权所有 © 1997-2015
    </p>
</div>
<!--尾部结束-->
</body>
</html>

效果图：![网易注册实战](https://img-blog.csdnimg.cn/20191116224559568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY4OTYwOQ==,size_16,color_FFFFFF,t_70)

没秃头的带学生
关注
专栏目录
简易网易注册页面
Veronnit的博客
07-17 439
<!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,
HTML5前端开发入门之网易注册界面实战
qq_41886761的博客
12-30 1093
代码如下： 图片可通过谷歌浏览器在网易邮箱官网直接下载 &lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:http="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;网易邮箱注册
网易注册页面
06-15
简单实用的小代码
HTML网页练习之网易邮箱注册页面
12-01
使用HTML+CSS+JavaScript搭建的网易邮箱注册页面，所用代码和素材都已经包含在压缩包中，涉及网页的搭建和客户端对用户名、密码等的格式验证。欢迎大家下载参考
网易注册界面
Ccsqw4的博客
08-07 336
第一次编写，希望大佬指正
h5优秀控件_H5匠人手册：霸屏H5实战解密
weixin_39931146的博客
12-23 361
这是一本关于H5设计方法和设计流程的书，作者为近年来佳作频出的网易传媒设计中心，其代表作品有《娱乐圈画传》《里约小人大冒险》《我是一只快乐的羊驼》《滑向童年》等。《H5匠人手册：霸屏H5实战解密》通过交互、视觉和动效三部分内容，从产品策划、用户心理、交互手段、视觉渲染、动效运用、移动界面设计常识等方面进行系统论述，通过理论讲解和案例分析，详细介绍了提升 H5 设计质量的方法和一些实用性强...
微信小程序H5页面源码解析与实战教程
资源摘要信息:"网易云课堂_企业城微信小程序js代码前台前端H5页面源码.rar" ### 知识点概述 #### 微信小程序开发基础 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的概念，用户扫一扫...
精讲前端实战项目之移动端网易云首页（附源码）
web15286201346的博客
03-02 1424
本篇文章分享给学习前端的朋友，可能你们长时间的学习了理论知识，对html，css，JavaScript等基础知识已经是相当熟悉了。但是没有一个自己的作品，那是因为缺乏练习一些实战项目。今天这个就是一个很好的实战例子——移动端网易云首页，刚开始就做一些简单的静态网页。 本人会用到很多标签，如果忘记了可以查看下面两篇博文。 标签详解第一篇 标签详解第二篇 一、效果展示 二、技术要求 因为我们做的是一个静态页面，所以没有用到JavaScript部分的内容，用html编写整体框架，用css做修饰就好了。其中ima
Html5用户注册页面
zym0218的博客
07-18 2528
要想制作一个美观的用户注册页面，可不简单，下面来看看小编制作的用户注册页面，希望对大家有所帮助。
H5做一个登录注册界面
最新发布
qq_63825941的博客
05-24 3726
页面包含两个表单：登陆表单和注册表单。初始状态下，只显示登陆表单，注册表单被隐藏。当用户点击“马上注册”时，登陆表单被隐藏，注册表单被显示。当用户点击“返回登陆”时，注册表单被隐藏，登陆表单被显示。
H5移动端很漂亮的注册界面
07-15
纯h5实现的简介漂亮的移动端注册界面，拿来即用，若有不妥之处，还请指正。 纯h5实现的简介漂亮的移动端注册界面，拿来即用，若有不妥之处，还请指正。
HTML网页设计之仿注册网易免费邮箱界面
09-22
应用HTML语言设计，简易设计，仿照网易163免费邮箱注册界面，添加用户名输入字符串控制长度以及匹配前后输入密码是否正确。
网易通行证注册
06-03
包含网易通行证注册界面和注册成功界面。代码、图片齐全。能够对对用户输入信息进行提示，输入完成后进行输入验证。
HTML163网易邮箱登录页面源代码
11-16
HTML163网易邮箱登录页面源代码 input标签
蜗牛—JavaScript学习之仿网易邮箱注册页面
树上的大腰子
05-18 3210
body { font:12px/25px 宋体; color:#333; background:#d4e8f3; } ul,li,dl,dt,dd,input { margin:0; padding:0; } ul { list-style:none; } #mail { margin:20px auto; width:646px; } #mail .menu { float:left; mar
前期H5+CSS3网易邮箱注册页面
gl1095689956的博客
03-15 4164
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;网易注册界面&lt;/title&gt; &lt;link rel="stylesheet" href="css/
CSS - 盒子模型
曹振飞的博客
07-02 560
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。 因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。内容：（content）盒子里面的东西；填充：(padding)怕盒子的内嵌泡沫；div{ padding-top:20px; padding-rig
CSS编写静态网易注册界面
shwanglp的专栏
12-11 5604
注册网易免费邮箱 body{ font-size:12px; font-family:"宋体"; color: #333; } /*清除内边距和外边距*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值