admin管理员组文章数量:1558092
Web前端案例_QQ登录界面实现
这篇写一个关于web前端的实现案例。
1.目的：利用div+css实现网页版QQ登录前端界面
2.分析：简单的一个前端界面，各种标签的混用以及css的设计
3.代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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登录界面实现 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1727385568a1112325.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论