H5 71-网易注册界面4
2024-04-21 17:42:07
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>71-网易注册界面4</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: #ccc;}ul, ol{list-style: none;}/*3.利用body设置整个界面的文字信息文字大小 文字字体 文字颜色*/body{font-size:12px;font-family:"宋体";color: #333;}.header{width: 960px;height: 80px;margin:0 auto;padding-top: 28px;box-sizing: border-box;}.header .logo{width: 644px;height: 27px;background: url("images/glb_v2.png") no-repeat 0 0;float: left;}.header .logo a{display: inline-block;width: 130px;}.header .links{width: 200px;height: 27px;float: right;text-align: right;}.header .links a{line-height: 27px;}.content{width: 960px;height: 600px;margin:0 auto;}.content .top{width: 960px;height: 38px;background: url("images/line-center.png") repeat-x;}.content .left{width: 960px;height: 38px;background: url("images/line-left.png") no-repeat left 0;}.content .right{width: 960px;height: 38px;background: url("images/line-right.png") no-repeat right 0;}.content .right h1{color: white;font-size: 12px;line-height: 38px;text-indent: 2em;}.content .bottom{width: 960px;height: 562px;}.content .bottom .article{width: 642px;height: 562px;float: left;padding-top: 50px;padding-left: 80px;box-sizing: border-box;background-color: #f9f9f9;border: 1px solid #ccc;border-top:none;}.content .bottom .article .articleTop{width: 560px;height: 60px;}.content .bottom .article .articleTop ul{width: 412px;height: 34px;background: url("images/tab.jpg") no-repeat left 0;}.content .bottom .article .articleTop ul li{float: left;width: 137px;height: 34px;line-height: 34px;text-align: center;}.content .bottom .article .articleBottom{width: 560px;height: 373px;}.content .bottom .article .articleBottom .line{width: 413px;height: 28px;}.content .bottom .article .articleBottom .line .star{width: 0px;color: red;}.content .bottom .article .articleBottom .line span{width: 60px;height: 28px;float: left;line-height: 28px;text-align: right;}.content .bottom .article .articleBottom .line div{width: 333px;height: 28px;float: right;}.content .bottom .article .articleBottom .line input{width: 214px;height: 24px;}.content .bottom .article .articleBottom .line .special{width: 324px;}.content .bottom .article .articleBottom .line select {width: 100px;height: 28px;}.content .bottom .article .articleBottom .line img{width: 100px;height: 28px;float: left;}.content .bottom .article .articleBottom .line .vcodeInput{float: left;margin-right:10px;}.content .bottom .article .articleBottom p{margin-left: 80px;line-height: 28px;border:none;}.content .bottom .article .articleBottom input[type=submit]{width: 119px;height: 37px;background: url("images/glb_v2.png") no-repeat -144px -360px;border:none;font-size: 20px;color: white;margin-left: 80px;margin-top:20px;}.content .bottom .aside{width: 318px;height: 562px;background-color: tomato;float: right;padding-top: 105px;padding-left: 45px;box-sizing: border-box;background-color: #f5f5f5;border: 1px solid #ccc;border-top:none;}.footer{width: 960px;height: 48px;margin:0 auto;}.footer p{color: #ccc;text-align: center;line-height: 48px;}</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" value="建议使用手机号码注册">@<select><option value="163.com">163.com</option><option value="126.com">126.com</option><option value="lnj.net">lnj.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="password" class="special"></div></div><p>忘记密码时,可以通过该手机号码快速找回密码</p><div class="line"><span><span class="star">*</span>验证码</span><div><input type="text" class="vcodeInput"><img src="data:images/vcode.jpg" alt=""></div></div><p>请填写图片中的字符, 不区分大小写</p><p><input type="checkbox" checked="checked">同意<a href="#">“服务条款”</a>和<a href="#">“隐私权保护和个人信息利用政策”</a></p><input type="submit" value="立即注册"></div></div><div class="aside"><img src="data:images/wy_right.jpg" alt=""></div></div><!--内容底部结束-->
</div>
<!--内容结束-->
<!--底部开始-->
<div class="footer"><p><a href="#">关于网易</a><a href="#">关于网易免费邮</a><a href="#">邮箱官方博客</a><a href="#">客户服务</a><a href="#">隐私政策</a>| 网易公司版权所有 © 1997-2016</p>
</div>
<!--底部结束-->
</body>
</html>
转载于:https://www.cnblogs.com/ljcgood66/p/6659329.html
H5 71-网易注册界面4相关推荐
- 第一篇:初学前端,网易注册界面实例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- HTML5前端开发入门之网易注册界面实战
代码如下:图片可通过谷歌浏览器在网易邮箱官网直接下载 <!DOCTYPE html> <html lang="en" xmlns:http="http: ...
- CSS编写静态网易注册界面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- H5网易注册页面实战
H5网易注册页面实战 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- 前期H5+CSS3网易邮箱注册页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- css+js校验 实现仿网易邮箱注册界面 和 校验 功能
css+js校验 实现仿网易邮箱注册界面 和 校验 功能 先来看看最终的效果图吧ヾ(≧▽≦*)o 代码如下: <!DOCTYPE html> <html lang="en& ...
- H5与CSS所做的QQ注册界面
Web中H5与CSS所做的QQ注册界面(不喜勿喷!) 下图一,完成样式 H5代码块 <!DOCTYPE html> <html lang="en"> < ...
- Web前端-网站首页和注册界面的实现
首页用到的知识如下: 1.bootstrap框架 2.jQuerry实现页面定时弹出广告 注册界面用到的知识: 1.bootstrap框架 2.jQuerry实现省市联动操作 3.jQuerry实现表 ...
- php+html+css制作非常好看网站登录与注册界面
php+html+css制作非常好看网站登录与注册界面 php版本:5.2.17 phpstudy版本:v8.0 首先看一下效果图: 登录界面: (输入密码也是一样的!) 注册页面: 以上就是效果图 ...
最新文章
- ISME：长期进化实验揭示脱硫弧菌的硝酸盐耐受机制
- C# IPGlobalStatistics获取本机网络流量信息
- LCA 求 树中两个点的距离
- Scala中的四种访问权限
- RabbitMQ工作队列
- Java Web 开发详解
- MSN Messenger去广告和其他修改方法
- SpringBoot - Spring 家族的技术体系
- 在移动硬盘（SDD）上装ubuntu18.04
- my ReadBook_dianzishangwu / 2020216 / dianzishangwuwuliu
- gc buffer busy release gc buffer busy acquire
- DIY手动定制一个属于自己的软件安装管理器工具盘[二]
- 【Android开发】微信精选，文章资讯类App开发记录总结
- Java读取Excel中的合并单元格
- 深度学习中，偏置（bias）在什么情况下可以要，可以不要？
- address localhost:8080 is already in use（端口被占用）Windows系统问题解决
- 吴恩达深度学习笔记(21)-神经网络的权重初始化为什么要随机初始化？
- 数据中心等级T1,T2,T3,T4,T5区别,科普数据中心等级知识
- 认知神经心理学（各种生理心理效应）
- 完了完了 我好像中奖了！（木马病毒）
热门文章
- 前端开发 2018 回顾
- 网络资产管理系统_网络版固定资产管理系统具备哪些优势？
- python解析器原理_Python程序运行原理图文解析
- java steam 排序_Java使用Steams VS TreeMap对地图进行排序
- python函数的内涵_python内涵段子文章爬取
- java 点到点最短路径,迪杰斯特拉算法处理无向图中最短路径的(dijkstra)Java实现(指定两点，求最短距离及路径) | 学步园...
- php加载lrc,javascript - 【求助】php如何获取虾米网的LRC地址？
- c++ 删除vector里面的第一个元素_C++提高第三篇2 STL常用容器 vector
- 如何制作linux系统硬盘,手把手带你自制Linux系统之二 简易Linux的制作
- 倒计时 分秒 小程序 方法_小程序天/小时/分秒倒计时封装