您的当前位置:首页正文

使用DIV+CSS定义的后台管理页面

2024-11-10 来源:个人技术集锦

<" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#formstyle {
 width: 450px;
 margin-left: auto;
 margin-right: auto;
 border: 1px solid #0000FF;
 padding: 20px;
}
fieldset {
 border: 1px solid #0000FF;
}
fieldset legend {
 border: 1px solid #0000FF;
 font-weight: bold;
 padding-right: 15px;
 padding-left: 15px;
 padding-top: 3px;
 padding-bottom: 2px;
 margin-left: 20px;
 font-size: 12px;
}
fieldset div {
 height: 25px;
 font-size: 12px;
 padding-top: 5px;
}
fieldset label {
 float: right;
 margin-right: 180px;
}
.button {
 background-color: #33CCFF;
 border: 1px solid #3333FF;
 padding-right: 7px;
 padding-left: 7px;
 padding-top: 1px;
}
.text {
 height: 13px;
 background-color: #33CCFF;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
}

-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<div id="formstyle">
<h5>后台管理登录</h5>
<fieldset>
<legend>用户登陆</legend>

<div>
 <label>用户名:
  <input name="textfield" type="text" class="text" size="16" />
 </label>
</div>

<div>
 <label>密码:
  <input name="textfield2" type="text" class="text" size="16" />
 </label>
</div>

<div>
 <label>
  <input name="Submit" type="submit" class="button" value="提交" />
  <input name="Submit2" type="reset" class="button" value="重置" />
 </label>
</div>

</fieldset>
</div>

</form>
</body>
</html>

CSS样式表里面同时使用了 类.标签和ID 三大分类,是学习CSS+DIV很好的例子...
 

显示全文