实现一个简单的html界面
注：用到了大量的margin和padding来调整位置，当然怎么安排最好就仁者见仁智者见智了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background: url(img/bkg.jpg) no-repeat 0 120px;
background-size: 100% auto;
background-color: orange;
}
#rect {
width: 400px;
margin-top: 10%;
margin-right: 5%;
padding-left: 40px;
float: right;
background-color: white;
border-radius: 8px;
}
#login {
font-family: "黑体";
font-size: 20px;
margin-left: 20px;
}
#b_foot {
margin-left: 20px;
margin-bottom: 20px;
margin-top: 20px;
color: darkgray;
}
#foot {
margin-bottom: 20px;
margin-right: 35px;
text-align: right;
color: darkgray;
}
.input1 {
height: 40px;
width: 300px;
margin: 20px;
background-position: 0px 0px;
font-size: 20px;
border-radius: 5px;
border: 0;
background-color: lightgoldenrodyellow;
}
.sum {
width: 345px;
height: 40px;
margin: 20px;
background-color: orangered;
}
</style>
</head>
<body>
<div id="rect">
<p id="login"><strong>密码登录</strong></p>
<form action="" method="get">
<div>
<input class="input1" type="text" name="username" id="username" placeholder="请输入用户名" style="background: url(img/user.jpg) no-repeat 0 0;padding-left: 45px;"/>
</div>
<div>
<input class="input1" type="password" name="pwd" id="pwd" placeholder="请输入密码" style="background: url(img/pwd.jpg) no-repeat 0 0;padding-left: 45px;"/>
</div>
<button class="sum" style="border: 1px; text-align: center; color: white; font-size: large;">登 录</button>
</form>
<div id="b_foot">
<img src="img/zfb.jpg" />支付宝登录 <img src="img/wx.jpg" />微信登录
</div>
<div id="foot">忘记用户名 忘记密码 免费注册</div>
</div>
</body>
</html>
效果图
image.png
网友评论