mail.163.com登录界面

最新推荐文章于 2025-06-10 02:32:26 发布

原创最新推荐文章于 2025-06-10 02:32:26 发布 · 1.5w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS学习

本文详细解析了163邮箱登录界面的设计与实现，包括HTML结构、CSS样式及JavaScript交互逻辑等内容，为前端开发者提供了参考案例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>mail.163.com的登录界面</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> html,body{text-align:center;margin:0px;padding:0px;font-size:12px;background-color:#FFF} img{border:0px} form{ margin:0px; padding:0px} a{color:#848585; font-size:12px; text-decoration:none} a:hover{color:#000} a.c_black{ color:#333;} a.c_black:hover{ color:#000;} .loginTable{ border:0px; border-collapse:collapse; float:left; margin-left:32px; margin-top:16px; width:320px; display:inline; } .loginNameLabel{ width:47px; text-align:left; font-size:12px; } .loginNameImg{ width:88px; height:21px; background-image:url(images/main-pic.gif); background-repeat:no-repeat; background-position:-410px -74px; float:left; display:inline } .loginNameInput{width:182px; text-align:left} .loginNameTxt{ font-weight:bold; width:172px; border:#0a8fda 1px solid; background-color:#E8F9FF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; padding:5px 3px } .loginTableSpace{height:14px; border-collapse:3px} .loginPwdLabel{width:47px; text-align:left; font-size:12px} .loginPwdInput{width:182px; text-align:left} .loginPwdTxt{ width:172px; border:#0a8fda 1px solid; background-color:#E8F9FF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; padding:5px 3px } .loginPwdFind{text-align:left; font-size:12px} .loginTableVersion{width:47px; text-align:left; font-size:12px} .loginTableSelect{width:180px;height:22px;border:1px solid #84a1bd; float:left; height:auto; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:14px } .loginTableRemeber{width:200px; height:18px; overflow:hidden;float:left; margin-left:45px; display:inline} .btn1,.btn2{width:86px; height:33px; background-image:url(images/main-pic.gif); background-repeat:no-repeat;border:0px; float:left; margin-left:47px; cursor:pointer!important;cursor:hand; display:inline} .btn1{ background-position:-310px -11px} .btn2{ background-position:-211px -11px} .btn3{width:86px; height:33px; background-image:url(images/main-pic.gif); background-repeat:no-repeat;border:0px; float:left; margin-left:31px; cursor:pointer!important;cursor:hand; display:inline} .btn3{ background-position:-12px -11px} .btn3:hover{ background-position:-111px -11px} .loginTableSpace1{width:319px; height:15px; background-image:url(images/main-pic.gif); background-repeat:no-repeat; background-position:-8px -204px; float:left; margin-top:15px; margin-left:0px;display:inline} .loginTableBottom{width:240px; height:45px; font-size:12px; color:#818181; text-align:left; line-height:24px; margin-left:30px; float:left;display:inline} .login{width:378px; height:390px; background-color:#ffffff; float:right; margin-top:41px; margin-right:3px; display:inline} .login_month{ position:absolute; left:230px; top:-33px; width:136px; height:72px; background-image: url(images/month-0903.jpg); background-repeat: no-repeat; } .login_month_img{ position:absolute; right:375px; top:75px; width:414px; height:190px; background-image: url(images/big-month-0903.jpg); background-repeat: no-repeat; } .login_month_img1{ position:absolute; left:376px; top:6px; width:100px; height:280px; background-image:url(images/big-month-0903.jpg); background-repeat:no-repeat; background-position:-419px 72px; } .login_top,.login_bottom{width:378px; background-image:url(images/main-pic.gif); background-repeat:no-repeat;font-size:0px; line-height:0px; overflow:hidden} .login_top{background-position:-10px -55px;height:12px} .login_bottom{background-position:-10px -79px;height:13px} .login_middle{height:354px; background-color:#FFFFFF; background-image:url(images/login-middle.jpg); background-repeat:repeat-y} .login_middle_img{width:32px; height:32px; float:left; background-image:url(images/main-pic.gif); background-repeat:no-repeat; background-position:-258px -113px; margin-top:11px; margin-left:33px;display:inline} .login_middle_img1{width:144px; height:17px; background-image:url(images/main-pic.gif); background-repeat:no-repeat; background-position:-414px -46px; float:left; margin-top:19px; margin-left:17px; font-size:0px; line-height:0px} .login_middle_clear{clear:both; height:0px; font-size:0px;line-height:0px; overflow:hidden} </style> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="login" style="position:relative" mce_style="position:relative"> <div class="login_month"></div> <div class="login_month_img1"></div> <div class="login_month_img"></div> <div class="login_top"></div> <div class="login_middle"> <div class="login_middle_img"></div> <div class="login_middle_img1" style="background-position:-416px -46px" mce_style="background-position:-416px -46px"></div> <div class="login_middle_clear"></div> <table border="0" cellspacing="0" class="loginTable"> <tr> <td class="loginNameLabel">用户名</td> <td class="loginNameInput"> <input id="txtName" class="loginNameTxt" type="text" name="username" maxlength="50" /> </td> <td class="loginNameImg" title="@163.com"></td> </tr> <tr> <td class="loginTableSpace" colspan="3"></td> </tr> <tr> <td class="loginPwdLabel">密码</td> <td class="loginPwdInput"> <input id="txtPwd" class="loginPwdTxt" type="password" name="password" /> </td> <td class="loginPwdFind"> <a href="#" mce_href="#" target="_blank" title="找回密码" class="c_black">忘记密码了?</a> </td> </tr> <tr> <td class="loginTableSpace" colspan="3"></td> </tr> <tr> <td class="loginTableVersion">版本</td> <td colspan="2"> <select class="loginTableSelect" name="selType" id="Select1"> <option value="-1" selected="selected">　　　默　　认</option> <option value="js">　　　极速　3.0</option> <option value="jy">　　　简约　3.0</option> </select> </td> </tr> <tr> <td class="loginTableSpace" colspan="3"></td> </tr> <tr> <td colspan="3"> <div class="loginTableRemeber" style="width:210px;"> <input name="remUser" type="checkbox" id="Checkbox1" checked="checked" style="float:left" mce_style="float:left" /> <span style=" float:left;margin-top:3px;*margin-top:5px" mce_style=" float:left;margin-top:3px;*margin-top:5px"> <label for="remUsername">记住用户名</label> </span> <input name="secure" type="checkbox" id="Checkbox2" checked="checked" style="float:left;margin-left:19px;" mce_style="float:left;margin-left:19px;" /> <span style=" float:left;margin-top:3px;*margin-top:5px" mce_style=" float:left;margin-top:3px;*margin-top:5px"> <label for="secure">SSL安全登录</label> </span> <a href="#" mce_href="#" target="_blank"> <img style=" display:inline; margin-top:2px;" mce_style=" display:inline; margin-top:2px;" src="images/whyssl.gif" mce_src="images/whyssl.gif" border="0" alt="什么是SSL登录" title="什么是SSL登录" /> </a> </div> </td> </tr> <tr> <td class="loginTableSpace" colspan="3"></td> </tr> <tr> <td colspan="3"> <input name="登录邮箱" title="登录邮箱" value="" type="submit" class="btn1" onmouseover="this.className='btn2'" onmouseout="this.className='btn1'" /> <a href="#" mce_href="#" target="_blank" class="btn3" title="立即注册"></a> </td> </tr> <tr> <td colspan="3"><div class="loginTableSpace1"></div></td> </tr> <tr> <td colspan="3" style="padding:0px" mce_style="padding:0px"> <div class="loginTableBottom"> · <a href="#" mce_href="#" target="_blank">网易专场招聘(游戏技术/广告销售)</a><br /> · <a href="#" mce_href="#" target="_blank">163邮箱积分换礼乐翻天</a> </div></td> </tr> </table> </div> <div class="login_bottom"></div> </div> </body> </html>

标签

#float #class #border #function #url