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




发布了113 篇原创文章 · 获赞 72 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览