html-QQ登陆界面

初学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>

QQ登陆界面

存在很多的问题：代码不够简洁，可能有些重复的代码和无用的代码，命名不规范等。继续加油

所学html资源链接：https://www.bilibili.com/video/av45705742?p=1

html-QQ登陆界面相关推荐

Qt 之模仿 QQ登陆界面——功能篇（一）
一.简述今天是2017年第一篇技术文章,12月末事情太多,一直没来得及更新博客.今天继 Qt 之模仿 QQ登陆界面--样式篇这一篇来简单地看一下对登录界面做的一些功能,主要是登录用户下拉列表和 ...
Java实现QQ登陆界面的搭建
仿QQ登陆界面界面显示界面布局响应事件仿QQ登陆界面实现 1.界面显示界面显示的两种方法创建JFrame对象 import java.awt.Color; import javax.swi ...
使用HTML表单和表格完成静态QQ登陆界面
使用HTML表单和表格完成静态QQ登陆界面一.创建过程创建表单创建表格创建行创建单元格创建表单组建二.原理使用表单来显示收集用户信息并用表格来帮助排版三.主要代码 1. <ta ...
Android studio新手：实现最新版QQ登陆界面
最新版QQ登陆界面如下: 代码实现效果如下: activity_main.xml代码如下: <?xml version="1.0" encoding="utf-8& ...
Qt（三）--- 实现QQ登陆界面头像状态栏的功能
对于QQ登陆界面,可以通过下拉菜单,实现状态的选择,在QQ的头像状态栏需要显示的信息包括:用户的头像以及登陆的状态.这里主要涉及和利用的只是是QMenu以及QAction,同时继承QLabel的类: ...
linux qq java_Java实现QQ登陆界面
Java实现QQ登陆界面,以下是效果截图: 素材: 以下是源代码: import java.awt.*; import java.awt.event.MouseEvent; import java.a ...
QComboBox自定义（一）--类似QQ登陆界面的下拉框
刚学Qt的时候,初步经历的第一个学习项目基本上都是LANQQ,初识时,不懂QSS,不懂布局,绘制界面最简单的方式成了使用designer拉满整个界面的控件,或者使用代码写了一些很蹩脚的布局.也是很羡慕 ...
android qq登陆界面代码下载,【Android Demo】QQ登陆界面（一）
之前以及实现了QQV.0.8.4115的登陆界面,现在来总结一下,并且回顾一下用到过的东西. 先上图: [原图] QQLogin_0.jpg [图一] QQLogin_1.PNG [图二] QQLog ...
java山寨qq_java图形界面之山寨QQ登陆界面
要山寨出QQ登陆界面,首先要对java的图形界面有一定的了解.在jdk1.4之前,图形界面所用到的所有类和接口都在javax.awt之下,在其之后就都在javax.swing里了. 关于图形界面的开发 ...
android模仿qq登录界面,初识Android二之小试牛刀模仿实现qq登陆界面
初识Android二之小试牛刀模仿实现qq登陆界面.俗话说得好,老师踢开门,修行在自己.勉勉强强学完生命周期,然后悠悠闲闲听了两节课后,老师就布置了一个登陆界面的实现,于是,磕磕绊绊的修行之路开始了. ...

html-QQ登陆界面

html-QQ登陆界面相关推荐

最新文章

热门文章