實(shí)現(xiàn)一個(gè)簡(jiǎn)單的html界面
注：用到了大量的margin和padding來(lái)調(diào)整位置鹰椒，當(dāng)然怎么安排最好就仁者見(jiàn)仁智者見(jiàn)智了
<!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="請(qǐng)輸入用戶名" 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="請(qǐng)輸入密碼" 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">忘記用戶名 忘記密碼 免費(fèi)注冊(cè)</div>
</div>
</body>
</html>
效果圖
image.png
