仿qq邮箱登录界面(html+css)
来源:互联网 发布:哈药扫码的软件 编辑:程序博客网 时间:2024/04/29 07:57
具体代码如下:
<!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)
- 仿qq登录界面
- 高仿QQ(登录界面)
- android仿QQ登录界面
- 盒子模型作业(仿QQ登录界面)
- wxPython实现仿QQ登录界面
- 仿QQ登录界面的QComboBox
- react-native仿qq登录界面布局
- html+css实现登录界面
- QQ邮箱界面解析
- 仿qq登录界面(包括下拉删除以及半透明忘记密码)
- 仿QQ登录界面(PC端)=课堂实操
- 图形视图框架实战之仿QQ登录界面(可旋转)
- Java Swing仿QQ登录界面 学习之用
- Android UI布局 —— 仿QQ登录界面(转载)
- WPF开发实例——仿QQ登录界面
- Android学习笔记之 仿QQ登录界面的实现
- Android初学者仿QQ聊天软件APP (一) 登录界面
- 上传war包到服务器(tomcat的webapps目录下)
- C++中的map常见用法
- LeNet网络模型
- ARC 和 MRC 下的 delloc
- POJ1222 EXTENDED LIGHTS OUT(熄灯问题)
- 仿qq邮箱登录界面(html+css)
- 7-2 平面向量加法
- 面试基础之序列化和反序列化的总结
- hibernate重复数据问题
- LabVIEW调用动态链接
- EL表达式
- php会话控制
- Ubuntu安装网易云音乐
- mysql