<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>佈局</title>
<style>
#diban{
width:1000px;
height:1000px;
background-image:url(./body.png); 插入背景圖片
background-repeat:repeat-x; 背景圖像在橫向上平鋪
margin:0 auto;
}
#yonghudenglu{
width:150px;
height:70px;
margin:0 auto;
line-height:70px;
}
#xingming{
width:230px;
height:50px;
margin:0 auto;
margin-bottom:20px;
}
#xingkuang{
width:230px;
height:50px;
border-color:red; 邊框顏色
border-top-style:dotted; 上邊框形狀
border-top-width:thick;
border-right-width:thick; 邊框粗細
border-bottom-width:thick;
border-left-width:thick;
font-size:30px; 字體大小
border-top-left-radius:10px;
border-top-right-radius:10px; 改變的圓角邊框
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#youxiang{
width:200px;
height:30px;
margin:0 auto;
background:red;
}
#email{
width:200px;
height:30px;
}
#mima{
width:200px;
height:30px;
margin:0 auto;
}
#password{
width:200px;
height:30px;
}
#tijiao{
width:80px;
height:40px;
margin:0 auto;
}
#submit{
width:80px;
height:40px;
}
</style>
</head>
<body> 每個表單外都套一個div好進行佈局
<div id=diban>
<div id=yonghudenglu>
<h1>用戶登錄</h1>
</div>
<div id=xingming>
<form action="./index.php" method="post" >
<input id=xingkuang type="name" name="name" value="" placeholder="請輸入姓名">
</form>
</div>
<br>
<div id=youxiang>
<form action="./index.php" method="post" >
<input id=email type="email" name="email" value="" placeholder="請輸入郵箱">
</form>
</div>
<br><br>
<div id=mima>
<form action="./index.php" method="post" >
<input id=password type="password" name="email" value="" placeholder="請輸入密碼">
</form>
</div>
<br><br>
<div id=tijiao>
<form action="./index.php" method="post" >
<input id=submit type="submit" name="submit" value="提交" >
</form>
</div>
</div>
</body>
</html>
