当前位置： 首页 > news >正文

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

news 2025/7/10 8:42:20

效果图下：
在这里插入图片描述
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>

相关文章：

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

效果图下&#xff1a; css部分代码&#xff1a;/* 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:visit…...

编程日记 2023/4/11 14:04:52

支持向量回归删除异常值Python

1、支持向量回归&#xff08;SVR&#xff09;原理 支持向量回归&#xff08;Support Vector Regression&#xff0c;SVR&#xff09;不仅可以用于预测&#xff0c;还可以用于异常值检测。其基本思路是训练一个回归模型&#xff0c;通过对每个数据点进行预测&#xff0c;并计算…...

编程日记 2023/4/11 14:04:46

手把手开发一门程序语言JimLang (2)

根据爱因斯坦的相对论&#xff0c;物体的质量越大&#xff0c;时间过得越快&#xff0c;所以托更对于我的煎熬&#xff0c;远远比你们想象的还要痛苦…今天给大家来盘硬菜&#xff0c;也是前些时日预告过的JimLang的开发过程… Let’s go !!! 语法及解析 JimLang.g4 这里我们…...

编程日记 2023/4/11 14:04:39

DSF深度搜索时到底是如何回溯的（小tip）

这一段让我迷了两次&#xff0c;为什么回溯的时候&#xff0c;恢复了最后一位&#xff0c;往上递归一层之后&#xff0c;把最后一位填在它前一位&#xff0c;但是原本的前一位没有恢复&#xff0c;最后一位要怎么办&#xff1f;其实这还是递归没明白 也就是这一步是如何实现的 …...

编程日记 2023/4/11 14:04:32

Rust Web入门（八）：打包发布

本教程笔记来自 杨旭老师的 rust web 全栈教程&#xff0c;链接如下&#xff1a; https://www.bilibili.com/video/BV1RP4y1G7KF?p1&vd_source8595fbbf160cc11a0cc07cadacf22951 学习 Rust Web 需要学习 rust 的前置知识可以学习杨旭老师的另一门教程 https://www.bili…...

编程日记 2023/3/9 23:46:47

synchronize优化偏向锁

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

编程日记 2023/4/11 14:04:26

算法习题之动态规划

动态规划习题1 打印n层汉诺塔从最左边移动到最右边的全部过程习题2 给你一个栈&#xff0c;请你逆序这个栈&#xff0c;不能申请额外的数据结构&#xff0c;只能使用递归函数。 如何实现?习题3 打印一个字符串的全部子序列&#xff0c;打印一个字符串的全部子序列&#xff0c;…...

编程日记 2023/4/11 7:34:13

顺序表【数据结构】

文章目录:star2:1. 顺序表概念:star2:2. 框架3. 基本功能3.1 头文件:star:3.2 初始化:star:3.3 扩容:star:3.4 打印:star:3.5 尾插:star:3.6 头插:star:3.7 尾删:star:3.8 头删:star:3.9 指定插入:star:3.10 指定删除:star:3.11 查找:star2:3.12 注意事项4. 顺序表的缺点&#…...

编程日记 2023/4/11 14:04:19

SNAP中根据入射角和干涉图使用波段计算器计算垂直形变--以门源地震为例

SNAP中根据入射角和相干图使用波段计算器计算垂直形变--以门源地震为例0 写在前面1 具体步骤1.1 准备数据1.2 在SNAP中打开波段运算Band Maths1.3 之前计算的水平位移displacement如下图数据的其他处理请参考博文在SNAP中用sentinel-1数据做InSAR测量&#xff0c;以门源地震为例…...

编程日记 2023/4/11 14:04:12

Ubuntu20.04中Docker安装与配置

一、安装 1、卸载可能存在的旧版本 sudo apt-get remove docker docker-engine docker-ce docker.io2、更新apt包索引 sudo apt-get update显示“正在读取软件包列表… 完成” 3、安装以下包以使apt可以通过HTTPS使用存储库(repository) sudo apt-get install -y apt-tran…...

编程日记 2023/3/9 23:41:31

pytorch权值初始化和损失函数

pytorch权值初始化和损失函数 权值初始化 梯度消失与爆炸 针对上面这个两个隐藏层的神经网络&#xff0c;我们求w2的梯度 可以发现&#xff0c;w2的梯度与H1&#xff08;上一层网络的输出&#xff09;有很大的关系&#xff0c;当h1趋近于0时&#xff0c;w2的梯度也趋近于0&am…...

编程日记 2023/4/11 14:04:05

maven将jar文件上传至本地仓库及私服

maven官方仓库有些依赖并不存在&#xff0c;现在项目都是maven直接获取jar&#xff0c;当maven获取不到时&#xff0c;需要我们把jar上传至maven仓库。已 ImpalaJDBC41.jar 文件为例&#xff0c;如&#xff1a;希望上传后&#xff0c;设置的依赖为&#xff1a;<dependency&g…...

编程日记 2023/4/11 14:03:59

前端学习第三阶段-第1、2章 JavaScript 基础语法

01第一章 JavaScript网页编程课前导学 1-1 JavaScript网页编程课前导学 02第二章 JavaScript 基础语法 2-1 计算机基础和Javascript介绍 01-计算机基础导读 02-编程语言 03-计算机基础 04-JavaScript初识导读 05-初始JavaScript 06-浏览器执行JS过程 07-JS三部分组成 08-JS三种…...

编程日记 2023/4/11 14:03:52

hibernate学习（二）

hibernate学习&#xff08;二&#xff09; 一、hibernate常见配置&#xff1a; 1.XML提示问题配置&#xff1a; 二、hibernate映射的配置&#xff1a; &#xff08;1&#xff09;class标签的配置&#xff1a; 标签用来建立类与表之间的映射关系属性&#xff1a; 1.name&…...

编程日记 2023/4/11 22:50:29

平安银行LAMBDA实验室负责人崔孝林：提早拿到下一个计算时代入场券

量子前哨重磅推出独家专题《“量子”百人科学家》&#xff0c;我们将遍访全球探索赋能“量子”场景应用的百位优秀科学专家&#xff0c;从商业视角了解当下各行业领域的“量子”最新研究成果&#xff0c;多角度、多维度、多层面讲述该领域的探索历程&#xff0c;为读者解析商业…...

编程日记 2023/4/11 22:50:27

linux下进不去adb

linux 进不去adb cat /sys/kernel/debug/usb/devices 查看是否有adb口 首先查看adb是否被识别成串口 option 如果被识别成串口 方法1&#xff1a; https://patchwork.kernel.org/project/linux-usb/patch/20180723140220.7166-1-romain.izard.progmail.com/ diff --git a/dri…...

编程日记 2023/4/11 22:50:24

【SPSS】多因素方差分析详细操作教程（附案例实战）

🤵‍♂️ 个人主页：@艾派森的个人主页 ✍🏻作者简介：Python学习者 🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论 💬点赞👍🏻 收藏 📂加关注+ 目录 方差分析概述 多因素方差分析原理...

编程日记 2023/4/11 22:50:22

我的投稿之旅

一、铁道科学与工程学报选择这个期刊的原因是&#xff1a;感觉影响因子较低&#xff0c;而且实验室有师兄师姐中过这个期刊&#xff0c;所以抱着试一试的心态投了。投稿之前需要去官网注册账号由于方向不一致&#xff0c;被退稿了“您的稿件内容不属于本刊刊载范畴&#xff0c;…...

编程日记 2023/4/11 22:50:20

51单片机DS18B20的使用

文章目录前言一、DS18B20介绍二、单总线协议三、DS18B20引脚说明四、DS18B20程序编写1.DS18B20复位函数2.DS18B20存在检测3.DS18B20读取一个bit和一个byte函数4.DS18B20写一个字节函数5.开始温度转换函数6.DS18B20初始化函数7.DS18B20读取温度函数五、代码测试总结前言 本篇文…...

编程日记 2023/4/11 22:50:17

Vue组件原理知识（1）

Vue 组件知识整理&#xff08;1&#xff09;文章目录Vue 组件知识整理&#xff08;1&#xff09;一、组件介绍1.1 传统方式与组件方式编写应用对比二、组件使用2.1 非单文件组件的使用**1. 组件的创建****2. 组件的注册****3. 组件的使用****4. Vue中使用组件的三大步骤总结***…...

编程日记 2023/4/11 22:50:15

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/7/9 7:35:20

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/7/9 7:16:49

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2025/7/6 21:03:33

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/7/10 3:36:28

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/7/8 4:43:42

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/7/9 21:34:32

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/7/8 11:51:32

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/7/7 17:41:16

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/8 5:29:35