html-QQ登陆界面

article/2025/9/17 2:29:50

初学30节课html的入门课程，花了几个小时模仿了一个qq的登陆界面。
效果图如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>QQ登陆界面</title><style type="text/css">body{background-color: #F2F2F2;background-image: url(img/背景.png);}#登陆界面{height: 400px;width: 600px;margin: auto;margin-top: 200px;background-color:#FFFFFF;}.背景图{margin: auto;height: 200px;width: 600px;background-image: url(img/14627.jpg);background-size: 150% 280%;}.close{font-size: 20px;color:#FFFFFF;text-align: right;text-shadow:1px 1px lightslategray;padding-right:10px;padding-top:2px ;}.QQ{font-size: 100px;margin: 0;text-align: center;color: #F2F2F2;font-family: "new york";font-weight:100;}#框{background-color:#ffffff;height: 200px;width: 600px;}.图标{height:200px ;width: 600px;}#图标 img{height: 150px;width: 150px;padding: 25px;padding-left: 60px;float: left;}.表格{padding-top:40px ;padding-left: 0px;margin: auto;}.登陆按钮边框{margin-left: 35px;padding-top:15px ;}.登陆按钮{width: 160px;height: 35px;background-color:#09A3DC;border-radius:4px;border: none;color: #ffffff;text-shadow: 1px 1px #000000;transform: 0.3s;font-size: 16px;	}</style></head><body><div id="登陆界面"><div class="背景图"><a href="../我的手机.html" style="text-decoration: none;"><p class="close" >X</p><p class="QQ">Q Q</p></a></div><div id="框"><div id="图标"><img src="../图标img/QQ.jpg" ><form action="主界面.html" method="get"><table class="表格" border="0px" cellspacing="0"><tr ><td style="text-shadow: 1px 1px lightgray;">账号</td><td><input type="text" name="longinNum"/><a href="https://ssl.zc.qq.com/v3/index-chs.html"style="text-decoration: none;color:#5FA5EA;text-shadow:1px 1px lightblue;">注册账号</a></td></tr><tr><td style="text-shadow: 1px 1px lightgray;">密码</td><td><input type="password" name="pwd"/><a href="https://aq.qq.com/cn2/findpsw/pc/pc_find_pwd_input_account?pw_type=6"style="text-decoration: none;color:#5FA5EA;text-shadow:1px 1px lightblue;">找回密码</a></td></tr><tr><td colspan="2" style="padding-top: 5px;padding-left: 0px;"><div style="float: left;padding-top: 10px;"><input  type="checkbox"/>记住密码</div><div style="padding-left:180px;padding-top: 10px;"><input type="checkbox"/>自动登陆</div></td></tr><tr><td colspan="2"><div class="登陆按钮边框"><input class="登陆按钮"  type="submit"value="登	录" "/></div></td></tr></table>				</form></div></div></div></body>
</html>