模拟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> | <a href="#">English</a> | <a href="#" >手机版</a> | <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=""> 下次自动登录</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"> 请使用微信扫描二维码登录<br> <div class="checkbox"><input type="checkbox" name="" id=""> 下次自动登录</div></div></div></div></div><div class="clear"></div></article><footer><a href="#" target="_blank">关于腾讯</a> | <a href="#" target="_blank">服务条款</a> | <a href="#" target="_blank">隐私政策</a> | <a href="#" target="_blank">客服中心</a> | <a href="#" target="_blank">联系我们</a> | <a href="#" target="_blank">帮助中心</a> | <span class="gray">©1998 - 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邮箱登录界面》对你有帮助，请点赞、收藏，并留下你的观点哦！
