hw2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/hw2.css"/>
</head>
<body>
<div id="home">
<form class="f1" action="http://jd.com" method="post">
<p class="txt">密码登录</p>
<img src="img/person.png" id="img1" class="imgs" />
<input type="text" name="" id="username" class="inp" />
<img src="img/lock.png" id="img2" class="imgs" />
<input type="password" name="" class="inp" id="userpwd" value="" />
<input type="submit" class="sub" value="登录"/>
</form>
</div>
</body>
</html>
hw2.css
* {
padding: 0;
margin: 0;
}
html,body {
width: 100%;
height: 100%;
}
#home{
/*border: 2px solid blue;*/
width: 100%;
height: 100%;
background: url(../img/home.png) repeat no-repeat top left;
background-size: 100% 100%;
}
.f1{
position: absolute;
top: 22%;
right: 18%;
/*border: 1px solid #FF0000;*/
width: 20%;
height: 40%;
background-color: rgba(247,231,243,0.5);
}
.txt{
position: absolute;
top: 10%;
left: 8%;
font-weight: bold;
}
.imgs{
border-radius: 5px;
width: 45px;
}
#img1{
position: absolute;
top: 25%;
left: 8%;
}
#img2{
position: absolute;
top: 45%;
left: 8%;
}
.inp{
height: 45px;
border: none;
border-radius: 5px;
font-size: large;
font-weight: bold;
background-color: rgba(251,255,190,1);
}
#username{
position: absolute;
width: 70%;
top: 25%;
left: 20%;
}
#userpwd{
position: absolute;
width: 70%;
top: 45%;
left: 20%;
}
.sub{
position: absolute;
left: 10%;
width: 80%;
height: 10%;
background-color: rgba(255,69,0,1);
border-radius: 5px;
border: none;
top: 65%;
}
效果图.png
网友评论