|
用CSS实现网页登录页面 <html xmlns="/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> <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工具，它比记事本要好用得多。 |
|
|
来自： 昵称10134216 > 《Html CSS》
