一个古老的html后台的模板代码
Posted qikexun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个古老的html后台的模板代码相关的知识，希望对你有一定的参考价值。
效果图下：
css部分代码：`/* CSS Document /
bodyfont-family:“宋体”, Arial,Verdana, sans-serif, Helvetica;font-size:12px;margin:0;background:#f4f5eb;color:#000;
dl,ul,lilist-style:none;
a imgborder:0;
acolor:#000;
a:link,a:visited,a:active,a:hovertext-decoration:none;
.clearboth clear:both;font-size:0px;
input vertical-align:middle;
body,htmlheight:100%;
.noneBox display:none;
/----头---------------------------/
.headerwidth:100%;height:53px;background:url(…/images/header_bei.gif);
.header01float:left;height:53px;width:45px;margin-left:15px;background:url(…/images/header01.gif) no-repeat;
.header02float:left;height:28px;width:auto;margin-left:10px;padding-top:25px;font-size:20px;font-family:“黑体”;
.header03float:right;height:53px;width:67px;margin-right:15px;background:url(…/images/logo.gif);
/----left---------------------------/
.leftfloat:left;width:214px;height:auto;margin:8px 0 8px 8px!important;margin:8px 0 4px 4px;
.left01width:214px;height:33px;background:url(…/images/left01_bei.gif) repeat-x;margin-bottom:8px;
.left01_leftfloat:left;height:33px;width:3px;background:url(…/images/left01_left.gif);
.left01_rightfloat:right;height:33px;width:3px;background:url(…/images/left01_right.gif);
.left01_cfloat:left;height:33px;line-height:33px;width:198px;padding-left:10px;color:#002f76;
.left01_c imgheight:17px;width:17px;margin:3px 10px 0 0;
.left02width:214px;height:auto;margin-bottom:8px;
.left02topwidth:214px;height:36px;background:url(…/images/left02_bei.gif) repeat-x;
.left02top_leftfloat:left;height:36px;width:3px;background:url(…/images/left02_left.gif);
.left02top_rightfloat:right;height:36px;width:3px;background:url(…/images/left02_right.gif);
.left02top_cfloat:left;height:36px;line-height:33px;width:198px;padding-left:10px;font-weight:bold;
.left02downwidth:212px;height:auto;border:1px solid #b4b4b4;border-top:0;background:#fff;
.left02down01width:202px;height:27px;line-height:27px;padding-left:10px;
.left02down01_imgfloat:left;width:7px;height:27px;margin-right:5px;background:url(…/images/01.gif) no-repeat;
.left02down01_xia ulmargin:0;padding:0 5px 0 19px;
.left02down01_xia liwidth:auto;height:20px;line-height:20px;margin:3px 0;padding-left:2px;
.left02down01_xia_libackground:#eff6ff;
.left03_rightfloat:right;height:33px;width:30px;background:url(…/images/03.gif);
.left03_cfloat:left;height:33px;line-height:33px;width:171px;padding-left:10px;color:#002f76;
/----rrcc-------------/
.rrccwidth:auto;height:90%;margin:8px 8px 8px 222px;
/----center---------------------------*/
.centerfloat:left;height:200px;width:8px;margin-left:8px!important;margin-left:4px; background:url(…/images/center0.gif) no-repeat;cursor:pointer;
/----right---------------------------/
.rightwidth:auto;height:90%;margin-left:20px!important;margin-left:10px;border:1px solid #b4b4b4;background:#fff;
.right spancolor:#666;
.right01padding-left:10px;margin:9px 0; `
这个大概是10年前的样式风格，
下面是页面设计代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var $=function(id)
return document.getElementById(id);
function show_menu(num)
for(i=0;i<100;i++)
if($('li0'+i))
$('li0'+i).style.display='none';
$('f0'+i).className='';
$('li0'+num).style.display='block';//触发以后信息块
$('f0'+num).className='left02down01_xia_li';//触发以后TAG样式
function show_menuB(numB)
for(j=0;j<100;j++)
if(j!=numB)
if($('Bli0'+j))
$('Bli0'+j).style.display='none';
$('Bf0'+j).style.background='url(images/01.gif)';
if($('Bli0'+numB))
if($('Bli0'+numB).style.display=='block')
$('Bli0'+numB).style.display='none';
$('Bf0'+numB).style.background='url(images/01.gif)';
else
$('Bli0'+numB).style.display='block';
$('Bf0'+numB).style.background='url(images/02.gif)';
var temp=0;
function show_menuC()
if (temp==0)
document.getElementById('LeftBox').style.display='none';
document.getElementById('RightBox').style.marginLeft='0';
document.getElementById('Mobile').style.background='url(images/center.gif)';
temp=1;
else
document.getElementById('RightBox').style.marginLeft='222px';
document.getElementById('LeftBox').style.display='block';
document.getElementById('Mobile').style.background='url(images/center0.gif)';
temp=0;
</script>
</head>
<body>
<div class="header">
<div class="header03"></div>
<div class="header01"></div>
<div class="header02">注册用户信息管理系统</div>
</div>
<div class="left" id="LeftBox">
<div class="left01">
<div class="left01_right"></div>
<div class="left01_left"></div>
<div class="left01_c">超级管理员：codeit.org.cn</div>
</div>
<div class="left02">
<div class="left02top">
<div class="left02top_right"></div>
<div class="left02top_left"></div>
<div class="left02top_c">用户信息管理</div>
</div>
<div class="left02down">
<div class="left02down01"><a onclick="show_menuB(80)" href="javascript:;"><div id="Bf080" class="left02down01_img"></div>用户信息查询</a></div>
<div class="left02down01_xia noneBox" id="Bli080">
<ul>
<li onmousemove="show_menu(10)" id="f010"><a href="http://baidu.com">·精确查询</a></li>
<li onmousemove="show_menu(11)" id="f011"><a href="#">·组合条件查询</a></li>
</ul>
</div>
<div class="left02down01"><a onclick="show_menuB(81)" href="javascript:;">
<div id="Bf081" class="left02down01_img"></div>
用户密码管理</a></div>
<div class="left02down01_xia noneBox" id="Bli081">
<ul>
<li onmousemove="show_menu(12)" id="f012"><a href="#">·找回密码</a></li>
<li onmousemove="show_menu(13)" id="f013"><a href="#">·更改密码</a></li>
</ul>
</div>
</div>
</div>
<div class="left02">
<div class="left02top">
<div class="left02top_right"></div>
<div class="left02top_left"></div>
<div class="left02top_c">用户分析</div>
</div>
<div class="left02down">
<div class="left02down01"><a onclick="show_menuB(82)" href="javascript:;"><div id="Bf082" class="left02down01_img"></div>用户注册统计</a></div>
<div class="left02down01"><a href="#"><div class="left02down01_img"></div>用户登录统计</a></div>
<div class="left02down01"><a href="#"><div class="left02down01_img"></div>用户激活统计</a></div>
</div>
</div>
<div class="left02">
<div class="left02top">
<div class="left02top_right"></div>
<div class="left02top_left"></div>
<div class="left02top_c">用户过滤</div>
</div>
<div class="left02down">
<div class="left02down01"><a href="#"><div class="left02down01_img"></div>过滤IP(段)</a></div>
<div class="left02down01"><a href="#"><div class="left02down01_img"></div>过滤用户名</a></div>
</div>
</div>
<div class="left02">
<div class="left02top">
<div class="left02top_right"></div>
<div class="left02top_left"></div>
<div class="left02top_c">系统管理</div>
</div>
<div class="left02down">
<div class="left02down01"><a href="#"><div class="left02down01_img"></div>权限管理</a></div>
<div class="left02down01"><a href="#"><div class="left02down01_img"></div>用户组管理</a></div>
<div class="left02down01"><a href="#"><div class="left02down01_img"></div>操作日志</a></div>
</div>
</div>
<div class="left01">
<div class="left03_right"></div>
<div class="left01_left"></div>
<div class="left03_c">安全退出</div>
</div>
</div>
<div class="rrcc" id="RightBox">
<div class="center" id="Mobile" onclick="show_menuC()"></div>
<div class="right" id="li010">
<div class="right01"><img src="images/04.gif" /> 用户信息查询 > <span>精确查询</span></div>
</div>
<div class="right noneBox" id="li011">
<div class="right01"><img src="images/04.gif" /> 用户信息查询 > <span>组合条件查询</span></div>
</div>
<div class="right noneBox" id="li012">
<div class="right01"><img src="images/04.gif" /> 用户密码管理 > <span>找回密码</span></div>
</div>
<div class="right noneBox" id="li013">
<div class="right01"><img src="images/04.gif" /> 用户密码管理 > <span>更改密码</span></div>
</div>
</div>
</body>
</html>
以上是关于一个古老的html后台的模板代码的主要内容，如果未能解决你的问题，请参考以下文章