一个古老的html后台的模板代码

news2024/9/28 9:31:26

效果图下：
在这里插入图片描述
css部分代码：`/* CSS Document /
body{font-family:“宋体”, Arial,Verdana, sans-serif, Helvetica;font-size:12px;margin:0;background:#f4f5eb;color:#000;}
dl,ul,li{list-style:none;}
a img{border:0;}
a{color:#000;}
a:link,a:visited,a:active,a:hover{text-decoration:none;}
.clearboth {clear:both;font-size:0px;}
input {vertical-align:middle;}
body,html{height:100%;}
.noneBox {display:none;}
/----头---------------------------/
.header{width:100%;height:53px;background:url(…/images/header_bei.gif);}
.header01{float:left;height:53px;width:45px;margin-left:15px;background:url(…/images/header01.gif) no-repeat;}
.header02{float:left;height:28px;width:auto;margin-left:10px;padding-top:25px;font-size:20px;font-family:“黑体”;}
.header03{float:right;height:53px;width:67px;margin-right:15px;background:url(…/images/logo.gif);}
/----left---------------------------/
.left{float:left;width:214px;height:auto;margin:8px 0 8px 8px!important;margin:8px 0 4px 4px;}
.left01{width:214px;height:33px;background:url(…/images/left01_bei.gif) repeat-x;margin-bottom:8px;}
.left01_left{float:left;height:33px;width:3px;background:url(…/images/left01_left.gif);}
.left01_right{float:right;height:33px;width:3px;background:url(…/images/left01_right.gif);}
.left01_c{float:left;height:33px;line-height:33px;width:198px;padding-left:10px;color:#002f76;}
.left01_c img{height:17px;width:17px;margin:3px 10px 0 0;}
.left02{width:214px;height:auto;margin-bottom:8px;}
.left02top{width:214px;height:36px;background:url(…/images/left02_bei.gif) repeat-x;}
.left02top_left{float:left;height:36px;width:3px;background:url(…/images/left02_left.gif);}
.left02top_right{float:right;height:36px;width:3px;background:url(…/images/left02_right.gif);}
.left02top_c{float:left;height:36px;line-height:33px;width:198px;padding-left:10px;font-weight:bold;}
.left02down{width:212px;height:auto;border:1px solid #b4b4b4;border-top:0;background:#fff;}
.left02down01{width:202px;height:27px;line-height:27px;padding-left:10px;}
.left02down01_img{float:left;width:7px;height:27px;margin-right:5px;background:url(…/images/01.gif) no-repeat;}
.left02down01_xia ul{margin:0;padding:0 5px 0 19px;}
.left02down01_xia li{width:auto;height:20px;line-height:20px;margin:3px 0;padding-left:2px;}
.left02down01_xia_li{background:#eff6ff;}
.left03_right{float:right;height:33px;width:30px;background:url(…/images/03.gif);}
.left03_c{float:left;height:33px;line-height:33px;width:171px;padding-left:10px;color:#002f76;}
/----rrcc-------------/
.rrcc{width:auto;height:90%;margin:8px 8px 8px 222px;}
/----center---------------------------*/
.center{float:left;height:200px;width:8px;margin-left:8px!important;margin-left:4px; background:url(…/images/center0.gif) no-repeat;cursor:pointer;}

/----right---------------------------/
.right{width:auto;height:90%;margin-left:20px!important;margin-left:10px;border:1px solid #b4b4b4;background:#fff;}
.right span{color:#666;}
.right01{padding-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">&middot;精确查询</a></li>
					<li onmousemove="show_menu(11)" id="f011"><a href="#">&middot;组合条件查询</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="#">&middot;找回密码</a></li>
					<li onmousemove="show_menu(13)" id="f013"><a href="#">&middot;更改密码</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" /> 用户信息查询 &gt; <span>精确查询</span></div>
	</div>
	
	<div class="right noneBox" id="li011">
		<div class="right01"><img src="images/04.gif" /> 用户信息查询 &gt; <span>组合条件查询</span></div>
	</div>
	<div class="right noneBox" id="li012">
		<div class="right01"><img src="images/04.gif" /> 用户密码管理 &gt; <span>找回密码</span></div>
	</div>
	<div class="right noneBox" id="li013">
		<div class="right01"><img src="images/04.gif" /> 用户密码管理 &gt; <span>更改密码</span></div>
	</div>
</div>



	

</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/399183.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[css]通过网站实例学习以最简单的方式构造三元素布局

[css]通过网站实例学习以最简单的方式构造三元素布局

文章目录二元素布局纵向布局横向布局三元素布局b站直播布局实例左右-下 布局左-上下 布局上下-右 布局方案一方案二后言二元素布局 在学习三元素布局之前&#xff0c;让我们先简单了解一下只有两个元素的布局吧 两个元素的相对关系非常简单&#xff0c;不是上下就是左右 纵向布…
阅读更多...
Anaconda配置Python科学计算库SciPy的方法

Anaconda配置Python科学计算库SciPy的方法

本文介绍在Anaconda环境中&#xff0c;安装Python语言SciPy模块的方法。 SciPy是基于Python的科学计算库&#xff0c;用于解决科学、工程和技术计算中的各种问题。它建立在NumPy库的基础之上&#xff0c;提供了大量高效、易于使用的功能&#xff0c;包括统计分析、信号处理、优…
阅读更多...
用一个例子告诉你 怎样在spark中创建累加器

用一个例子告诉你 怎样在spark中创建累加器

目录 1.说明 1.1 什么是累加器 1.2 累加器的功能 2. 使用累加器 3. 累加器和reduce、fold算子的区别 1.说明 1.1 什么是累加器 累加器是Spark提供的一个共享变量(Shared Variables) 默认情况下&#xff0c;如果Executor节点上使用到了Driver端定义的变量(通过算子传…
阅读更多...
Redis常用命令及数据类型参数

Redis常用命令及数据类型参数

1. 针对于string SET key value / GET key SET k1 v1 GET k1 // v1String是二进制安全的&#xff0c;是可变长度的&#xff0c; 底层类似于ArrayList 是可扩容的&#xff0c;最大存储内存为 512MB。 2. 判断key中是否存在某个内容 EXISTS key SET k1 v1 EXISTS k1 // …
阅读更多...
Noah-MP陆面过程模型建模方法与站点、区域模拟

Noah-MP陆面过程模型建模方法与站点、区域模拟

陆表过程的主要研究内容以及陆面模型在生态水文研究中的地位和作用 熟悉模型的发展历程&#xff0c;常见模型及各自特点&#xff1b; Noah-MP模型的原理 Noah-MP模型所需的系统环境与编译环境的搭建方法您都了解吗&#xff1f;&#xff1f; linux系统操作环境您熟悉吗&…
阅读更多...
Linux驱动中的fasync(异步通知)和fsync

Linux驱动中的fasync(异步通知)和fsync

一、fsync用来同步设备的写入操作&#xff0c;考虑把一块设局写入到硬盘的操作&#xff0c;如果使用write函数&#xff0c;函数返回后只能保证数据被写入到驱动程序或者内核管理的数据缓存中&#xff0c;而无法保证数据被真正写入到硬盘的存储块里。但是fync可以做到这一点&…
阅读更多...
查找、排序、二叉树的算法，统统记录于此。

查找、排序、二叉树的算法，统统记录于此。

文章目录一、查找1. 无序表的顺序查找2. 折半查找3. 分块查找4. 二叉排序树BST5. 哈希表查找二、排序1. 不带哨兵的直接插入排序2. 带哨兵的直接插入排序3. 带哨兵、折半查找的直接插入排序4. 希尔排序5. 冒泡排序6. 快速排序7. 选择排序8. 堆排序9. 归并排序二叉树1. 递归先序…
阅读更多...
八，iperf3源代码分析：状态机及状态转换过程---＞运行正向TCP单向测试时的客户端代码

八，iperf3源代码分析：状态机及状态转换过程---＞运行正向TCP单向测试时的客户端代码

本文目录一、测试用命令二、iperf3客户端状态机中各个状态解析状态机迁移图运行正向TCP单向测试时的客户端的状态列表三、iperf3客户端状态机迁移分析A-初始化测试对象&#xff08;NA--->初始化状态&#xff09;:B-建立控制连接&#xff0c;等待服务端PARAM_EXCHANGE的指令&…
阅读更多...
西电机试数据结构核心算法与习题代码汇总（机考真题+核心算法）

西电机试数据结构核心算法与习题代码汇总（机考真题+核心算法）

文章目录前言一、链表问题1.1 反转链表1.1.1 题目1.1.2 代码1.2 多项式加减法1.2.1 题目1.2.2 代码二、队列和栈2.1 学生退学2.1.1 问题2.1.2 代码三、矩阵和串题目3.1 矩阵对角线求和3.1.1 问题3.1.2 代码四、排序问题4.1 多元素排序4.1.1 问题4.1.2 代码五、二叉树5.1 相同二…
阅读更多...
synchronize优化偏向锁

synchronize优化偏向锁

偏向锁 轻量级锁在没有竞争时&#xff08;只有自己一个线程&#xff09;&#xff0c;仍然会尝试CAS替换mark word&#xff1b; 会造成一定的性能的损耗&#xff1b; JDK6之中引入了偏向锁进行优化&#xff0c;第一次使用时线程ID注入到Mark word中&#xff0c;之后重入不再进…
阅读更多...
旅游预约APP开发具有什么优势和功能

旅游预约APP开发具有什么优势和功能

旅游活动目前正在作为广大用户休闲娱乐的一个首选内容&#xff0c;不仅是公司团建活动可以选择旅游&#xff0c;而且一些节假日也可以集结自己的亲朋好友来一次快乐有趣的旅游活动&#xff0c;随着当代人对于旅游的需求呈现上升的趋势&#xff0c;也让旅游预约APP开发开始流行并…
阅读更多...
大家都在用哪些研发流程管理软件？

大家都在用哪些研发流程管理软件？

全球知名的10款流程管理软件分享&#xff1a;1.IT/研发项目流程管理&#xff1a;PingCode&#xff1b;2.通用项目流程管理&#xff1a;Worktile&#xff1b;3.销售流程管理&#xff1a;Salesforce Workflow&#xff1b;4.合同流程管理&#xff1a;Agiloft&#xff1b;5.IBM Bus…
阅读更多...
20230308 APDL Lsdyna结构学习笔记

20230308 APDL Lsdyna结构学习笔记

可以用鼠标右键进行结构的旋转视图。 一、编辑材料 输入参数分别为： 密度； 弹性模量； 泊松比； 屈服应力； 切线模量 由于模型是分块建立的，这里需要把模型进行粘接 点击booleans(布尔工具) 点击Glue、areas，结构物是由面单元构成的
阅读更多...
ReactDOM.render函数内部做了啥

ReactDOM.render函数内部做了啥

ReactDOM.render函数是整个 React 应用程序首次渲染的入口函数&#xff0c;它的参数是什么&#xff0c;返回值是什么&#xff0c;函数内部做了什么&#xff1f; ReactDOM.render(<App />, document.getElementById("root")); 前序 首先看下首次渲染时候&…
阅读更多...
二叉树OJ题目详解

二叉树OJ题目详解

根据二叉树创建字符串 采用前序遍历的方式&#xff0c;将二叉树转换成一个由括号和数字组成的字符串。 再访问每一个节点时&#xff0c;需要分情况讨论。 如果这个节点的左子树不为空&#xff0c;那么字符串应加上括号和左子树的内容&#xff0c;然后判断右子树是否为空&#x…
阅读更多...
VBA小模板，跨表统计的2种写法

VBA小模板，跨表统计的2种写法

目标 1 统计一个excel 文件里&#xff0c;多个sheet里的内容2 有的统计需求是&#xff0c;每个表只单表统计&#xff0c;只是进行批量操作3 有的需求是&#xff0c;多个表得某些行列累加等造出来得文件 2 实现方法1 &#xff08;可能只适合VBAEXCEL&#xff0c;不太干净的写法…
阅读更多...
一文带你了解，前端模块化那些事儿

一文带你了解，前端模块化那些事儿

文章目录前端模块化省流&#xff1a;chatGPT 总结一、参考资料二、发展历史1.无模块化引出的问题:横向拓展2.IIFE3.Commonjs(cjs)4.AMD引出的问题&#xff1a;5.CMD6.UMD7.ESM往期精彩文章前端模块化 省流&#xff1a;chatGPT 总结 该文章主要讲述了前端模块化的发展历史和各个…
阅读更多...
css伪类和伪元素的区别

css伪类和伪元素的区别

文章目录什么是css伪类和伪元素css伪类和伪元素有什么用&#xff1f;css伪类的具体使用常见的伪类伪元素的具体使用常见的伪元素什么是css伪类和伪元素 伪类和为元素是两个完全不同且重要的概念&#xff0c;它们的作用是给元素添加一些特殊的效果或样式 伪类用于选择某个元素的…
阅读更多...
Kalman Filter in SLAM (6) ——Error-state Kalman Filter (EsKF, 误差状态卡尔曼滤波)

Kalman Filter in SLAM (6) ——Error-state Kalman Filter (EsKF, 误差状态卡尔曼滤波)

文章目录0.前言1. IMU的误差状态空间方程2. 误差状态观测方程3. 误差状态卡尔曼滤波4. 误差状态卡尔曼滤波方程细节问题0.前言 这里先说一句&#xff1a;什么误差状态卡尔曼&#xff1f;完全就是在扯淡&#xff01; 回想上面我们推导的IMU的误差状态空间方程&#xff0c;其实…
阅读更多...
乐山持点科技：抖客推广准入及准出管理规则

乐山持点科技：抖客推广准入及准出管理规则

抖音小店平台新增《抖客推广准入及准出管理规则》&#xff0c;本次抖音规则具体如下&#xff1a;第一章 概述1.1 目的及依据为维护精选联盟平台经营秩序&#xff0c;保障精选联盟抖客、商家、消费者等各方的合法权益;根据《巨量百应平台服务协议》、《“精选联盟”服务协议(推广…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023