web 126

最新推荐文章于 2024-11-10 21:14:45 发布

原创最新推荐文章于 2024-11-10 21:14:45 发布

· 2k 阅读

0 ·

版权

本文详细介绍了网易邮箱的登录与注册页面设计，包括HTML和CSS代码实现，展示了网页布局、样式设置及交互元素的设计思路。登录页面包含账号、密码输入框及登录按钮等，而注册页面则涵盖邮箱地址、密码设定、验证码填写和手机号验证等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

----------------------login----------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>

<style type="text/css">
   .top{
       background-color:white;
       width: 100%;
       height: 100px;
   }
   .logo1{
       float: left;
       width: 400px;
   }
   .logo2{
       float: left;
       width: 250px;
       margin-top:35px;
       border-left-style:solid;
       border-left-width: 1px;
       border-left-color: darkgrey;
   }
   .logo3{
       float: right;
       margin-top: 30px;
   }
   .log4{
       float: right;
       margin-top: 30px;
       border-left-style:solid;
       border-left-width: 1px;
       border-left-color: darkgrey;
   }
   .middle{
       width: 100%;
       height: 700px;
       background-color: #f3f7fa;
   }
   .guanggao{
       width: 1000px;
       margin-top: 0px;
       background-color: #f3f7fa;
   }
   .level{
       background-color: dodgerblue;
       border-radius: 100px;
       width: 200px;
       height: 50px;
       margin-top: -35px;
       margin-left: 460px;
   }
   .choose{
       background-color: gainsboro;
       border-radius: 100px;
       width: 30px;
       height: 30px;
   }
   .login{
       background-color: white;
       width: 500px;
       height:570px;
       margin-top: -600px;
       margin-left: 900px;
       border: 1px solid #DCDCDC;
   }
   .user{
       width: 400px;
       height: 50px;
       border: 1px solid #3C0;
       margin-left: 50px;
       margin-top: 30px;
   }
   .password{
       width: 400px;
       height: 50px;
       border: 1px solid #3C0;
       margin-left: 50px;
       margin-top: 30px;
   }
   .login-img{
       background-color: green;
       border-radius: 10px;
       width: 400px;
       height: 50px;
       margin-left: 50px;
       margin-top: -45px;
   }
   .bottom-livel{
       width: 80px;
       height: 30px;
       border: 1px solid #1E90FF;
       margin-left: 260px;
       margin-top: -110px;
   }
   .bottom{
       width: 100%;
       margin-left: 700px;
   }
   .bottom-text{
       float: left;
       width: 60px;
       border-left-style: solid;
       border-left-width: 1px;
       padding-left: 10px;
       font-size: 10px;
   }
</style>
   </head>
   <body>
       <div class="top">
       <div class="logo1">
           <div style="font-size: 90px; font-weight:bold; color:darkgreen;font-family: 黑体; padding-top:0px;padding-left: 50px; float: left;">126</div>
           <div style="float: left;font-size: 30px;; font-family: 黑体; padding-top:15px">网易免费邮<br>www.126.com</div>
       </div>
       <div class="logo2">
           <div style="font-size: 25px;color: darkgray; font-family: 黑体;padding-left: 10px;">你的专业电子邮局</div>
       </div>
       <div class="log4">
           <div style="float: left; width:80px;padding-left: 10px;">帮助</div>
           <div style="float: left; width:100px;">登录反馈</div>
       </div>
       <div class="logo3">
           <div style="float: left; width:100px;">企业邮箱</div>
           <div style="float: left;width:100px;">vip邮箱</div>
           <div style="float: left;width:100px;">会员PLUS</div>
           <div style="float: left;width:130px;">海外用户登录</div>
           <div style="float: left;width:100px;">邮箱大师</div>
       </div>
       </div>
       <div class="middle">
           <div style="font-size: 30px; font-weight:bold;font-family: 黑体;padding-top: 100px;padding-left: 450px;">开发网易VIP邮箱</div>
           <div style="font-size: 20px; font-family: 黑体;padding-top: 20px;padding-left: 400px;">VIP邮箱,单次群发400封，效率提升</div>
           <div>
               <div style="font-size: 20px; font-weight:bold;color: white;font-family: 黑体;padding-top: 30px;padding-left: 500px;">升级VIP邮箱</div>
               <div class="level"></div>
           </div>
           <div class=" guanggao">
               <div style="padding-top: 50px;padding-left: 300px;"> <img src="guanggao.png"></div>
           </div>
           <div>
               <div style="float: left;font-size: 20px;color: white;margin-left: 757px;"><</div>
               <div class="choose"style="margin-left: 750px;"></div>
               <div style="float: left;font-size: 20px;color: white;margin-left: 807px;margin-top: -30px;">></div>
               <div class="choose"style="margin-left: 800px;margin-top: -30px;"></div>
           </div>
           <div class="login">
               <div style="padding-left: 400px;padding-top: 20px;"><img src="二维码.png" width="80px"></div>
               <div style="margin-top: -80px;margin-left: 80px;color: chocolate;">公告：2019年网易免费邮箱积分处理通知</div>
               <div style="font-size: 30px;font-weight: bold;margin-left: 170px;margin-top: 10px;">邮箱账号登录</div>
               <div class="user">
                   <div style="padding-left: 20px;padding-top: 15px;"><img src="ico-user.png"></div>
                   <div style="margin-left: 50px;margin-top:-25px;"><input style="outline: none;border: 0;" placeholder="邮箱账号或手机号码" size="30" height="25" ></div>
                   <div style="margin-left: 300px;margin-top: -23px;">@126.com</div>
               </div>
               <div class="password">
                   <div style="padding-left: 20px;padding-top: 15px;"><img src="ico-password.png"></div>
                       <div style="margin-left: 50px;margin-top:-25px;"><input style="outline: none;border: 0;" placeholder="输入密码" size="30" height="25" ></div>
               </div>
               <div>
                   <div style="margin-left: 45px;margin-top: 30px;"><input type="checkbox" style="width: 20px;height: 20px;"></div>
                   <div style="margin-left: 80px;margin-top: -25px;color: darkgrey;">十天内免登录</div>
                   <div style="margin-left: 380px;margin-top: -20px;color: green">忘记密码？</div>
               </div>
               <div>
               <div style="color: white;font-size: 30px;font-weight: bold;margin-left: 230px;margin-top: 30px;">登录</div>
               <div class=" login-img"></div>
               </div>
               <div style="color: green;margin-left: 220px;margin-top: 20px;">注册新账号</div>
               <div>
                   <div style="float: left;font-size: 20px;margin-left: 100px;margin-top: -100px;">邮箱PLUS新上线</div>
                   <div style="float: left;color: #1E90FF;padding-left: 10px;padding-top: 10px;"class="bottom-livel">升级服务</div>
               </div>
           </div>
       </div>
       <div style="width: 100%;height: 50px;"></div>
       <div class=" bottom">
           <div style="float: left;font-size: 10px; margin-left: -60px;">网易首页</div>
           <div class="bottom-text">网易严选</div>
           <div class=" bottom-text">网易有钱</div>
           <div class="bottom-text">政府公益热线</div>
           <div class="bottom-text"style="margin-left: 20px;">隐私政策</div>
           <div class="bottom-text">儿童隐私政策</div>
       </div>
       <div style="margin-left: 500px;margin-top: 20px;">
           <div style="float: left;font-size: 15px;color: darkgrey;">网易公司版权所有©1997-2019 ICP证粤B2-20090191 粤公网安备 44010602000311 </div>
           <div style="float: left;font-size: 15px;color: #DCDCDC">（数据来源：艾媒邮箱报告）</div>
       </div>
   </body>
</html>

----------------------regist----------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .top{
               width: 100%;
               height: 100px;
           }
           .logo1{
               float: left;
               width:13%;
               height:100px;
               margin-left: 160px;
           }
           .logo2{
               float: left;
               width:13%;
               height:100px;
           }
           .logo3{
               float: left;
               width:13%;
               height:100px;
           }
           .logo4{
               float: left;
               width: 600px;
               height: 50px;
               border-left: 1px solid gainsboro;
               margin-top:-75px;
               margin-left: 760px;
           }
           .middle{width: 100%;height: 800px;
           background-color:#f3f7fa;
           }
           .message{
               background-color: cornflowerblue;
               width: 1200px;
               height: 50px;
               margin-left: 160px;
           }
           .register{
               float: left;
               width: 800px;
               height: 700px;
               margin-left: 160px;
               background-color:white;
           }
           .Selection{
               float: left;
               width: 200px;
               height: 30px;
               background-color:dodgerblue;
               border-left: 1px solid gainsboro;
               border-radius: 5px;
               margin-left: 200px;
               margin-top: 50px;
               color: white;
               text-align: center;
               font-size: 15px;
               font-weight: bold;
           }
           .Selection2{
               float: left;
               width: 200px;
               height: 30px;
               border-left: 1px solid gainsboro;
               border-radius: 5px;
               background-color: #DCDCDC;
               margin-left: 0px;
               margin-top: 50px;
               text-align: center;
               font-size: 15px;
           }
           .address{
               width: 800px;
               height: 50px;
               margin-top: 130px;
           }
           .password{
               width: 800px;
               height: 50px;
               margin-top: 30px;
           }
           .repassword{
               width: 800px;
               height: 50px;
               margin-top: 30px;
           }
           .code{
               width: 800px;
               height: 50px;
               margin-top: 30px;
           }
           .phone{
               width: 800px;
               height: 50px;
               margin-top: 30px;
           }
       .Square-box{
           width: 400px;
           height: 30px;
           border-left: 1px solid gainsboro;
           border-radius: 5px;
           background-color: black;
       }
       .guanggao{
           float: left;
           width: 400px;
           height: 700px;
           background-color: #f5f5f5;
       }
           </style>
   </head>
   <body bgcolor="#f3f7fa">
       <div class="top">
           <div class="logo1">
               <div style="float: left;color: red;font-size:30px;font-weight: bold;padding-top: 30px;">163</div>
               <div style="float:left ;font-weight: bold;font-size:13px;padding-left: 15px;padding-top: 37px;">网易免费邮</div>
               <div style="float: left;color: darkgray;font-size:13px;padding-left: 15px;">mail.163.com</div>
           </div>
           <div class="logo2">
               <div style="float: left;color: green;font-size:30px;font-weight: bold;padding-top: 30px;">126</div>
               <div style="float:left ;font-weight: bold;font-size:13px;padding-left: 15px;padding-top: 37px;">网易免费邮</div>
               <div style="float: left;color: darkgray;font-size:13px;padding-left: 15px;">mail.126.com</div>
           </div>
           <div class="logo3">
               <div style="float: left;font-style:oblique;color: red;font-size:30px;font-weight: bold;padding-left: 20px;padding-top: 30px;">yeah</div>
               <div style="float: left;color: darkgray;font-style:oblique;font-size:20px;padding-left: -190px;padding-top:15px;">网易免费邮<br>.net</div>
           </div>
           <div class="logo4">
               <div style="padding-left: 20px;padding-top: 5px;font-size: 30px;color: darkgray;">中国第一大电子邮件服务商</div>
               <div style="float: right;color: blue;">反馈意见</div>
           </div>
       </div>
       <div class="middle">
           <div class="message">
               <div style="color: white;padding-left: 30px;padding-top: 15px;">欢迎注册网易邮箱！邮件地址可以登录使用其他网易旗下产品。</div>
           </div>
       <div class="register">
           <div>
           <div class="Selection" style="padding-top: 10px;">注册免费邮箱</div>
           <div class="Selection2" style="padding-top: 10px;">注册VIP邮箱</div>
           </div>
           <div class="address">
               <div style="float: left;color: red;padding-left: 100px;padding-top: 15px;">*</div>
               <div style="float: left;padding-left: 10px;padding-top: 10px;">邮件地址</div>
               <div style="float: left;margin-left: 20px;margin-top:10px;width: 300px;height: 30px;border-left: 1px solid gainsboro;border-radius: 5px;border: 1px solid darkgray;">
                   <input style="outline: none;border: 0;" size="40">
                   <div style="float: left;margin-left: 320px;margin-top:-20px;"> @</div>
                   <div style="float: left;margin-left: 350px;margin-top:-20px;"> <select> <option>126.com</option><option>163.com</option><option>yeah.net</option>
                   </select></div>
                       <div style="font-size: 11px;padding-top: 20px;">6~18个字符，可使用字母、数字、下划线，需以字母开头</div>
               </div>
           </div>
           <div class="password">
               <div style="float: left;color: red;padding-left: 100px;padding-top: 15px;">*</div>
               <div style="float: left;padding-left: 10px;padding-top: 10px;">密码</div>
               <div style="float: left;margin-left: 50px;margin-top:10px;width: 300px;height: 30px;border-left: 1px solid gainsboro;border-radius: 5px;border: 1px solid darkgray;">
                   <input style="outline: none;border: 0;" size="40">
                   <div style="font-size: 11px;padding-top: 20px;">6~16个字符，区分大小写</div>
               </div>
           </div>
           <div class="repassword">
               <div style="float: left;color: red;padding-left: 100px;padding-top: 15px;">*</div>
               <div style="float: left;padding-left: 10px;padding-top: 10px;">确认密码</div>
               <div style="float: left;margin-left: 20px;margin-top:10px;width: 300px;height: 30px;border-left: 1px solid gainsboro;border-radius: 5px;border: 1px solid darkgray;">
                   <input style="outline: none;border: 0;" size="40">
                   <div style="font-size: 11px;padding-top: 20px;">请再次填写密码</div>
               </div>
           </div>
           <div class="code">
               <div style="float: left;color: red;padding-left: 100px;padding-top: 15px;">*</div>
               <div style="float: left;padding-left: 10px;padding-top: 10px;">验证码</div>
               <div style="float: left;margin-left: 35px;margin-top:10px;width: 200px;height: 30px;border-left: 1px solid gainsboro;border-radius: 5px;border: 1px solid darkgray;">
                   <input style="outline: none;border: 0;" size="40">
                   <div style="font-size: 11px;padding-top: 20px;">请填写图片中的字符，不区分大小写</div>
               </div>
               <div><img src="call.jpg"></div>
               <div style="color: blue;font-size: 11px;padding-left: 410px;">看不清？换张图片</div>
           </div>
           <div class="phone">
               <div style="float: left;color: red;padding-left: 100px;padding-top: 15px;">*</div>
               <div style="float: left;padding-left: 10px;padding-top: 10px;">手机号</div>
               <div style="float: left;margin-left: 35px;margin-top:10px;"> <select> <option>中国</option><option>日本</option></select></div>
               <div style="float: left;margin-top:10px;width: 220px;height: 30px;border-left: 1px solid gainsboro;border-radius: 5px;border: 1px solid darkgray;">
                   <input style="outline: none;border: 0;" size="40" placeholder="+86-">
                   <div style="font-size: 11px;padding-top: 20px;padding-left: -30;">请编辑短信：222发送到106981630163222，以确保账号安全。
(短信费用由运营商收取)</div>
               </div>
           </div>
           <div>
           <div style="margin-top: 60px;margin-left: 200px;"><input type="checkbox"></div>
           <div style="float: left;color: darkgray;font-size: 11px;padding-left: 230px;margin-top:-20px;">同意 </div>
           <div style="float: left;color: blue;font-size: 11px;padding-left: 260px;margin-top:-20px;">《服务条款》、</div>
           <div style="float: left;color: blue;font-size: 11px;padding-left: 340px;margin-top:-20px;">《隐私政策》和</div>
           <div style="float: left;color: blue;font-size: 11px;padding-left: 420px;margin-top:-20px;">《儿童隐私政策》</div>
           </div>
           <div>
               <div style="margin-left: 205px;margin-top:20px;width: 200px;height: 30px;background-color: green;color: white;font-weight: bold;padding-top: 5px;text-align: -moz-center;">已发送短信验证，立即注册</div>
           </div>
       </div>
       <div class="guanggao">
           <div style="margin-top: 150px;"><img src="register-img1.png" width="400px"></div>
           <div style="font-size: 25px;font-weight: bold;padding-left: 110px;">随时随地，发邮件</div>
           <div>
               <div style="float: left;color: darkgray;padding-top: 10px;padding-left: 110px;">网</div>
               <div style="float: left;color: darkgray;padding-top: 10px;padding-left: 12px;">易</div>
               <div style="float: left;color: darkgray;padding-top: 10px;padding-left: 12px;">官</div>
               <div style="float: left;color: darkgray;padding-top: 10px;padding-left: 12px;">方</div>
               <div style="float: left;color: darkgray;padding-top: 10px;padding-left: 12px;">邮</div>
               <div style="float: left;color: darkgray;padding-top: 10px;padding-left: 12px;">箱</div>
               <div style="float: left;color: darkgray;padding-top: 10px;padding-left: 12px;">App</div>
           </div>
           <div><img src="register-img2.png" width="400px"></div>
           <div style="float: left;font-size: 13px;color: darkgray;padding-left: 133px;">扫一扫下载网易邮箱大师</div>
       </div>
       </div>
       <div style="padding-left: 500px;color: darkgray;">关于网易客户服务隐私政策 | 网易公司版权所有 © 1997-2019</div>
       <div style="padding-left: 510px;padding-top: 10px;color: darkgray;">数据来源：艾媒咨询《2015-2018中国个人邮箱行业研究报告》</div>
   </body>
</html>