使用html和css实现QQ邮箱界面_qq邮箱html代码资源-CSDN文库

共5个文件

png：2个

jpg：2个

html：1个

html

1星需积分: 46 4 浏览量 2019-01-17 17:06:21 上传评论 5 收藏 129KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

qqEmail.zip （5个子文件）

qqEmail

images

emailRight.jpg 22KB

效果图.jpg 131KB

logo.png 4KB

index.html 4KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>登入QQ邮箱</title> <style> *{ padding:0px ; margin:0px auto;} .title{ width:100%; height:80px; background-color: #EFF4FA; } .title_1{ width:182px; height:35px; background:url(images/logo.png); background-size:182px 35px; margin:20px 0px 10px 20px; float:left; } .title_2{ width:300px; height:100px; font-size:12px; text-align:right; margin-top:30px; margin-right:30px; float:right; } .title_2 a{ text-decoration:none; font-size:15px; color:#666;} .logo{ width:528px; height:322px; background:url(images/emailRight.jpg); background-size:528px 322px; margin:200px 0px 0px 200px; float:left;} .content{ width:419px; height:400px; border:2px solid #eee; margin:170px 0px 0px 780px; background-color:#fff; } .nav{ width:100%; height:50px; border-bottom:2px solid #eee; } span{ display:inline-block; height:50px; color:#CCC; line-height:50px; margin-left:60px; } .span2{ margin-left:120px; color:#000; border-bottom:2px solid black; } .login{ width:418px; height:200px; } .login_top{ margin:40px auto; width:272px; } .qqdiv,.pwddiv{ width:272px; height:42px; background:url(images/login.png) no-repeat -2px -2px; margin-bottom:13px; } #qq,#pwd{ border:none; background:none; width:258px; height:18px; padding:10px 0px 10px 10px; } .auto{ margin-bottom:13px;} .subdiv{ width:100%; height:40px; } #sub{ color:#fff; font-size:18px; width:270px; height:35px; background-color: #39F; border:none; border-radius:5px;} .login_bottom{ font-size:12px; text-align:right; margin-right:10px; margin-top:80px;} .login_bottom a{ text-decoration:none; color:#666;} </style> </head> <body> <div class="title"> <div class="title_1"></div> <div class="title_2"> <a href=""> 基本版？ </a>|<a href=""> English </a>|<a href=""> 手机版 </a>|<a href=""> 企业版</a> </div> </div> <div class="logo"></div> <div class="content"> <div class="nav"> <span>快速登入</span><span class="span2">账号密码登入</span> </div> <div class="login"> <div class="login_top"> <form action="" method=""> <div class="qqdiv"> <input type="text" name ="uname" id="qq" placeholder="支持qq号/邮箱/手机号登入" /> </div> <div class="pwddiv"> <input type="password" name ="pwd" id="pwd" placeholder="密码" /> </div> <div class="auto"> <input type="checkbox" >下次自动登入</div> <div class="subdiv"> <input type="submit" value="登入" id="sub" /> </div> </form> </div> </div> <div class="login_bottom"> <a href=""> 忘记密码？</a>|<a href=""> 注册新账号 </a>|<a href=""> 意见反馈 </a> </div> </div> </body> </html>

评论收藏

内容反馈