html+css 制作简单QQ登录页面

HTML+css制作简单QQ登录页面

这是效果图

这是HTML源码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>QQ登录</title><!-- 引入网页图标 --><link rel="shortcut icon" href="./img/20201127092629_f7kg4fnVIB.ico" type="image/x-icon"><!-- 引入本项目样式 --><link rel="stylesheet" href="./css/qq-login.css"></head><body><div class="wrap"><div class="QQ-login"><div class="tabs"><h3>密码登录</h3><p>推荐使用<a href="#">快捷登录</a>，防止盗号</p></div><form action=""><div class="item"><input type="text" placeholder="支持QQ号/邮箱/手机号登录" autofocus></div><div class="item"><input type="password" placeholder="请输入密码"></div><div class="item"><input type="submit" value="登录"></div></form><div class="other"><a href="#"><span>找回密码</span></a><i>|</i><a href="#"><span>注册账号</span></a><i>|</i><a href="#"><span>反馈意见</span></a></div></div></div></body>
</html>

这里是css

*{padding: 0;margin: 0;text-decoration: none;
}
.wrap{width: 100%;height: 1238px;background-image: url(../img/pc_bg.jpg);padding: 50px 0 0 0;
}
.QQ-login{width: 400px;margin: 0 auto;border: 1px solid darkgray;padding: 0 0 20px;background-color: white;
}
.QQ-login .tabs{height: 100px;text-align: center;
}
.QQ-login .tabs p{font-size: 12px;
}
.QQ-login .tabs a{color: blue;
}
.QQ-login form {padding: 0 50px;
}
.QQ-login form .item{}
.QQ-login form .item input[type="text"]{height: 40px;width: 100%;line-height: 40px;font-size: 14px;padding-left: 10px;border: 1px solid darkgray;box-sizing: border-box;outline: none;border-bottom: none;border-radius: 5px 5px 0 0;}
.QQ-login form .item input[type="password"]{height: 40px;width: 100%;line-height: 40px;font-size: 14px;padding-left: 10px;box-sizing: border-box;border: 1px solid darkgray;outline: none;border-radius: 0 0 5px 5px ;margin-bottom: 30px;
}
.QQ-login form .item input[type="submit"]{height: 40px;width: 100%;border-radius: 5px;color: white;border: none;outline: none;background-color: dodgerblue;
}.QQ-login .other{margin-top: 20px;text-align: center;
}
.QQ-login .other a{color: black;font-size: 12px;
}
.QQ-login .other span{text-align: center;
}
i{font-style: normal;color: #666666;margin: 0 26px;
}

这里放了背景图

欢迎一起动手创作交流讨论

html+css 制作简单QQ登录页面相关推荐

HTML+CSS制作知乎登录页面
HTML+CSS制作知乎登录页面由于没有用上js相关的技术,所以无法做出相应的功能,,只能做出知乎登录页面的用密码登录的界面,不能切换到免密码登录.相关界面的图片如下: 网页上的原图: 我做的: ...
Android开发实现简单QQ登录页面
Android开发实现极为简单的QQ登录页面设计一个简单QQ登录页面,无任何功能.然后打包安装到手机. 1.首先创建一个空白页面 2.打开样式设计的页面在activity_main.xml中写入代 ...
用PHP制作简单的登录页面
题目要求: 登录页面:设计一个登录页面,获取登录表单中的用户名和密码,如果用户名为"admin",密码为"123456",则提示登录成功.效果参考下图: 代码: ...
写一个简单的登录页面!!!(html)
写一个简单的登录页面!!! 大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面那,该如何做呢? 首先现在html里的body里写一个头部header标签(双标签 ...
Android 简易QQ登录页面
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...
实现一个简单的登录页面
实现一个简单的登录页面设计了一个登录页面,感觉还挺不错的实现效果设计的还是挺好看的吧分析需要的功能一个登录页面一个注册页面翻转效果输入后的正则判断,给用户提示信息翻转要清空页面的全部信 ...
PHP连接数据库实现简单的登录页面
最后实现结果如下图所示: 如果输入的用户名或密码为空,则会弹出对话框提示同样的,如果输入的密码不正确也会弹出对话框提示: 登录成功页面: 具体实现代码如下: HTML代码: <!DOCTYPE ...
java qq登录成功界面_java实现简单QQ登录界面
本文实例为大家分享了java实现简单QQ登录界面的具体代码,供大家参考,具体内容如下 java在图形界面,不是太强项,但不是不可以做,它的开源是very nice! 实现代码如下(想实现完美的界面,可 ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...

html+css 制作简单QQ登录页面

html+css 制作简单QQ登录页面相关推荐

最新文章

热门文章