admin管理员组文章数量:1656408
前言
学完了HTML+CSS,来仿写一手QQ邮箱的首页。代码下载链接
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1423, initial-scale=0.2">
<title>登录QQ邮箱</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body style="overflow-x:hidden">
<div class="header">
<a class="header_logo" href="https://mail.qq">
<img src="img/logo.png">
</a>
<div class="header_link">
<a href="https://w.mail.qq/cgi-bin/loginpage?f=xhtml">基本版</a>
|
<a href="https://en.mail.qq">English</a>
|
<a href="https://app.mail.qq/">手机版</a>
|
<a href="https://exmail.qq?referrer=index_top">企业邮箱</a>
</div>
</div>
<div class="container">
<div class="login_picture">
<img src="img/pic.jpg">
</div>
<div class="login_container">
<div class="login_card_tab">账号密码登录</div>
<form action="index.php" method="post">
<div class="uinarea">
<input type="text" class="inputstyle" value tabindex="1" name="username" placeholder="支持QQ号/邮箱/手机号登录" style="font-size: 17px;padding-left: 10px;">
</div>
<div class="pinarea">
<input type="password" class="inputstylep" value tabindex="2" name="passwd" placeholder="QQ密码" style="font-size: 17px;padding-left: 10px;">
</div>
<div class="autologin">
<input type="checkbox" value="yes" name="autologin">下次自动登录
</div>
<div class="login">
<input type="submit" value="登 录" class="btn">
</div>
</form>
<div class="bottom">
<a href="https://aq.qq/cn2/findpsw/pc/pc_find_pwd_input_account" target="_blank">忘了密码?</a>
</div>
<div class="bottom1">
<a href="http://zc.qq/chs/index.html?type=1" target="_blank">注册新账号</a>
</div>
</div>
</div>
<div class="footer">
<a href="https://www.tencent" target="_blank">关于腾讯</a>
|
<a href="https://mail.qq/cgi-bin/readtemplate?check=false&t=mail_clause" target="_blank">服务条款</a>
|
<a href="https://privacy.qq/" target="_blank">隐私政策</a>
|
<a href="https://kf.qq/product/email.html" target="_blank">客服中心</a>
|
<a href="https://mail.qq/zh_CN/contact_us.html" target="_blank">联系我们</a>
|
<a href="https://service.mail.qq" target="_blank">帮助中心</a>
|
<span class="gray">©1998 - 2021 Tencent Inc. All Rights Reserved.</span>
</div>
</body>
</html>
CSS这里因为技术太菜了,重复的地方比较多…
.header {
width: 1425px;
height: 62px;
border-width: 0px;
background-color: rgb(239, 244, 250);
border-bottom: 1px solid #d6dfea;
position: absolute;
top: 0px;
}
.header_logo {
height: 35px;
width: 182px;
margin: 13px 0px 0px 32px;
/*margin-left: 32px;*/
float: left;
}
.header_link {
width: 1163px;
height: 30px;
font-size: 12px;
margin: 22px 20px 0px;
padding: 0px 40px 0px 0px;
text-align: right;
position: relative;
right: -220px;
}
.header_link > a {
color: #1d5494;
text-decoration: none;
}
.header_link > a:hover {
text-decoration: underline;
}
.login_picture {
width: 520px;
height: 400px;
margin-top: 147px;
margin-left: 249px;
float: left;
}
.login_container {
width: 334px;
height: 387px;
float: right;
border: 1px solid #a0b1c4;
border-radius: 5px;
margin: 128px 252px auto auto;
}
.login_container > .login_card_tab {
font-size: 16px;
color: #333;
height: 30px;
text-align: center;
padding: 10px 0px;
border-bottom: 1px solid #a0b1c4;
background-color: rgb(239, 244, 250);
}
.input_username {
font-size: 16px;
position: absolute;
top: 210px;
right: 360px;
color: #999;
}
.inputstyle {
width: 268px;
height: 36px;
position: absolute;
top: 223px;
right: 285px;
border: 1px solid #a0b1c4;
}
.uinarea > input::-webkit-input-placeholder {
color: #999;
font-size: 15px;
}
.inputstylep {
width: 268px;
height: 35px;
position: absolute;
top: 273px;
right: 285px;
border: 1px solid #a0b1c4;
}
.pinarea > input::-webkit-input-placeholder {
color: #999;
font-size: 15px;
}
.autologin > input {
margin-top: 150px;
margin-left: 26px;
width: 15px;
}
.autologin {
font-size: 12px;
}
.login > input {
width: 284px;
height: 40px;
margin-top: 16px;
margin-left: 26px;
background-color: cornflowerblue;
border-width: 0px;
border-radius: 3px;
font-size: 18px;
color: white;
}
.bottom > a {
text-decoration: none;
color: #225592;
font-size: 12px;
margin-left: 26px;
position: absolute;
top: 490px;
}
.bottom1 > a {
text-decoration: none;
color: #225592;
font-size: 12px;
margin-left: 250px;
position: absolute;
top: 490px;
}
.bottom > a:hover, .bottom1 > a:hover {
text-decoration: underline;
}
.footer {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
width: 1425px;
height: 37px;
text-align: center;
background-color: rgb(239, 244, 250);
font-size: 12px;
border-bottom: 1px solid #d6dfea;
line-height: 36px;
}
.footer > a {
color: #1d5494;
text-decoration: none;
}
.footer > a:hover {
text-decoration: underline;
}
最终页面
版权声明:本文标题:QQ邮箱首页仿写 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729731695a1211507.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论