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

最新推荐文章于 2021-12-29 00:26:00 发布

原创最新推荐文章于 2021-12-29 00:26:00 发布 · 9.9k 阅读

56 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #界面 #css #HTML #登录界面

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

41 篇文章

订阅专栏

Web前端笔记

31 篇文章

订阅专栏

Web前端案例

6 篇文章

订阅专栏

本文介绍了一个简单的Web前端案例，通过使用HTML和CSS实现了一个模仿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.结果：