<!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>
使用html和css实现QQ邮箱界面
1星 需积分: 46 110 浏览量
2019-01-17
17:06:21
上传
评论 5
收藏 129KB ZIP 举报
小小华bk
- 粉丝: 81
- 资源: 36
最新资源
- Screenshot_2024-05-07-20-14-54-883_com.tencent.mobileqq.jpg
- 全网最好用的Source Insight4支持Verilog和SystemVerilog语法高亮和跳转的配置文件 超越官方品质
- Numpy随堂练习1.ipynb
- 176542687225117Facebook Lite_405.0.0.8.113_apkcombo.com.arm64-v8a.apk
- 41532698775097Facebook Lite_405.0.0.8.113_apkcombo.com.armeabi-v7a.apk
- lvgl v9.1版本通过LvglFontTool V0.5工具生成内部字体使用
- 使用JS编写购物车功能
- base.apk
- app.apk
- glxgears x11perf测试工具.docx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈