仿qq邮箱登录界面（html+css）

具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QQ Eamil</title>
<style type="text/css">

body{
background: url(img/1.png) no-repeat;
background-position: 200px 200px;
}

*{
padding: 0;margin: 0;

}

.top{
width: 1600px;
height: 60px;
}

.footer{
width: 1600px;
height: 40px;
position: absolute;
bottom: 0px;
}

.all{
border:1px solid lightblue;
width: 335px;
height: 387px;
position: absolute;
top: 136px;
right: 341px;
}

.all .first .login,.all .first .pas{
width:167px;
height: 50px;
text-align: center;
line-height: 50px;
display: block;
float: left;
background-color: lightblue;
font-family: "微软雅黑";
color: gray;

}
.all .second .number{
width: 284px;
height: 35px;
margin-top: 33px;
margin-left: 17px;
}

.all .second .password{
width: 284px;
height: 35px;
margin-top: 15px;
margin-left: 17px;
}

.all .second .ok{
width: 284px;
height: 40px;
margin-top: 17px;
margin-left: 17px;
border: 0;
background-color: cornflowerblue;
font-size:larger;
color: white;
font-family: "微软雅黑";
}

.all .first{
width: 335px;
height:52px;
}

.all .second{
width: 332px;
height:290px;
}

.all .third{
width: 222px;
height:45px;
line-height: 45px;
padding-left: 110px;
}

.all .first .login:hover{
color:black;
}

.all .first .pas:hover{
color:black;
}

.all .second .bnext{
width: 20px;
height: 20px;
margin-top: 10px;
margin-left: 17px;
}

.all .second .tnext{
display: block;
width: 100px;
height: 15px;
margin-left: 45px;
margin-top: -22px;
font-size: small;

}

.all .third span{
font-size:smaller;
color: blue;
font-family: "微软雅黑";
}

</style>

</head>
<body>
<img src="img/logo.png" class="top" />
<div class="all">
<div class="first">
<span class="login">快速登录</span>
<span class="pas">账号密码登录</span>
</div>
<div class="second">
<input type="text" placeholder="QQ账号" class="number"/><br />
<input type="text" placeholder="QQ密码" class="password"/>
<input type="checkbox" class="bnext"/><span class="tnext">下次自动登录</span>
<input type="button" value="登录" class="ok"/>
</div>
<div class="third">
<span>忘了密码？|</span>
<span>注册新账户|</span>
<span>意见反馈</span>
</div>

</div>
<img src="img/footer.png" class="footer"/>
</body>
</html>

效果图如下：

仿qq邮箱登录界面（html+css）相关推荐

HTML+CSS 模拟QQ邮箱登录界面
模拟QQ邮箱登录界面 index.html <!DOCTYPE html> <html lang="en"> <head><meta ch ...
html+css仿QQ邮箱静态界面
初学html和css后,制作了自己的第一个静态网页在制作过程中,遇到了不少问题: 1.右上角及最后一行,鼠标放上去出现下划线效果: a:link{color:#46A3FF;text-decorat ...
QQ邮箱登录PC布局实战笔记二
本文目标: 尽量100%还原QQ邮箱登录界面头部区域,掌握div之间的位置关系,掌握常见的定位技术和浮动技术.将头部所需要的HTML标签进行仔细学习. 开始准备: 浏览器:Firefox/Chrome ...
一个基于Flask框架做的仿QQ邮箱系统（收发邮件、贝叶斯模型训练、垃圾邮件过滤、个性化标签）
一个基于Flask框架做的仿QQ邮箱系统(收发## 标题邮件.贝叶斯模型训练.垃圾邮件过滤.个性化标签) 1.贝叶斯邮件垃圾邮件分类对上千封邮件进行贝叶斯模型分类训练,对基本邮件实现垃圾分类效果. ...
css+js校验实现仿网易邮箱注册界面和校验功能
css+js校验实现仿网易邮箱注册界面和校验功能先来看看最终的效果图吧ヾ(≧▽≦*)o 代码如下: <!DOCTYPE html> <html lang="en& ...
仿qq邮箱实现php+mysql动态用户登录
仿qq邮箱实现php+mysql动态用户登录 1.大体思路在前端输入用户名密码通过form表单提交到后台进性判断,如果数据库中该用户名和密码,则进行转跳,否者将该用户名密码插入数据库然后再进行转跳. ...
ios 仿电脑qq登录界面_iOS开发UI篇—模仿ipad版QQ空间登录界面
iOS开发UI篇-模仿ipad版QQ空间登录界面一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...
注册邮箱重定向到相应邮箱登录界面js
这个功能其实还是比较常见的,使用最多的就是注册.邮箱验证.找回密码这些方面,例如注册后根据不同的邮箱后缀跳转到邮箱登录界面,例如注册的邮箱是xxx@163.com就跳转到网易的邮箱登录界面:填写的是x ...
3、React Native实战——实现QQ的登录界面
今天记录的是使用React Native实现QQ的登录界面,如果不了解React Native,请看React Native中文网站:http://reactnative.cn/ 下面是一张手机QQ的 ...

仿qq邮箱登录界面（html+css）

仿qq邮箱登录界面（html+css）相关推荐

最新文章

热门文章