网易邮箱注册HTML+CSS

最新推荐文章于 2024-04-22 13:58:05 发布
最新推荐文章于 2024-04-22 13:58:05 发布
阅读量3.2k 收藏 12
点赞数 6
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68183839/article/details/124798000
版权

网易邮箱注册界面html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>注册网易免费邮箱-中国第一大电子邮件服务商</title>
    <link rel="stylesheet" href="./css/reset.css" type="text/css">
    <link rel="stylesheet" href="./css/inexd.css" type="text/css">
    <link rel="shortcut icon" href="./image/logo.png">
</head>

<body>
    <div class="content">
        <div class="header">
            <div class="logo">
                <img src="./image/top-left.png" alt="">
                <span>|</span>
                <span>中国第一大电子邮件服务商</span>
            </div>
            <div class="help rel">
                <a href="" id="help">帮助</a>
                <span>|</span>
                <div class="feed_wrap abs">
                    <label for="menu-toggle" class="feed">反馈</label>
                    <input type="checkbox" id="menu-toggle">
                    <ul id="menu" class="abs">
                        <li><a href="">反馈问题</a></li>
                        <li><a href="">参与调研</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 顶部 -->
        <div class="main">
            <span class="title_top">欢迎注册网易邮箱</span>
            <div>
                <div class="box">
                    <div class="left">
                        <label for="mianf">免费邮箱</label>
                        <input type="checkbox" id="mianf">
                    </div>
                    <div class="right">
                        <label for="VIP">VIP邮箱</label>
                        <input type="checkbox" id="VIP">
                    </div>
                </div>
                <form action="login">
                    <div>
                        <div class="Input_mail">
                            <input type="email" placeholder="邮箱地址" required><!-- required表示此内容必填 -->
                            <span> @ </span>
                            <select name="" class="dorp_down">
                                <option value="163.com">163.com</option>
                                <option value="126.com">126.com</option>
                                <option value="yeah.net">yeah.net</option>
                            </select>
                            <p class="hint">6~18个字符，可使用字母、数字、下划线，需要以字母开头</p>
                        </div>
                        
                        <div class="password">
                            <input type="password" placeholder="密码" required>
                            <button></button>
                            <p class="pass_hint">6-18个字符，需包含大、小写字母和数字</p>
                        </div>
                        
                        <div class="nuber">
                            <input type="tel" placeholder="手机号码" required>
                            <p class="nuber_hint">可以通过该手机号码找回密码</p>
                        </div>
                        
                        <div class="verify">
                            <input type="checkbox">
                            <span>同意</span>
                            <a href="">《服务条款》</a>
                            <span>、</span>
                            <a href="">《隐私政策》</a>
                            <span>和</span>
                            <a href="">《儿童隐私政策》</a>
                        </div>
                        <input type="submit" value=" 注册"  class="regis"/>
                    </div>
                </form>
            </div>
        </div>
        <!-- 中部主要内容 -->
        <div class="foot">
            <div class="foot-font">
            <a href="">关于网易</a>
            <a href="">客户隐私</a>
            <a href="">隐私策略</a>
            <span class="inter">|</span>
            <span>网易公司版权©&nbsp;1997-2022</span>
            <span class="ex">数据来源：艾媒咨询《2015-2018中国个人邮箱行业研究报告》</span>
            </div>
        
        </div>
        <!-- 页尾 -->
    </div>
</body>

</html>
<!-- 切换效果没有 -->

CSS效果：

body {
    background: #eff8ff;
    font-size: 12px;
}
/* 设置背景 */
.rel {
    position: relative;
}
.abs {
    position: absolute;
}
/* 把position设置为公共属性 */
.logo img {
    height: 29px;
    width: 373px;
    padding: 15px 30px 0 30px;
}

.logo span {
    vertical-align: top;/* 以垂直方向 */
    font-size: 14px;
    color: gray;
    display: inline;
    height: 29px;
    line-height: 50px;
    padding: 15px 30px 0 0;
}

.help {
    float: right;
    width: 100px;
    top: -20px;
    right: 20px;
    color: gray;
}

#help {
    color: gray;
    text-decoration: none;
    font-size: 14px;
}

.feed_wrap {
    width: 60px;
    left: 40px;
    top: 0;
}

.feed {
    cursor: pointer;
    font-size: 14px;
    /* border: 1px solid #00A000; */
}

#menu-toggle {
    display: none;
    /* hide the checkbox */
}

#menu {
    display: none;
    list-style: none;
    width: 90px;
    height: 60px;
    /*     border: 1px solid #00a0e9; */
    background: white;
    text-align: center;
    top: 20px;
    left: -35px;
    box-shadow: 2px 0px 9px 0px black;
    overflow: hidden;
}

#menu li {
    margin: 10px 0;
}
#menu li:hover {
    margin: 0 0;
}
#menu li a {
    text-decoration: none;
    color: gray;
}
#menu a:hover {
    display: inline-block;
    height: 30px;
    width: 90px;
    background: rgb(228, 225, 225);
    line-height: 30px;
}
#menu li a:active {
    color: #00a5e0;
}

/*这句最关键*/
#menu-toggle:checked+#menu {
    display: block;
}
.main{
    width: 470px;
    margin: 0 auto;
    height: auto;
}
.title_top {
    text-align: center;
    font-size: 28px;
    display: inline-block;
    margin-top: 40px;
    margin-bottom: 20px;
}


/* ****************************** */
.box{
    height: auto;
    overflow: hidden;
}
.left,.right {
    width: 235px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;

}
.left {
    float: left;
    background: white;
    border-bottom: 2px solid blue;
    color: blue;
    }
#mianf,#VIP{
    display: none;
}
.right {
    float: right;
    background: #f0f4ff;
    /* border-bottom:2px solid none; */
}
.Input_mail {
    height: 40px;
    background: white;
    border: 1px solid gray;
    margin-top: 25px;
    clear: both;
    font-size: 18px;
}
.hint {
    font-size: 12px;
    color: #808080;
    display: none;
}
.Input_mail:hover  .hint {
    display: inline;
    top: 45px;
    left: 0;
}
.Input_mail input {
    height: 100%;
    border: transparent;/* 边框透明 */
    outline: none;/* 轮廓：无 */
    padding-left: 15px;
}
.Input_mail span {
    right: 90px;
    top: 10px;
}
/* 下拉菜单 */
.dorp_down {
    border: none;
    float: right;
    font-size: 18px;
    height: 100%;
    outline: none;
}
.password {
    background: white;
    border: 1px solid gray;
    height: 40px;
    margin-top: 25px;
    font-size: 18px;
}
.password input {
    height: 100%;
    border: transparent;
    outline: none;
    padding-left: 15px;
}
.password button {
    background: url("../image/无标题2.png") no-repeat;
    height: 25px;
    width: 25px;
    background-size: 25px 25px ;
    border: none;
    right: 7px;
    top: 7px;
}
.password button:hover {
    background: url("../image/无标题\ 拷贝.png") no-repeat;
    height: 25px;
    width: 25px;
    background-size: 25px 25px ;
    border: none;
    right: 7px;
    top: 7px;
}
.pass_hint {
    font-size: 12px;
    color: #808080;
    display: none
    
}
.password:hover  .pass_hint {
    display: inline;
    top: 45px;
    left: 0;
}
.nuber {
    background: white;
    height: 40px;
    font-size: 18px;
    border: 1px solid gray;
    margin-top: 25px;
}
.nuber input {
    height: 100%;
    border: transparent;
    outline: none;
    padding-left: 15px;
}
.nuber_hint {
    font-size: 12px;
    color: #808080;
    display: none;
}
.nuber:hover .nuber_hint {
    display: inline;
    top: 45px;
    left: 0;
}
/* 注册按钮 */
.regis {
    width: 470px;
    height: 40px;
    font-size: 18px;
    color: white;
    background: rgba(58, 51, 247, 0.738);
    margin: 0 auto 0 auto;
    letter-spacing: 1em;
    margin-top: 20px;
}
/* 验证 */
.verify {
    margin: 20px 0 20px 0;
}
.verify span {
    color: rgb(202, 197, 197);
}
.verify a {
    color: black;
    text-decoration: none;
}
.verify a:hover {
    text-decoration: underline;
}
/* 页尾背景图 */
.foot {
    background: url("../image/buttom.png") no-repeat;
    width: 1257px;
    height: 275px;
    background-size: 1257px  275px;
}
.foot-font {
bottom: 30px;
left: 300px;
}
.foot-font a {
    color: black;
    cursor: pointer;
    text-decoration: none;
}
.ex {
    color: rgb(200, 200, 200);
}
.inter {
    padding: 0 10px 0 10px;
}

写的烂，我也摆烂

京都不良人
关注
  • 6
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML163网易邮箱登录页面源代码
11-16
HTML163网易邮箱登录页面源代码 input标签
163邮箱html页面
05-21
非常好的html页面模版
HTML，模仿网易登陆界面
qq_51131331的博客
01-09 3435
1、展示效果： 2、网页代码： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-widt...
网易邮箱注册界面设计 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,
静态网易云官网html+css
03-12
html+css+swiper插件
163注册源码
10-28
用易语言快速注册163邮箱源码,快速注册网易邮箱,播客!
html做一个简单的网易邮箱注册
m0_56218765的博客
05-02 2613
效果呈现就是这样！ 主要用到的是比较简单的控件，单选框、下拉框、按纽， <body> <form> <label>邮件地址</label> <input type="text" name="address" maxlength="18" minlength="6"> <label>@</label> <select> &lt
使用HTML代码完成效果图，完成www.163.com账号注册页面（不要求做css样式，原生的HTML就好）
葵花田
11-25 890
使用HTML代码完成效果图，完成www.163.com账号注册页面（不要求做css样式，原生的HTML就好） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1 align="center"> <font size="90px" face="
HTML网页练习之网易邮箱注册页面
12-01
使用HTML+CSS+JavaScript搭建的网易邮箱注册页面，所用代码和素材都已经包含在压缩包中，涉及网页的搭建和客户端对用户名、密码等的格式验证。欢迎大家下载参考
HTML连载56-网易注册界面实战之全部代码
weixin_44630050的博客
12-11 1756
一、今天完成了网易邮箱注册界面的全部编写，编写一个小小的网页就需要这么多时间来进行设计、测量、排版、编写、测试，才能进行使用，同时编写这个网页复习了几乎前面的所有内容，最后来一个汇总就可以了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...
如梦令+网易163邮箱 HTML+CSS代码
07-31
如梦令+网易163邮箱 HTML+CSS代码.如梦令+网易163邮箱 HTML+CSS代码
HTML网页设计之仿注册网易免费邮箱界面
09-22
应用HTML语言设计，简易设计，仿照网易163免费邮箱注册界面，添加用户名输入字符串控制长度以及匹配前后输入密码是否正确。
网易通行证注册
06-03
包含网易通行证注册界面和注册成功界面。代码、图片齐全。能够对对用户输入信息进行提示，输入完成后进行输入验证。
html中实现邮箱注册，包含验证码
03-01
简单的运用htnl写的邮箱注册，很简单，里面有正则表达式的运用，和注册的编写，对初学者很有帮助
网易邮箱注册
06-15
网易注册页面，连接数据库，实现增删改查，有提示框，验证码，有两个小问题，没来得及修改
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
11-23
先给大家展示效果图如下所示： 使用方法： ...link rel="stylesheet" href="css/jquery.fullPage.css"> [removed][removed] [removed][removed] [removed][removed] 接着构建html代码，这里的代码较
高仿网易邮箱登录界面
01-01
高仿网易邮箱登录界面 HTML ＣＳＳ　ＪＳ
4封好看的邮箱模-用于营销的模板
10-21
使用html5+css3实现4封好看的邮箱模板，可以用于qq邮箱，网易邮箱，163邮箱等常见邮箱。 效果绝对满意，不收费，绝对免费下载哦
常见的css面试题（持续更新，欢迎补充）
最新发布
清浅就是我的博客
04-22 527
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
html仿网易邮箱注册页面代码
12-06
以下是一个简单的HTML仿网易邮箱注册页面的代码示例： ```html <!DOCTYPE html> <html> <head> <title>网易邮箱注册</title> <meta charset="UTF-8"> <style> body { background-color: #f5f5f5; font-family: Arial, sans-serif; } form { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px #ccc; margin: 50px auto; padding: 20px; width: 400px; } h1 { color: #333; font-size: 24px; margin-bottom: 20px; text-align: center; } label { display: block; font-size: 14px; margin-bottom: 5px; } input[type="text"], input[type="password"] { border: 1px solid #ccc; border-radius: 3px; font-size: 14px; padding: 5px; width: 100%; } input[type="submit"] { background-color: #d14836; border: none; border-radius: 3px; color: #fff; cursor: pointer; font-size: 16px; padding: 10px; width: 100%; } input[type="submit"]:hover { background-color: #f26d5b; } .error { color: #d14836; font-size: 12px; margin-top: 5px; } </style> <script> function validateForm() { var username = document.forms["register"]["username"].value; var password = document.forms["register"]["password"].value; var confirm_password = document.forms["register"]["confirm_password"].value; var email = document.forms["register"]["email"].value; var phone = document.forms["register"]["phone"].value; if (username == "") { document.getElementById("username_error").innerHTML = "用户名不能为空"; return false; } if (password == "") { document.getElementById("password_error").innerHTML = "密码不能为空"; return false; } if (confirm_password == "") { document.getElementById("confirm_password_error").innerHTML = "确认密码不能为空"; return false; } if (password != confirm_password) { document.getElementById("confirm_password_error").innerHTML = "两次输入的密码不一致"; return false; } if (email == "") { document.getElementById("email_error").innerHTML = "邮箱不能为空"; return false; } if (phone == "") { document.getElementById("phone_error").innerHTML = "手机号不能为空"; return false; } return true; } </script> </head> <body> <form name="register" onsubmit="return validateForm()"> <h1>网易邮箱注册</h1> <label>用户名</label> <input type="text" name="username"> <div id="username_error" class="error"></div> <label>密码</label> <input type="password" name="password"> <div id="password_error" class="error"></div> <label>确认密码</label> <input type="password" name="confirm_password"> <div id="confirm_password_error" class="error"></div> <label>邮箱</label> <input type="text" name="email"> <div id="email_error" class="error"></div> <label>手机号</label> <input type="text" name="phone"> <div id="phone_error" class="error"></div> <input type="submit" value="注册"> </form> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值