7 登錄和注冊(cè)的簡(jiǎn)單布局
<html>
<head>
<title>登錄框的盒子模型定位</title>
<style>
#login { /* 定義一個(gè)ID選擇器 */
width:300px; /* 定義盒子寬度為300px */
height:200px; /* 定義盒子高度為200px */
position:absolute; /* 使用絕對(duì)位置進(jìn)行定位 */
left:50%; /* 左部盒子開(kāi)始位置是頁(yè)面寬度的50% */
top:50%; /* 頂部盒子開(kāi)始位置是頁(yè)面高度的50% */
margin-left:-150px; /* 左部開(kāi)始位置再退回盒子寬度的一半 */
margin-top:-100px; /* 頂部開(kāi)始位置再退回盒子高度的一半 */
background:#BABABA; /* 定義盒子的背景顏色為灰色 */
}
</style>
</head>
<body>
<div id="login"> 登錄框的盒子模型</div>
</body>
</html>
reg.html
<html>
<head>
<title>注冊(cè)頁(yè)面</title>
<style>
#reg {
background:green;
width:100%;
margin:100px 150px;
mix-width:400px;
}
#nav {
width:400px;
}
</style>
</head>
<body>
<div id="reg">
<div id="nav"> </div>
dddd
</div>
</body>
</html>
login.html
<html>
<head>
<title>登錄頁(yè)面</title>
<style>
#login {
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
width:300px;
height:200px;
background:green;
}
</style>
</head>
<body>
<div id="login">
</div>
</body>
</html>
