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

朱雀 2022-06-13 02:59 268阅读 0赞

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

![Center][]

[Center]: /images/20220613/a43fa6e6997a4d5fa1fa206bbd12005c.png