代码如下: 图片可通过谷歌浏览器在网易邮箱官网直接下载 <!DOCTYPE html> <html lang="en" xmlns:http="http://www.w3.org/1999/xhtml"> <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; } body{ background-color: #f9f9f9; font-size: 12px; } .header{ width: 960px; height: 81px; margin: 0 auto; padding-top: 30px; box-sizing: border-box; } .header .logo{ width: 644px; height: 27px; background:url("../images/wy.png") no-repeat 0 0; float: left; } .header .logo a{ display: inline-block; width: 128px; height: 27px; } .header .links{ width: 200px; height: 19px; text-align: right; float: right; color: #999; } .header .links a{ text-decoration: none; line-height: 19px; color: #039; } .header .links a:hover{border-bottom:1px solid #039;} .content{ width: 960px; height: 727px; margin: 0 auto; } .content .top{ width: 958px; height: 38px; background-color: #6495C6; border: 1px solid #5B88B8; border-radius: 3px 3px 0 0; } .content .top h1{ font-size: 14px; color: white; line-height: 38px; padding-left: 20px; } .content .bottom{ width: 960px; height: 687px; background-color: white; } .content .bottom .left{ width: 642px; height: 687px; float: left; padding-left: 60px; padding-top: 50px; box-sizing: border-box; border: 1px solid #ccc; border-top: none; border-right: none; } .content .bottom .left .leftTop{ width: 582px; height: 58px; padding-left: 55px; box-sizing: border-box; } .content .bottom .left .leftTop ul{ width: 412px; height: 35px; background-image: url("../images/wy3.jpg"); background-repeat: no-repeat; list-style: none; } .content .bottom .left .leftTop ul li{ float: left; width: 137px; height: 35px; line-height: 35px; text-align: center; } .content .bottom .left .leftBottom{ width: 573px; height: 543px; margin-left: 9px; } .content .bottom .left .leftBottom .txt-tips{ color: rgb(153, 153, 153); } .content .bottom .left .leftBottom .line{ width: 573px; height: 69px; } .content .bottom .left .leftBottom .special{ width: 573px; height: 119px; box-sizing: border-box; padding-top: 8px; padding-bottom: 8px; } .content .bottom .left .leftBottom .sub{ width: 573px; height: 53px; padding: 8px 0 8px 110px; box-sizing: border-box; } .content .bottom .left .leftBottom .sub a{ display: inline-block; width: 119px; height: 37px; font-size: 14px; background-image: url(../images/wy.png); background-position: 0 -360px; line-height: 37px; color: #FFF; text-decoration: none; outline: none; text-align: center; font-weight: bold; } .content .bottom .left .leftBottom .clause{ width: 573px; height: 36px; padding: 8px 0 8px 110px; box-sizing: border-box; color: #999; } .content .bottom .left .leftBottom .clause a{ text-decoration: none; line-height: 19px; color: #039; } .content .bottom .left .leftBottom .clause a:hover{border-bottom:1px solid #039;} .content .bottom .left .leftBottom .line .item{ float: left; width: 90px; height: 19px; font-size: 14px; text-align: right; margin-top: 13px; } .content .bottom .left .leftBottom .line .item span{ color: rgb(204, 0, 0); margin-right: 4px; } .content .bottom .left .leftBottom .line .item2{ float: right; width: 463px; height: 53px; margin-top: 8px; } .content .bottom .left .leftBottom .line .item2 img{ width: 116px; height: 50px; border: 1px solid #E7E7E7; margin-right: 130px; float: right; } .content .bottom .left .leftBottom .line .item2 .it1{ width: 210px; height: 25px; border: 1px solid rgb(171, 171, 171); border-radius: 3px; } .content .bottom .left .leftBottom .line .item2 .it2{ width: 332px; height: 25px; border: 1px solid rgb(171, 171, 171); border-radius: 3px; } .content .bottom .left .leftBottom .line .item2 select{ width: 97px; height: 25px; border: 1px solid rgb(171, 171, 171); border-radius: 3px; font-weight: bold; } .content .bottom .left .leftBottom .line .item2 .tips{ width: 463px; height: 26px; line-height: 16px; padding-top: 6px; padding-bottom: 4px; box-sizing: border-box; } .content .bottom .left .leftBottom .line .item2 .message{ width: 463px; height: 35px; padding-top: 5px; box-sizing: border-box; } .content .bottom .left .leftBottom .line .item2 .message a{ display: inline-block; background-image: url(../images/wybgx.png); background-position: 0 -72px; background-repeat: repeat-x; border: 1px solid #BBB; width: 98px; height: 28px; padding-left: 20px; padding-right: 20px; font-size: 14px; text-decoration: none; line-height: 28px; color: #555; border-radius: 3px; outline: none; } .content .bottom .right{ width: 318px; height: 687px; background-color: #f5f5f5; float: right; padding: 106px 0 0 45px; box-sizing: border-box; border: 1px solid #ccc; border-top: none; } .footer{ width: 960px; height: 80px; margin: 0 auto; text-align: center; color: #999999; line-height: 40px; } .footer a{ color: #999999; text-decoration: none; } .footer a:hover{border-bottom:1px solid #999999;} </style> </head> <body> <!--头部开始--> <div class="header"> <div class="logo"> <a href="http://mail.163.com/" title="网易163免费邮" target="_blank"></a><a href="http://www.126.com/" title="网易126免费邮" target="_blank"></a><a href="http://www.yeah.net/" title="网易Yeah.net免费邮" target="_blank"></a> </div> <div class="links"> <a href="http://mail.163.com/html/mail_intro/" target="_blank">了解更多</a> | <a href="http://help.mail.163.com/feedback.do?m=add&categoryName=%e6%b3%a8%e5%86%8c" target="_blank">反馈意见</a> </div> </div> <!--头部结束--> <!--中间内容开始--> <div class="content"> <!--内容头部开始--> <div class="top"> <h1>欢迎注册无限容量网易邮箱!邮件地址可以登录使用其他网易旗下产品。</h1> </div> <!--内容头部结束,尾部开始--> <div class="bottom"> <!--内容左边部分开始--> <div class="left"> <!--内容左边导航条开始--> <div class="leftTop"> <ul> <li>注册字母邮箱</li> <li>注册手机号码邮箱</li> <li>注册VIP邮箱</li> </ul> </div> <!--导航条结束,表单输入框开始--> <div class="leftBottom"> <div class="line"> <div class="item"> <span>*</span>邮件地址 </div> <div class="item2"> <input type="text" class="it1"> @ <select> <option value="163.com">163.com</option> <option value="126.com">126.com</option> <option value="yeah.net">yeah.net</option> </select> <div class="tips"> <span class="txt-tips">6~18个字符,可使用字母、数字、下划线,需以字母开头</span> </div> </div> </div> <div class="line"> <div class="item"> <span>*</span>密码 </div> <div class="item2"> <input type="password" class="it2" > <div class="tips"> <span class="txt-tips">6~16个字符,区分大小写</span> </div> </div> </div> <div class="line"> <div class="item"> <span>*</span>确认密码 </div> <div class="item2"> <input type="password" class="it2" > <div class="tips"> <span class="txt-tips">请再次填写密码</span> </div> </div> </div> <div class="line"> <div class="item"> <span>*</span>手机号码 </div> <div class="item2"> <input type="text" class="it2" > <div class="tips"> <span class="txt-tips">忘记密码时,可以通过该手机号码快速找回密码</span> </div> </div> </div> <div class="line special"> <div class="item"> <span>*</span>验证码 </div> <div class="item2"> <input type="text" class="it1"> <img src="../images/wycall.jpg" class="call"> <div class="tips"> <span class="txt-tips">请填写图片中的字符,不区分大小写</span> </div> <div class="message"> <a href="#" ><strong>免费获取验证码</strong></a> </div> </div> </div> <div class="line"> <div class="item"> <span>*</span>短信验证码 </div> <div class="item2"> <input type="text" class="it2" > <div class="tips"> <span class="txt-tips">请查收手机短信,并填写短信中的验证码</span> </div> </div> </div> <div class="clause"> <input type="checkbox" checked="checked"> 同意 <a href="http://reg.163.com/agreement.shtml" target="_blank">"服务条款"</a> 和 <a href="http://reg.163.com/agreement_game.shtml" target="_blank">"隐私权相关政策"</a> </div> <div class="sub"> <a href="#">立即注册</a> </div> </div> </div> <!--内容左边部分结束,右边部分开始--> <div class="right"> <img src="../images/wy2.gif" alt=""> </div> <!--内容右边部分结束--> </div> </div> <!--中间部分结束--> <!--尾部开始--> <div class="footer"> <a href="http://corp.163.com/index_gb.html" target="_blank">关于网易</a> <a href="http://mail.163.com/html/mail_intro" target="_blank">关于网易免费邮</a> <a href="http://mail.blog.163.com/" target="_blank">邮箱官方博客</a> <a href="http://help.163.com/" target="_blank">客户服务</a> <a href="http://corp.163.com/gb/legal/legal.html" target="_blank">隐私政策</a> | 网易版权所有 © 1998-2018 <br> 数据来源:艾媒咨询《2015-2018中国个人邮箱行业研究报告》 </div> <!--尾部结束--> </body> </html>
HTML5前端开发入门之网易注册界面实战
猜你喜欢
转载自blog.csdn.net/qq_41886761/article/details/85397686
今日推荐
周排行