用CSS实现网页登录页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用户登录窗口</title>
<style type="text/css">
body
{
font-size: 14px;
font-family: "宋体_GB2312";
background-image: url(1.JPG); /* 加一个背景图片,效果好 */
}
.two_col_form h3 { margin:5px 5px 25px 5px;
text-align: center;
}
.two_col_form form { border:1px solid #AAA;
width:350px;
position: absolute; /* 设置表单位置,用绝对定位*/
left: 279px;
top: 203px;
}
.two_col_form div.formsection {
margin-top:0.8em;
margin-left: 1.0em;
padding-bottom:.4em;
border-bottom:1px solid #AAA;
}
.two_col_form div.formsection input {
padding-bottom:0.2em;
margin-left: 0.5em;
}
.two_col_form div.formsection label {
padding-bottom:.2em;
}
</style>
</head>
<body><div class="two_col_form">
<form action="process_form.php" method="post">
<div>
<h3>中小学教学信息管理系统 登录窗口</h3>
</div>
<div class="formsection">
<label for="user_name">用户名:</label>
<input type="text" id="user_name" name="user_name" size="18" maxlength="36" tabindex="1" />
</div>
<div class="formsection"> <label for="password">密 码:</label>
<input type="password" id="password" name="password" size="18" maxlength="36" tabindex="2" />
</div>
<div class="formsection">
<input type="submit" value="用户登录" />
</div>
</form>
</div>
</body>
</html>
注解:
1、做到了CSS与html有效分离。2、用于定位的CSS有:position、margin、padding,这里用的是绝对定位。没有用传统的表格定位技术。
3、使用了dreamweaver cs5工具,它比记事本要好用得多。