QQ邮箱
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录QQ邮箱
</title>
<link rel="stylesheet" href="css/style.css">
<style>
</style>
</head>
<body>
<div class="header">
<img src="https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/logo/qqmail/qqmail_logo_default_35h206ff1.png">
<nav>
<a href="#">基本版
</a> |
<a href="#">English
</a> |
<a href="#">手机版
</a> |
<a href="#">企业邮箱
</a>
</nav>
</div>
<div class="content">
<div class="text">
<h1>QQ邮箱，常联系
</h1>
<p>到头来，
</p>
<p>我们记住的，
</p>
<p>不是敌人的攻击，
</p>
<p>而是朋友的沉默。
</p>
<p>——马丁·路德·金
</p>
<p>插画来自丑丑(两岁)
</p>
</div>
<div class="pic">
<img src="https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/tg-silence1e9c5d.jpg" width="320" height="360">
</div>
<div class="login">
<ul class="sidebar">
<li class="tab1">微信登录
</li>
<li class="tab2">QQ登陆
</li>
</ul>
<input type="text" placeholder=" 支持QQ号/邮箱/手机号登录" class="acount" /><br>
<input type="password" placeholder=" QQ密码" class="password" /><br>
<input type="checkbox" class="checkbox" />
<p>下次自动登录
</p><br>
<input type="submit" value="登 录" class="submit">
<nav>
<a href="#" class="forget">忘了密码？
</a>
<a href="#" class="new">注册新账号
</a>
</nav>
</div>
</div>
<div class="footer">
<p><a href="#">关于腾讯
</a> |
<a href="#">服务条款
</a> |
<a href="#">隐私政策
</a> |
<a href="#">客服中心
</a> |
<a href="#">联系我们
</a> |
<a href="#">帮助中心
</a> |
©1998 - 2020 Tencent Inc. All Rights Reserved.
</p>
</div>
</body>
</html>
CSS
body{
font-size: 12px;
}
*{
padding: 0;
margin: 0;
}
.header{
height: 60px;
width: 100%;
line-height: 60px;
background: #eff4fa;
border-bottom: 1px solid #d6dfea;
}
.header img{
margin-top: 10px;
margin-left: 20px;
}
.header nav{
text-align: right;
margin-top: -60px;
margin-right: 40px;
letter-spacing: 0.5px;
}
.header nav a{
color: #1d5494;
text-decoration: none;
}
.header nav a:hover{
text-decoration: underline;
}
.content{
width: 1100px;
height: 500px;
margin: auto;
margin-top: 80px;
}
.content .text{
float: left;
margin-top: 40px;
margin-left: 70px;
line-height: 200%;
}
.content .text h1{
color: #1d5494;
margin-bottom: 20px;
}
.content.text p{
font-size: 13px;
}
.content .pic{
float:left;
margin-top:25px;
margin-right:60px;
}
.footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 40px;
line-height: 40px;
border-top: 1px solid #d6dfea;
background: #eff4fa;
text-align: center;
color: #b6b6b6;
letter-spacing: 0.5px;
}
.footer a{
color: #1d5494;
text-decoration: none;
}
.footer a:hover{
text-decoration: underline;
}
.content .login{
float:left;
width:350px;
height:400px;
border:1px solid #1d5494;
}
.content .login .sidebar{
border-bottom:1px solid #1d5494;
height:50px;
line-height: 50px;
}
.content .login ul li{
list-style-type: none;
display:block;
height:50px;
font-size:16px;
font-family: "微软雅黑";
color:gray;
}
.content .login ul .tab1{
float:left;
margin-left:45px;
cursor: pointer;
}
.content .login ul .tab2{
float:right;
margin-right:45px;
cursor: pointer;
}
.content .login .acount{
margin-top:40px;
margin-left:27px;
width:280px;
height:35px;
font-family: "微软雅黑";
}
.content .login .password{
margin-top:15px;
margin-left:27px;
width:280px;
height:35px;
font-family: "微软雅黑";
}
.content .login .checkbox{
float:left;
margin-top:30px;
margin-left:30px;
width:20px;
height:20px;
border:1px solid black;
background:white;
}
.content .login p{
margin-top:30px;
float:left;
}
.content .login .submit{
margin-left:27px;
margin-top:10px;
width:280px;
height:40px;
background:cornflowerblue;
border:1px solid cornflowerblue;
font-size:16px;
color:white;
font-family:"微软雅黑";
cursor: pointer;
}
.content .login .code{
margin-top:10px;
margin-left:130px;
color:#1d5494;
cursor: pointer;
font-size:13px;
}
.content .login .forget{
float:left;
margin-top:80px;
margin-left:30px;
}
.content .login .new{
float:right;
margin-top:80px;
margin-right:30px;
}
.content .login a{
color:#1d5494;
text-decoration: none;
}
.content .login a:hover{
text-decoration: underline;
}
QQ空间
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ空间-分享生活，留住感动
</title>
</head>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="https://qzone.qq.com/favicon.ico">
<body>
<div class="logo">
</div>
<div class="input">
<div class="title">帐号密码登录
</div>
<p>推荐使用快速安全登录，防止盗号。
</p>
<input type="text" class="usr" placeholder=" 支持QQ号/邮箱/手机登录">
<input type="password" class="psw">
<input type="submit" value="登 录" class="submit">
<div class="forget">
<a href="#">忘记密码?
</a> |
<a href="#">注册新用户
</a>|
<a href="#">意见反馈
</a>
</div>
</div>
<div class="footer">
<p>反馈建议 | 官方空间 | 空间活动 | 空间应用 | ABCmouse腾讯版 | 腾讯原创馆 | QQ互联 | QQ登录 | 社交组件 | 应用侵权投诉 | Complaint Guidelines
</p>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
background: url("https://qzonestyle.gtimg.cn/qzone/qzactStatics/imgs/20171122191603_896cd9.jpg") no-repeat center center fixed;
/*兼容浏览器版本*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: helvetica,arial,微软雅黑,华文黑体;
font-size: 12px;
min-height: 305px;
min-width: 370px;
}
.title{
margin-top: 10px;
font-size: 20px;
color: #333;
margin-bottom: 16px;
text-align: center;
}
.input p{
position: relative;
margin: 0 auto 36px;
z-index: 11;
font-size: 16px;
color: #666;
text-align: center;
}
.logo{
position:absolute;
left:470px;
top:95px;
width: 251px;
height: 98px;
background-image: url("https://qzonestyle.gtimg.cn/qzone_v6/proj_qzonelogin/img/qzone-login-logo-dark.32.png ");
}
.input{
height: 312px;
width: 414px;
position:absolute;
left:870px;
top:195px;
background: white;
}
.usr{
margin-top:-10px;
margin-left:77px;
width:238px;
height:28px;
font-family: "微软雅黑";
}
.psw{
margin-top:10px;
margin-left:77px;
width:238px;
height:28px;
font-family: "微软雅黑";
}
.submit{
margin-left:77px;
margin-top:10px;
width:238px;
height:28px;
background: cornflowerblue;
border:1px solid cornflowerblue;
font-size:16px;
color:white;
font-family:"微软雅黑";
cursor: pointer;
}
a{
color:black;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.forget{
float:right;
margin-top:80px;
margin-left:30px;
}
.footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 40px;
line-height: 40px;
border-top: 1px solid #d6dfea;
background: #eff4fa;
text-align: center;
color: #b6b6b6;
letter-spacing: 0.5px;
}
手kou
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
手机统一登录
</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="https://qzone.qq.com/favicon.ico">
<style type="text/css">
.logo {background-image:url("//qzonestyle.gtimg.cn/qzone/phone/style/img/ptlogin-logo.png");}
</style>
</head>
<body data-gr-c-s-loaded="true">
<div id="content" class="content">
<div id="login" class="login">
<div id="logo" class="logo"></div>
<div id="app_name" style="display:none"></div>
<div id="web_login">
<ul id="g_list">
<li id="g_u">
<div id="del_touch" class="del_touch">
<span id="del_u" class="del_u"></span>
</div><input id="u" class="inputstyle" name="u" autocomplete="off" placeholder="QQ号码/手机/邮箱">
</li>
<li id="g_p">
<div id="del_touch_p" class="del_touch">
<span id="del_p" class="del_u"></span>
</div><input id="p" class="inputstyle" maxlength="16" type="password" name="p" autocorrect="off" placeholder="请输入你的QQ密码">
</li>
</ul>
<div href="#;" id="go">
登 录
</div>
<div href="#" id="onekey" class=" weak" style="display: block;">
一键登录
</div>
</div>
<div id="switch">
<div id="zc_feedback">
<span id="zc" onclick="window.open('#')">注册新帐号
</span> <span
id="forgetpwd">忘了密码？
</span>
</div>
</div>
<div id="custom_bottom"></div>
</div>
</div>
</body>
</html>
css
body,html {
height:100%
}
#go,#onekey,#vcode #submit,.copyright,.header,.nick,.q_login,.ui_topbar {
text-align:center
}
body {
font-size:16px
;
background:#eee
}
* {
padding:0
;
margin:0
;
list-style:none
;
text-decoration:none
}
.content {
margin:0 auto
;
width:320px
;
height:500px
;
position:relative
}
#error_message a,#error_message a:visited {
color:#F15A22
}
.login {
margin:0 auto
;
padding-top:30px
}
.inputstyle {
width:273px
;
height:44px
;
color:#000
;
border:none
;
background:0 0
;
padding-left:15px
;
font-size:16px
;
-webkit-appearance:none
}
.logo {
height:100px
;
width:244px
;
margin:0 auto 20px
;
background-size:244px 100px
}
#switch,#vcode,#web_login {
margin:0 auto
}
#web_login {
width:290px
}
#g_list {
background:#fff
;
height:89px
;
border-radius:4px
}
#g_p,#g_u {
position:relative
}
#g_u {
border-bottom:1px solid #eaeaea
}
#go,#onekey {
width:290px
;
height:44px
;
line-height:44px
;
background:#146fdf
;
border:none
;
border-radius:4px
;
color:#fff
;
font-size:16px
;
margin-top:15px
;
display:block
}
#go.weak,#onekey.weak,#switch #swicth_login {
height:42px
;
border:1px solid #9abbe3
;
color:#146fdf
}
#onekey {
background:#146fdf
;
display:none
}
#go.weak,#onekey.weak {
background-color:#e7e7e7
}
#switch {
width:290px
}
#switch #zc_feedback {
width:290px
;
position:relative
;
margin-top:15px
;
overflow:hidden
}
#switch #forgetpwd,#switch #zc {
color:#246183
;
line-height:14px
;
font-size:14px
;
padding:15px 10px
}
#switch #zc {
float:right
;
margin-right:-10px
}
#switch #forgetpwd {
float:left
;
margin-left:-10px
}
