作业：百度登陆框

来源：互联网发布：华讯网络校园招聘一面编辑：程序博客网时间：2024/06/01 09:37

<!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>
<link href="baidu.register.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="baidudenglu"> 
<div id="baidudenglu1"> 
<img src="baidu.register.png" id="img1"/><span id="sp1">登录百度账号</span>
<span id="sp2">x</span>
</div>
<div id="baidumain"> 
<form>
<p style="text-align:right">短信快捷登录</p>
<input type="text" name="username" placeholder="手机/邮箱/用户名" class="text1"/>
<p></p>
<input type="text" name="password" placeholder="密码" class="text1"/>
<p></p>
<input type="checkbox" name="qitafangshi"/>下次自动登录         <span class="wangji">忘记密码？</span>
<p></p>
<input type="button" value="登录" id="button">
<p></p>
                 <span class="wangji">立即注册</span>
</div>
<div id="baidubutton">
<span id="bbutton1">可以使用以下方式登录</span>
<br/><br/>
 <img src="QQ.png" /> <img src="weibo.png" /> <img src="duanxin.png" />
</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

#baidudenglu{
width:400px;
height:420px;
background-color:#FFF;
border:solid #CCC;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-200px;
}
#baidudenglu1{
width:100%;
height:50px;
background-color:#F4F4F4;
}
div #img1{
padding-left:10px;
padding-top:5px;
}
div #sp1{
font-size:20px;
font-family:微软雅黑;
position:absolute;
padding-left:15px;
line-height:50px;
}
div #sp2{
font-size:30px;
position:absolute;
line-height:50px;
padding-left:320px;
font-family:Dotum;
}
#baidumain{
width:100%;
height:270px;
}
form{
width:345px;
height:270px;
margin:auto;
}
.text1{
font-size:30px;
vertical-align:middle;
}
.wangji{
color:#0099FF;
}
#button{
width:100%;
height:45px;
color:#FFFFFF;
background-color:#0066FF;
}
#baidubutton{
width:100%;
height:90px;
border-top:solid #CCC 1px;
}
#bbutton1{
position:relative;
top:10px;
left:10px;
}

0 0