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

最新推荐文章于 2024-03-11 11:43:30 发布

晴天小风

最新推荐文章于 2024-03-11 11:43:30 发布

阅读量9.3k

点赞数 5

分类专栏： JavaWeb笔记 Web前端笔记 Web前端案例文章标签： web前端界面 css HTML 登录界面

本文链接：https://blog.csdn.net/Ag_nevergiveup/article/details/73718044

版权

JavaWeb笔记同时被 3 个专栏收录

41 篇文章 1 订阅

订阅专栏

Web前端笔记

31 篇文章 0 订阅

订阅专栏

Web前端案例

6 篇文章 1 订阅

订阅专栏

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.结果：