HTML+CSS 模拟QQ邮箱登录界面

模拟QQ邮箱登录界面

index.html


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>qq邮箱登录</title><link rel="stylesheet" href="./css/index.css">
</head>
<body><div class="container"><header><a class="header_logo" href="/">QQ邮箱</a><div class="header_link"><a href="#">基本版</a>&nbsp;|&nbsp;<a href="#">English</a>&nbsp;|&nbsp;<a href="#" >手机版</a>&nbsp;|&nbsp;<a href="#">企业邮箱</a></div></header><!-- style="width: 330px; height: 336px; visibility: visible; background-color: red;" --><article><div class="left_container"><div class="pictures_txt"><p class="pictures_title">QQ邮箱，常联系！</p><p>1982年，第一张电脑笑脸诞生</p><p>今天，人们已经习惯用它来表达心情</p><p>现在，您也可以在邮件里</p><p>用:-)来传达一个微笑的表情</p><p class="pictures_info"><a href="#">了解更多表情符号</a></p></div><div class="picture"></div></div><div class=" login_container" ><div class="login_tab"><div class="login_tab_item " id="wx">微信登录</div><div class="login_tab_item active" id="qq">QQ登录</div></div><div class="login_content"><div class="qq" id="qq_box"><input type="text" class="qq_text" placeholder="支持QQ号/邮箱/手机号登录"><input type="password"class="qq_text" placeholder="QQ密码"><div class="checkbox"><input type="checkbox" name="" id="">&nbsp;&nbsp;&nbsp;下次自动登录</div><input type="submit" value="登录" class="btn"><div class="text">扫码快捷登录</div><a href="#">忘密码？</a></div><div class="wx" id="wx_box"><div class="wx_picture"><img class="qrcode lightBorder" src="./imgs/wx.jpg">&nbsp;&nbsp;请使用微信扫描二维码登录<br>&nbsp;&nbsp;&nbsp;<div class="checkbox"><input type="checkbox" name="" id="">&nbsp;&nbsp;&nbsp;下次自动登录</div></div></div></div></div><div class="clear"></div></article><footer><a href="#" target="_blank">关于腾讯</a>&nbsp;|&nbsp;<a href="#" target="_blank">服务条款</a>&nbsp;|&nbsp;<a href="#" target="_blank">隐私政策</a>&nbsp;|&nbsp;<a href="#" target="_blank">客服中心</a>&nbsp;|&nbsp;<a href="#" target="_blank">联系我们</a>&nbsp;|&nbsp;<a href="#" target="_blank">帮助中心</a>&nbsp;|&nbsp;<span class="gray">©1998 - 2019 Tencent Inc. All Rights Reserved.</span></footer></div>
</body>
<script>
window.onload = function(){var wx = document.getElementById('wx')var qq = document.getElementById('qq')var wxBox = document.getElementById('wx_box')var qqBox = document.getElementById('qq_box')wx.onclick = function () {qqBox.style.display = 'none'wxBox.style.display = 'block'wx.classList.add('active')qq.classList.remove('active')}qq.onclick = function () {wxBox.style.display = 'none'qqBox.style.display = 'block'qq.classList.add('active')wx.classList.remove('active')}
}
</script>
</html>

index.css

* {margin: 0;padding: 0;
}
body {font-family: "lucida Grande",Verdana,"Microsoft YaHei";font-size: 12px;
}
a {color: #1d5494;text-decoration: none;
}header {height: 62px;border-bottom: 1px solid #d6dfea;background: #eff4fa;zoom: 1;
}
article {height: 429px;
}
footer {position: fixed;left: 0;right: 0;bottom: 0;height: 37px;background-color: yellow;
}
.header_logo {float: left;width: 182px;height: 35px;margin-top: 14px;margin-left: 17px;text-indent: -9999em;background-repeat: no-repeat;background-position: left center;background-image:url(../imgs/qqmail_logo.png);
}
.header_link {float: right;overflow: hidden;text-decoration: none;margin-top: 16px;padding-right: 17px;line-height: 30px;text-align: right;color: #b6b6b6;
}.header_link a:hover{cursor: pointer;text-decoration: underline;
}article {width: 100%
}
article .clear {clear: both;
}
article .left_container {position: relative;margin-left: 180px;margin-top: 60px;float: left;width: 520px;height: 400px;overflow: hidden;}
article .left_container .picture {
background-image: url(../imgs/smile.jpg);
background-position: 234px 130px;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 400px;
_width: 100%;
background-repeat: no-repeat;
}
article .left_container .pictures_txt {padding-top: 25px;position: relative;font-size: 14px;font-weight: normal;line-height: 24px;
}
article .left_container .pictures_txt p {display: block;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;
}
article .left_container .pictures_title {line-height: 26px;margin-top: 15px;margin-bottom: 15px;font-size: 24px;font-weight: normal;color: #6f95c8;
}article .login_container {overflow: hidden;margin-right: 180px;margin-top: 60px;float: right;width: 336px;height: 389px;border: 1px solid #a0b1c4;
}
article .login_container .login_tab {height: 50px;font-size: 10px;border-bottom: 1px solid #a0b1c4;background-color: #f9fbfe;border-radius: 6px 6px 0 0;
}
article .login_container .login_tab .login_tab_item {float: left;width: 50%;font-size: 16px;line-height: 50px;color: #999;text-align: center;cursor: pointer;
}
article .login_container .login_tab .active {color: #333;
}article .login_container .login_content {padding: 20px 30px;
}
article .login_container .login_content .qq {}
article .login_container .login_content  .qq_text {width: 100%;height: 30px;margin: 5px auto;text-indent: 1em;font-size: 16px;
}
article .login_container .login_content .qq .checkbox {margin: 20px 10px;font-size: 13px;
}
article .login_container .login_content .qq .btn {border-radius: 6px;background-color: rgb(0, 132, 255);height: 40px;line-height: 39px;width: 100%;outline: none;font-size: 20px;color: #fff;
}
article .login_container .login_content .qq .text {margin-top: 10px;line-height: 20px;text-align: center;color: #225592;font-size: 16px;
}
article .login_container .login_content .qq a {display: block;text-align: right;margin-top: 40px;
}
article .login_container .login_content .wx{display: none;
}article .login_container .login_content .wx .wx_picture {width: 180px;height: 180px;margin: 20px 20px;border-radius: 2px;border: none;padding-left: 20px;font-size: 14px;
}
article .login_container .login_content .wx .wx_picture  img {text-align: center;width: 180px;height: 180px;
}
footer {position: fixed;left: 0;right: 0;bottom: 0;z-index: 2;clear: both;line-height: 36px;text-align: center;color: #b6b6b6;background-color: #eff4fa;border-top: 1px solid #d6dfea;
}

HTML+CSS 模拟QQ邮箱登录界面相关推荐

html+css仿QQ邮箱静态界面
初学html和css后,制作了自己的第一个静态网页在制作过程中,遇到了不少问题: 1.右上角及最后一行,鼠标放上去出现下划线效果: a:link{color:#46A3FF;text-decorat ...
仿qq邮箱登录界面（html+css）
具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
Python selenium模拟QQ邮箱登录
from selenium import webdriver import timebrowser = webdriver.Chrome() browser.get('https://mail.qq. ...
QQ邮箱登录PC布局实战笔记二
本文目标: 尽量100%还原QQ邮箱登录界面头部区域,掌握div之间的位置关系,掌握常见的定位技术和浮动技术.将头部所需要的HTML标签进行仔细学习. 开始准备: 浏览器:Firefox/Chrome ...
利用phantomjs模拟QQ自动登录
之前为了抓取兴趣部落里的数据,研究了下QQ自动登录. 当时搜索了一番,发现大部分方法都已经失效了,于是准备自己开搞. 第一个想到的就是参考网上已有方案的做法,梳理登陆js的实现,通过其他语言重写. 考 ...
Java程序模拟QQ空间登录 - 并模拟刷说说的赞(图文) 注意：腾讯修改了加密算法，已失效（2015-01-31）
Java程序模拟QQ空间登录 - 并模拟刷说说的赞背景:在2013-10-25的一天,有个friend在QQ问我:"post登陆QQ空间抓取不到post的数据".于是故事就开始了 ...
注册邮箱重定向到相应邮箱登录界面js
这个功能其实还是比较常见的,使用最多的就是注册.邮箱验证.找回密码这些方面,例如注册后根据不同的邮箱后缀跳转到邮箱登录界面,例如注册的邮箱是xxx@163.com就跳转到网易的邮箱登录界面:填写的是x ...
3、React Native实战——实现QQ的登录界面
今天记录的是使用React Native实现QQ的登录界面,如果不了解React Native,请看React Native中文网站:http://reactnative.cn/ 下面是一张手机QQ的 ...
QQ邮箱登录PC布局实战笔记一
QQ邮箱布局实战(PC)笔记<一> 开篇说明: 这个系列的笔记算是作为我复习前端知识的一个系列吧.前端的知识很杂,各种小技巧很多,而且更新变化很快,不像我们在校学习的那些计算机基础理论知识 ...

HTML+CSS 模拟QQ邮箱登录界面

模拟QQ邮箱登录界面

HTML+CSS 模拟QQ邮箱登录界面相关推荐

最新文章

热门文章