Web前端案例_QQ登录界面实现

Web前端案例_QQ登录界面实现

这篇写一个关于web前端的实现案例。

1.目的：利用div+css实现网页版QQ登录前端界面

2.分析：简单的一个前端界面，各种标签的混用以及css的设计

3.代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#d1{/*设置登录区域的大小、边框线、边框颜色*/width:300px;height:350px;border:3px solid #FC3;/*调整位置*/position:fixed;top:100px;left:500px;/*背景*/background-image:url(1.jpg);background-position:top center;background-repeat:no-repeat;
}
#f1{position:relative;top:120px;left:60px;
}
#d2{margin:15px;height:50px;
}
#d3{margin:15px;
}
#in1{background-image:url(head.png);background-repeat:no-repeat;background-position:top left;height:28px;text-indent:30px;
}
#in2{background-image:url(key.jpg);background-repeat:no-repeat;background-position:top left;height:20px;text-indent:30px;
}
#in3{position:relative;left:30px;
}
#in4{position:relative;left:60px;
}
</style>
</head><body>
<div id="d1"><form action="" method="post" id="f1"><div id="d2">用户名：<input type="text" name="username" id="in1"/><br /></div><div id="d3">密   码：<input type="password" name="password" id="in2"/><br /></div><div id="d4"><input type="submit" value="登录" name="login" id="in3" /><input type="submit" value="注册" name="rigist" id="in4" /></div>      </form>
</div>
</body>
</html>

4.结果：

Web前端案例_QQ登录界面实现相关推荐

web综合案例：登录界面,注册界面,忘记密码等功能实现
写在前面本博文是写了一个登录注册以及在忘记密码的时候可以进行邮箱验证修改密码的功能模板: 需要用到的知识有 1.java邮箱 2.boostrap 3.数据库连接一.数据库图片二.登录界面三. ...
Web前端案例1-古诗
文章目录 1.案例源码 2.案例效果图 3.知识点总结篇章 1.案例源码 index.html <!DOCTYPE html> <html lang="en"& ...
Web网页练习15: 登录界面
Web网页练习15: 登录界面欢迎扫码关注微信公众号 "野心与家" 效果图只保留精简效果,具体细节未展示源代码 <!DOCTYPE html> <html& ...
idea中创建maven依赖下的web工程(一)----用户登录界面
如果你对idea中创建maven依赖下的web工程不是很了解,请参见上一篇博客--idea中创建maven依赖下的第一个web工程各路大神对于idea的基本操作已经非常的熟悉了, 嗯,我还是一只入门 ...
苹果手机html查看器在哪,web前端案例-苹果手机图片查看器
web前端群,189394454,有视频.源码.学习方法等大量干货分享 image.png
java实现简单QQ登录界面验证_QQ登录界面实现
正版现货ui设计必修课sketch ue光盘 191.8元包邮 (需用券) 去购买 > Java实现QQ登录界面 QQ登录界面也是界面的一种,在实现界面时我们需要一些界面开发包,如: pack ...
java web+前端实现人脸登录功能（专注细节）
本次的博客是自己软件工程课设的作业,写博客是为了记录自己的学习过程,然后总结,同时可以给需要的人作参考. 1.在做这个项目的时候,也是个大三学生,所以懂得并不多,因此在网上看见了一些相关的资源,但是都 ...
web项目通用简易登录界面
效果展示代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
Web前端案例——学成网首页制作
简易的学成网网站制作.代码均有注释,可以说十分新手向了. 相关知识:html+css,主要学习的是css的浮动布局.下一篇文章会在这个网页的基础上添加定位盒子. 运行效果图: html部分: < ...
WEB前端实战——制作登录页面
参考视频:https://ke.qq.com/course/320021 代码 <!DOCTYPE html> <html lang="en"> <h ...

Web前端案例_QQ登录界面实现

Web前端案例_QQ登录界面实现相关推荐

最新文章

热门文章