<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
<style type="text/css">
/*元素默認的瀏覽器樣式有8px的距離*/
body{margin: 0;}
#wrap{
position: relative;/*相對定位*/
width: 100%;
/*height:100%*/
/*min-width: 1190px;/*最小像素*/
height: 660px;
/*background-image: url(img/319380.jpg);*/
background: url("img/319380.jpg") center;
}
.login_box{
position: absolute;/*絕對定位*/
right: 130px;
top: 100px;
width: 340px;
height: 280px;
/*background:#fff;*/
background-color: lightblue;
border-radius: 10px;
}
.login_top{
/*width: 340px;*/
/*height: 190px;220-30*/
/*border-bottom: 1px dotted #333;*/
text-align: center;
padding-top: 35px;
border-radius: 6px;
}
input[type="text"]{
background:url("img/yhm1.jpg");
}
input[type="password"]{
background:url("img/mima1.jpg");
}
.text{
width: 260px;
height: 40px;
margin-bottom: 20px;
border-radius: 6px;
background-repeat: no-repeat !important;
text-indent: 45px;
font-size: 20px;
}
.checkbox{
margin-left:-40px;
margin-bottom: 20px;
}
.denglu{
width: 110px;
height: 40px;
border-radius: 6px;
background-color: aquamarine;
font-size: 18px;
color: black;
}
.zhuce{
margin-left: 40px;
width: 110px;
height: 40px;
border-radius: 6px;
background-color: aquamarine;
font-size: 18px;
color: black;
}
</style>
</head>
<body>
<div id="wrap">
<div class="login_box">
<div class="login_top">
<form action="#" method="post" >
<input class="text" type="text" value="" name="users" placeholder="請輸入用戶名" />
<input class="text" type="password" value="" name="pass" placeholder="請輸入用密碼"/><br />
<input class="checkbox" type="checkbox" name="" id="" value="" />記住密碼
<input type="radio" name="huiyuan" id="" value="" />會員
<input type="radio" name="huiyuan" id="" value="" />管理員<br />
<input class="denglu" type="submit" value="登錄"/>
<a href="regist"><input class="zhuce" type="submit" value="註冊"/></a>
</form>
<!--<hr size="2" color="#008000" width="340px"/>-->
</div>
</div>
</div>
</body>
備註：input框裏面的圖片可以自行添加 背景圖片亦是
</html>