网易邮箱注册HTML+CSS
2024-05-30 07:20:00
网易邮箱注册界面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>网易公司版权© 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;
}写的烂，我也摆烂
网易邮箱注册HTML+CSS相关推荐
- css+js校验 实现仿网易邮箱注册界面 和 校验 功能
css+js校验 实现仿网易邮箱注册界面 和 校验 功能 先来看看最终的效果图吧ヾ(≧▽≦*)o 代码如下: <!DOCTYPE html> <html lang="en& ...
- 等价类划分法测试网易邮箱注册功能
1.了解等价类的划分 弱一般等价类测试 使用最少测试用例覆盖每个有效等价类 强一般等价类测试 强一般等价类是基于多缺陷假设,强一般等价类的测试用例是要覆盖每个有效等价类取值的笛卡尔积.即在有效等价类取 ...
- 前期H5+CSS3网易邮箱注册页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 网易邮箱注册静态页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 月亮可更换之网易邮箱注册及登录测试用例
标题:单位用户注册成功 测试前提:系统运行正常,邮件服务器已开启 功能模块:注册登录 测试环境:CHROME IE10+ 重要性:重要 测试方式:手工 操作步骤(预期结果) 1.进入注册页面,选择注册 ...
- jQuery formValidator 表单校验插件4.1.1高仿网易邮箱注册页面(已发演示链接)
[密码强度校验]实现了,集成在插件里. 现在跟126邮箱注册一摸一样! 演示链接: http://www.yhuan.com/formValidator4.1.1/demo8.html 官方网址:ht ...
- HTML+CSS项目课2：利用table和表单制作“网易邮箱注册页面”
知识点:html文档基本结构.table标签布局.表单标签的使用.img标签.a标签.p标签等常见标签的使用. 制作网页效果: 网页制作思路: 1.将整个网页分成4部分:3个表格+底部段落文字(3个表 ...
- html做一个简单的网易邮箱注册
效果呈现就是这样! 主要用到的是比较简单的控件,单选框.下拉框.按纽, <body><form><label>邮件地址</label><input ...
- 网易帐号通帮你一一列举邮箱注册过的所有网站
对于我们来说,邮箱除了收发邮件,最多的用途就是注册账户了,比如论坛.购物.移动服务等等,久而久之,我们使用一个邮箱地址注册过哪些网站都记不清了. 网易帐号通,帮你快速检测邮箱注册过的网站. 最近网易邮 ...
最新文章
- Java-函数式编程（二）Lambda表达式
- java和C中基本数据类型的所占字节数对比
- 空间刚架matlab_基本平面刚架MATLAB程序
- linux下安装mysql5.7.17及简单配置
- SVN 常用命令笔记
- 卷积神经网络——各种网络的简洁介绍和实现
- deepin linux 2014 硬盘安装教程,Linux Deepin的硬盘安装
- 太阳能电池板正负极图_太阳能LED路灯故障原因有哪些？
- 20200217：搜索旋转排序数组（leetcode33）
- 凸优化－真锥和分割超平面
- 易基因｜ENCODE组蛋白ChIP-seq和转录因子ChIP-seq数据标准及处理流程
- jclasslib插件_JVM-工具安装-jclasslib-win64
- 【学习笔记】贪心科技AI体验课
- 关于AXD调试的详细探索
- Vim使用全指南 (环境配置，插件推荐，美化) (C++,Python,MarkDown,R...)
- 简单的美团-web前端页面
- 【小米手环7】使用 Zeus + 表盘自定义工具 为小米手环7开发和安装小程序
- 入门力扣自学笔记118 C++ （题目编号1413）
- 周期函数的傅里叶级数展开
- PHP短信通知+语音播报自动双呼