第1期：手把手教你制作网易邮箱注册页面
2024-05-10 12:56:23
手把手教你制作网易邮箱注册页面
不出意外的话一共会出三期,下面会有链接
第1期： 手把手教你制作网易邮箱注册页面
第2期： 网页动画制作（CSS+JS）
第3期：12306页面制作
文章目录
- 手把手教你制作网易邮箱注册页面
- 前言
- 一、一点基础知识
- 1.& nbsp;——空格;
- 2.css3中三种引入样式优先级：内联式 > 嵌入式 > 外部式;
- 3.盒模型
- 二、制作步骤
- 1.框架建立
- 2.建立基本内容
- 3.CSS3丰富内容
- 总结
- 附：学习资源
前言
寒假在自学了HTML和CSS之后，照着网易邮箱注册页面做了一个静态的页面，算是分享一下自己的心得体会吧。（PS：文末附有web前端学习的资源）
以下是本篇文章正文内容，如果文章那里写的不对，欢迎各位指出纠正。
一、一点基础知识
简单地挑一点要用到的知识介绍，可以直接跳过
1.& nbsp;——空格;
2.css3中三种引入样式优先级：内联式 > 嵌入式 > 外部式;
本文没有用到外部式
| 内联式 | 嵌入式 | 外部式 |
|---|---|---|
| 文中添加 style=“color:red” | 头部插入style | 插入像index.css一样的文件 |
内联式
<span style="color:#2C82FF">123</span>
嵌入式
<style type="text/css">p {font-size:20px;/*设置文字字号*/color: red;/*设置文字颜色*/font-weight: bold;/*设置字体加粗*/}</style>
外部式
<link href="index.css" rel="stylesheet" type="text/css" />
注：rel=“stylesheet” type=“text/css” 是固定写法不可修改。
3.盒模型
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
元素的高度也是同理。
理解了盒模型以后对于后期block之间位置的调整有很大的帮助。
二、制作步骤
1.框架建立
代码如下：
<!DOCTYPE html><!--这里用的是html5，用之前要声明--><html><head><title>Title</title><style type="text/css">`/*css里的注释是这种样式*/`<style>
</head><body><div class="head1"><!--第1个模块--></div><div class="box"><!--第2个模块--></div><div class="center"><!--第3个模块--></div>
</body></html>
2.建立基本内容
代码如下：
<!DOCTYPE html>
<html>
<head><title>网易邮箱注册</title><style type="text/css"></style>
</head>
<body><div class="head1"><img src="https://zc.reg.163.com/webzc/mail/images/logo-906b3317.png" width="168" height="24" style="vertical-align: middle;cursor: pointer;" class="img"><span class="text1">靓号注册</span> <span class="new" >new</span></div><br/><div class="box"><div class="box1"><div ><span class="box2">1</span><p class="line">——————</p><span class="box3">2</span><p class="line" >——————</p><span class="box3">3</span></div><span >填写帐号密码</span> <span >验证手机号码完成注册</span></p></div><div class="box4"><input placeholder="请输入邮箱地址" type="text" ><input placeholder="请输入8-16位密码" type="password"><input type="checkbox" ><label >用户勾选即代表同意《网易邮箱服务条款》和《网易隐私政策》</label><input type="submit" value="下一步" name="submit" class="buttom" /><br/><p class="text2">已有帐号？去登录</p></div></div><div class="center"><p>公司简介|网易帐号中心|帐号中心公众号|网易帐号管家|网易靓号|网易帮助中心</p><br/><p>增值电信业务经营许可证粤B2-20090191工业和信息化部ICP/IP地址/域名信息备案管理系统</p><br/><p>网易公司版权所有©1997-2021</p></div>
</body>
</html>
大体写了主要的内容，下一步就是设置高度宽度，以及字体的位置大小颜色等。
3.CSS3丰富内容
代码如下：
<!DOCTYPE html>
<html>
<head><title>网易邮箱注册</title><style type="text/css">body{background: #f8f8f8;}.head1{height: 64px;line-height: 64px;background: #fff;margin-bottom: 22px;min-width: 1860px;position:absolute;margin: 0 0 40px 0;display:block;}.img{position: relative;left:380px;top:0px;}.text1{display: inline-block;font-size: 14px;height: 20px;line-height: 20px;margin-top: 20px;position: absolute;right:532px;}.new{border-radius: 12px;width: 32px;height: 16px;line-height: 14px;text-align: center;font-size: 12px;display: inline-block;position: absolute;right:500px;top:23px;}.text1,.new{display:inline-block;}.box{background: #fff;position: relative;margin: 64px 520px 0 520px;padding: 0 0 120px 0;border: 0 0 0 0;display:block;}.box1{text-align: center;padding: 40px 0 0 0;}.box2{width: 40px;height: 40px;line-height: 40px;border-radius: 30px;color:#2c82ff;border: 2px solid #2c82ff;text-align: center;margin: 0 auto 10px;font-size: 20px;display:inline-block;font-weight:bold;}.box3{width: 40px;height: 40px;line-height: 40px;border-radius: 30px;color:#CDCDCD;border: 2px solid #CDCDCD;text-align: center;margin: 0 auto 10px;font-size: 20px;display:inline-block;font-weight:bold;}.box4{text-align: center;}.line{display: inline;font-weight:bold;}.buttom{width:486px;height:46px; background:#2C82FF;font-size: 20px;color:white;font-weight:bold;}.center{text-align:center;font-size: 8px;color:#CDCDCD;line-height:0;}.icon{font-size: 19px;line-height: 44px;width: 30px;color: #ccc;position: fixed;right: 700px;top: 316px;}.text2{text-align: left;position: relative;left:168px;}</style>
</head>
<body><div class="head1"><img src="https://zc.reg.163.com/webzc/mail/images/logo-906b3317.png" width="168" height="24" style="vertical-align: middle;cursor: pointer;" class="img"><span class="text1">靓号注册</span> <span style="color:white ;background: red" class="new" >new</span></div><br/><div class="box"><div class="box1"><div ><span class="box2">1</span><p class="line" style="color: #CDCDCD;">——————</p><span class="box3">2</span><p class="line" style="color: #CDCDCD;">——————</p><span class="box3">3</span></div><span style="color:#2C82FF">填写帐号密码 </span> <span style="color:#CDCDCD">验证手机号码 完成注册 </span></p></div><div class="box4"><input placeholder="请输入邮箱地址" type="text" style="width:486px; height:46px"><br/><br/><input placeholder="请输入8-16位密码" type="password" style="width:486px; height:46px"><svg t="1611239198654" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2026" width="19" height="19"><path d="M516.213992 657.382716c-162.238683 0-309.728395-84.279835-436.148148-250.73251-10.534979-14.748971-8.427984-33.711934 6.320987-44.246914s33.711934-8.427984 44.246914 6.320988c113.777778 149.596708 244.411523 225.44856 385.580247 225.44856 143.27572 0 267.588477-73.744856 377.152263-225.44856 10.534979-14.748971 29.497942-16.855967 44.246914-6.320988 14.748971 10.534979 16.855967 29.497942 6.320987 44.246914-120.098765 166.452675-265.481481 250.73251-427.720164 250.73251z" fill="#666666" p-id="2027"></path><path d="M153.8107 680.559671c-8.427984 0-14.748971-2.106996-21.069959-8.427984-12.641975-12.641975-12.641975-31.604938-2.106996-44.246913l80.065843-88.493827c12.641975-12.641975 31.604938-12.641975 44.246914-2.106996 12.641975 12.641975 12.641975 31.604938 2.106996 44.246913l-80.065844 86.386831c-6.320988 8.427984-14.748971 12.641975-23.176954 12.641976zM394.00823 775.374486h-6.320987c-16.855967-4.213992-27.390947-18.962963-25.283951-37.925926l23.176955-115.884774c4.213992-16.855967 18.962963-27.390947 37.925926-25.283951 16.855967 4.213992 27.390947 18.962963 25.28395 37.925926l-23.176954 115.884774c-2.106996 14.748971-16.855967 25.283951-31.604939 25.283951zM627.884774 773.26749c-14.748971 0-27.390947-10.534979-31.604939-25.283951l-21.069958-115.884774c-4.213992-16.855967 8.427984-33.711934 25.28395-37.925925 16.855967-4.213992 33.711934 8.427984 37.925926 25.28395l23.176955 115.884774c4.213992 16.855967-8.427984 33.711934-25.283951 37.925926h-8.427983zM868.082305 680.559671c-8.427984 0-16.855967-4.213992-23.176955-10.53498l-80.065844-86.386831c-12.641975-12.641975-10.534979-33.711934 2.106996-44.246913 12.641975-12.641975 33.711934-10.534979 44.246914 2.106995l80.065843 86.386832c12.641975 12.641975 10.534979 33.711934-2.106996 44.246913-4.213992 4.213992-12.641975 8.427984-21.069958 8.427984z" fill="#666666" p-id="2028"></path></svg><br/><br/><input type="checkbox" ><label style="color:#CDCDCD">用户勾选即代表同意<span style="color:#2C82FF">《网易邮箱服务条款》</span>和<span style="color:#2C82FF">《网易隐私政策》</span></label><br/><input type="submit" value="下一步" name="submit" class="buttom" /><br/><p style="color:#CDCDCD" class="text2">已有帐号？<span style="color:#2C82FF">去登录</span></p></div></div><div class="center"><p>公司简介 | 网易帐号中心 | 帐号中心公众号 | 网易帐号管家 | 网易靓号 | 网易帮助中心</p><br/><p>增值电信业务经营许可证粤B2-20090191 工业和信息化部ICP/IP地址/域名信息备案管理系统</p><br/><p>网易公司版权所有 © 1997-2021</p></div>
</body>
</html>
总结
第一次做像这样的静态网页，经验不足有些地方不会做，比如那个密码输入框的Close-eye图标，弄不到框里就直接把位置调成fixed，然后放在上层实现。虽然效果看起来还可以，但是只能在360浏览器里可以正常展示，换到chrome、firefox里页面参数不一样就错位了，以后学到位了应该就会了吧？/挠头
不出意外的话以后应该还会再出三期。嗯嗯
附：学习资源
慕课网https://www.imooc.com/
（个人强烈推荐这个课程初识HTML(5)+CSS(3)-2020升级版）
W3school http://www.w3school.com.cn/
菜鸟教程 http://www.runoob.com/
MDN https://developer.mozilla.org/zh-CN/
网上还有许多视频教程，例如（黑马程序员pink老师前端入门视频教程）https://www.bilibili.com/video/BV14J4114768
如果觉得博主写的对各位有帮助，想要了解更多内容的话别忘了点赞!!!收藏!!!关注!!!一键三连哦
第1期：手把手教你制作网易邮箱注册页面相关推荐
- HTML+CSS项目课2：利用table和表单制作“网易邮箱注册页面”
知识点:html文档基本结构.table标签布局.表单标签的使用.img标签.a标签.p标签等常见标签的使用. 制作网页效果: 网页制作思路: 1.将整个网页分成4部分:3个表格+底部段落文字(3个表 ...
- 邮箱大师支持html,fullPage.js制作网易邮箱大师页面
fullPage.js制作网易邮箱大师页面 分类:代码 日期:2016-08-02 点击(40,128) 下载(1) 来源:未知 收藏 简介 网易邮箱是国内著名的邮箱,多年的发展累积了大量用户,拥有不 ...
- HTML 网页制作 网易邮箱登录页面 关键代码
<p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" / ...
- 前期H5+CSS3网易邮箱注册页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- java制作网易邮箱登录页面_Page Object实例(一) - Java + Selenium 登录163邮箱
Page Object 是什么: Page Object(selenium wiki)是Selenium2开始提供的一种代码设计模式. 其核心思想是把web页面的元素查找及操作和页面测试分离开. 这样 ...
- java制作网易邮箱登录页面,java调用网易邮箱需要注意的点
1.需要开启客户端授权码 授权码开启 https://blog.csdn.net/jinwufeiyang/article/details/76400708?locationNum=7&fps ...
- jQuery formValidator 表单校验插件4.1.1高仿网易邮箱注册页面(已发演示链接)
[密码强度校验]实现了,集成在插件里. 现在跟126邮箱注册一摸一样! 演示链接: http://www.yhuan.com/formValidator4.1.1/demo8.html 官方网址:ht ...
- 手把手教你制作AppPreview视频并上传到appStore进行审核
手把手教你制作AppPreview视频并上传到appStore进行审核 注意,你需要使用iMovie才能够制作AppPreview视频文件,用QuickTime录制的无效! 最终效果 1. 新建一个事 ...
- 最新免费自建APP平台哪个好？手把手教你制作APP
大型二手交易网站咸鱼近日发布<90后分享经济消费报告>,报告显示:16-27岁的年轻人用户占比已达55%,90后已成为分享经济的绝对主力:基于地理位置或兴趣同好形成的社区"鱼塘& ...
- 手把手教你制作手机底部导航栏，领导看完都说好
手把手教你制作手机底部导航栏,领导看完都说好
最新文章
- Android10.0 日志系统分析(四)-selinux、kernel日志在logd中的实现-[Android取经之路]
- 【数字信号处理】相关函数应用 ( 高斯白噪声 的 自相关函数 分析 )
- Python基础05 缩进和选择
- setings.py配置文件详解
- 《大型网站技术架构》读书笔记之六：永无止境之网站的伸缩性架构
- oracle定义变量sql赋值_ORACLE获取SQL绑定变量值的方法总结
- python list sort by,python中List的sort方法指南
- MySQL.我的选择
- 双系统重装win7/Xp后如何恢复ubuntu引导--转载
- Tideways+Xhgui搭建非侵入式php监控平台
- 错误代码1833 Cannot change column used in a foreign
- www.biubiujie.com BiuBiu街-要Beautiful的女孩纸逛的街
- Linux文件帮助_重定向_vi
- 一篇文章揭穿创业公司的套路
- 移动app需求分析与用例设计
- kodi+java版_[转] Emby+KODI--完美的NAS多媒体方案
- 通过idea的Git使主干项目合并到分支中（主干同步到分支）
- 如何能更更好的装逼 （Windows CMD命令大全）
- 百度这样搜索，可以去掉广告！
- 执行node的http或https报了个错：Error: socket hang up