简介一份ASP实例开发源码主题为简约左侧菜单的HTML5全屏网站适合ASP初学者、网站前后端开发者学习动态页面搭建与界面设计。该源码围绕左侧导航菜单与全屏内容区域展开将HTML5语义化结构、CSS布局、JavaScript动效与ASP后台处理相结合可作为个人练手或课程设计参考。压缩包共781个文件体积约9.63MB内容以gif、png、jpg等图片素材、js脚本、css样式、asp动态页面和html静态页面为主其中asp文件约91个、html页面79个、css样式50个另有少量字体、xml、php、jsp、aspx等辅助文件能较好体现网站开发中各类型资源的组织方式。目前已有187人学习该资源。从文件构成看包内包含文件上传、系统安装配置、支付宝支付回调、数据管理接口等常见ASP功能示例可帮助学习者理解完整站点从前端展示到后端处理的实现流程并可直接部署测试、复用扩展。1. 简约左侧菜单 HTML5 全屏网站asp 版到底解决什么问题经典 ASPVBScript老项目还在跑但页面上世纪风格。新的需求是左侧菜单 右侧全屏内容区域同时要在 IE 老环境和现代浏览器都看起来像样。这套“asp 版”源码的价值不在新——而是把菜单抽成可复用文件、用 include 一次改全站再配合 HTML5 语义标签和媒体查询让老后台脱去表格布局的壳。适合维护旧站、接私活用 asp 重写简单管理后台的人。下面从目录到参数说说我拿到这类标题时会怎么做。2. 先把架子搭起来ASP 版全屏布局的目录与母版页写法2.1 经典 ASP 如何复用头部和左侧菜单经典 ASP 没有母版页但用 include 文件模拟母版效果是标准做法。项目标题里“简约左侧菜单 HTML5 全屏网站源码”要复现目录结构我会这么摆asp-fullscreen-site/ |-- inc/ | |-- conn.asp 数据库连接文件 | |-- header.asp 公共头部 !DOCTYPE html | -- menu.asp 左侧菜单生成逻辑 |-- admin/ | |-- index.asp | |-- list.asp | -- upload.asp |-- static/ | |-- css/style.css | -- js/common.js -- uploadfiles/ 图片上传物理路径menu.asp里不放完整 HTML只输出aside这一段。每个业务页面顶部用!--#include fileinc/header.asp--左侧菜单用!--#include fileinc/menu.asp--。这里我提醒一句include 用file还是virtual取决于站点路径。本地调试 IIS 里file是基于当前文件目录的跨目录到上一级时经常报错换成virtual/inc/menu.asp更稳。2.1.1 为什么菜单要单独拆成文件老式 ASP 页面常把菜单复制到每个页面改一个栏目名要全局替换。拆成menu.asp后栏目增删只改一个文件。这个设计理念对 HTML5 全屏站点同样适用左侧菜单是固定位置你不希望同一个导航出现在 20 个页面里。2.2 左侧菜单的 HTML5 结构nav 无序列表HTML5 语义标签这层左边菜单我推荐用nav classsidebar包ul右侧内容区用main。不用div堆是对的不仅因为搜索引擎还因为屏幕阅读器读起来层次清楚。结构如下nav classsidebar idsidebar div classsidebar-header后台管理/div ul classmenu idmenu lia hrefindex.asp?moddashboard首页/a/li !-- 动态菜单由 menu.asp 输出静态这里只留兜底 -- /ul /nav main classcontent idcontent !-- 每个业务页面的正文 -- /main这个结构配合 CSS 能实现全屏效果。注意main在一个页面里只有一个多个会触发 HTML5 校验警告。2.3 CSS让左侧固定、右侧全屏内容区自动撑满全屏网站的核心是两个左侧菜单固定宽度并占满高度右侧内容区宽度用calc(100% - 240px)计算并独立滚动。下方是完整可用的一段html, body { height: 100%; margin: 0; } .sidebar { position: fixed; top: 0; left: 0; width: 240px; height: 100%; background: #2b3a4a; overflow-y: auto; z-index: 100; } .content { margin-left: 240px; /* 不占满时用 margin避免 calc 兼容问题 */ min-height: 100vh; padding: 20px; box-sizing: border-box; } .menu li a { display: block; padding: 12px 20px; color: #cbd5e0; text-decoration: none; } .menu li a:hover, .menu li.active a { background: #1c6ea4; color: #fff; }说明几个要点position: fixed让菜单不随滚动条移动这是全屏后台的基础。右侧不用margin-left还可以用calc(100% - 240px)但在老 IE9 里calc有兼容问题经典 ASP 面对的浏览器环境经常很老所以用 margin 更保险。min-height: 100vh是 HTML5 才有的单位。如果某个页面内容短底部背景不会露白。需要我列一个文件内容对应表吗实际上这种源码压缩包里最常见的问题是 CSS 和 ASP 文件编码不统一——文件头不加% LanguageVBScript CodePage65001 %中文菜单在浏览器里全变问号。这属于源码部署时的第一个坑。2.4 布局文件清单与部署顺序对照源码包你至少应该检查这些文件文件作用修改频率inc/header.asp输出 DOCTYPE、HTML 头部、CSS 引用低inc/menu.asp生成左侧菜单项高inc/conn.asp数据库连接字符串低static/css/style.css全屏布局与配色中admin/*.asp每个业务功能页高按顺序部署先改conn.asp连接字符串再改menu.asp菜单数组最后改 CSS。别一上来就动 CSS否则菜单还没数据你调样式也没意义。3. 实例开发的落地细节从菜单高亮到 ASP 分页查询3.1 动态生成菜单VBScript 循环输出列表项上面静态列表只是兜底真正的源码里菜单应该从数组或数据库表生成。我常用数组因为经典 ASP 连数据库做菜单查询开销大而栏目本身变化不频繁。下面是menu.asp里的核心结构% Dim arrMenus, i, modName, clsName arrMenus Array(dashboard|仪表盘, news|新闻管理, product|产品管理, upload|图片上传) Response.Write nav classsidebar Response.Write div classsidebar-header后台管理/div Response.Write ul classmenu For i 0 To UBound(arrMenus) modName Split(arrMenus(i), |)(0) clsName modName 用于高亮判断 If modName Request(mod) Then clsName active Response.Write li class clsName a href?mod modName Split(arrMenus(i), |)(1) /a/li Next Response.Write /ul/nav %逻辑说明每个菜单项用mod|标题格式存储Split按竖线拆开。从 URL 参数Request(mod)读取当前模块名命中的li加上active类。注意Response.Write拼接字符串时外层双引号里的属性必须写转义这是 VBScript 和 ASP 初学最常见的语法错。参数说明arrMenus菜单数组改这里就能增删菜单项不用改 HTML。Request(mod)同时接受Request.QueryString(mod)和Request.Form(mod)严格用时用后者更安全。3.2 为当前页面自动高亮左侧菜单的两种方式除了上面通过 URL 参数判断还有一种常见做法是给每个页面在 include 前定义变量% pageName news % !--#include file../inc/menu.asp--menu.asp里用同一个变量判断高亮。区别是URL 参数判断适合全站一套菜单变量判断适合不同目录不同菜单。标题里的“源码”如果包含多个功能页面我更推荐后者因为当左侧菜单很长时变量能提前让业务页面声明自己属于哪个栏目。3.2.1 高亮判断的边界经常有人直接在循环里比较Request.ServerVariables(SCRIPT_NAME)这会把list.asp和edit.asp归错菜单。我一般建议在公共头部定义一个g_CurrentMod查询页和编辑页都赋值同一模块名高亮逻辑只看这个变量。3.3 右侧内容区ASP 读取数据库并分页显示管理后台必然有列表页。经典 ASP 没有 DataGrid自己写分页是家常便饭。这里给出最简版本假设 ACCESS 库里有news表% Dim conn, rs, pageNo, pageSize, totalCount, totalPage, sql, i pageNo Request(page) If Not IsNumeric(pageNo) Then pageNo 1 pageNo CInt(pageNo) If pageNo 1 Then pageNo 1 pageSize 10 Set conn Server.CreateObject(ADODB.Connection) conn.Open ProviderMicrosoft.Jet.OLEDB.4.0;Data Source Server.MapPath(data.mdb) Set rs Server.CreateObject(ADODB.Recordset) sql SELECT COUNT(*) FROM news totalCount conn.Execute(sql)(0) totalPage 1 If totalCount 0 Then totalPage Fix((totalCount pageSize - 1) / pageSize) If pageNo totalPage Then pageNo totalPage sql SELECT * FROM news ORDER BY id DESC rs.CursorLocation 3 adUseClient rs.Open sql, conn, 1, 1 rs.PageSize pageSize rs.AbsolutePage pageNo % table % i 0 Do While Not rs.EOF And i rs.PageSize % tr td% Server.HTMLEncode(rs(title)) %/td td% rs(addtime) %/td tda hrefedit.asp?id% rs(id) %编辑/a/td /tr % rs.MoveNext i i 1 Loop % /table逻辑说明先查总数求总页数再用rs.PageSize和rs.AbsolutePage跳页这是经典 ASP 最简单的分页姿势。CursorLocation 3必须设否则AbsolutePage在服务端游标下不生效。页码变量先做IsNumeric校验空值和非法字符都会回退到第 1 页避免CInt()抛异常。循环用Do While Not rs.EOF And i rs.PageSize比For i 1 To rs.PageSize更稳因为末页记录数不一定等于每页条数。参数说明pageSize每页条数列表页 10 条够用导出场景可调到 50。ORDER BY id DESC新记录在前如果你要置顶加一个is_top字段排两次序。3.4 标题换行和 HTMLEncode 处理热搜里有个词是“aspgridview 列中的数据怎么换行”其实那指 ASP.NET WebForms 的 GridView。经典 ASP 页面没有 GridView但需求是通的列表里标题过长要自动换行而不是把表格撑破。CSS 处理就行td.news-title { word-break: break-all; /* 强制中英文断行 */ white-space: normal; /* 允许换行 */ max-width: 360px; }同时输出数据库内容时别忘了 HTML 编码否则标题里的script会被执行这在“实例开发源码”里属于安全底线% Server.HTMLEncode(rs(title)) %这样既满足换行也把 XSS 挡在外面。4. HTML5 全屏带来的交互响应式折叠、iframe 还是 div4.1 最终选择全屏区域用 div 还是 iframe做“HTML5 全屏网站源码”时最大的争议是右侧内容区到底用 iframe 还是 div。经典 ASP 老项目往往已经把各个功能做成了独立 ASP 页面直接套 iframe 简单左侧菜单不动右侧src指向对应页面。但 iframe 的缺点也很明显。方案优点缺点iframe改造快每个模块独立滚动、状态隔离高矮不自动、键盘操作体验差、多层 iframe 嵌套难维护divinclude页面完整URL 可刷新状态可带参数每个页面都要引入头部菜单公共逻辑重复AJAX 加载局部刷新体验好菜单和标题联动经典 ASP 下做旧浏览器兼容成本高我的建议如果源码里功能页是独立的先保留 iframe 跑通等验证完菜单结构稳定再逐步改成 divinclude。网上很多“HTML5 后台模板”其实都走 divinclude 路线但 ASP 版用 iframe 更贴合老系统迁移的实际。4.2 左侧菜单最小可用的 JS 折叠标题关键词“左侧菜单”要做得像样至少要有折叠交互。纯 CSS 也能做但配合一点原生 JS 最可控。下面是最小实现document.getElementById(menuToggle).addEventListener(click, function () { var sidebar document.getElementById(sidebar); var content document.getElementById(content); sidebar.classList.toggle(collapsed); content.classList.toggle(collapsed); });配合 CSS.sidebar.collapsed { width: 64px; } .sidebar.collapsed .menu li a span { display: none; } /* 隐藏文字 */ .content.collapsed { margin-left: 64px; }逻辑说明按钮点击切换collapsed类左侧菜单收缩成图标条右侧内容区同步改变 margin。菜单文字外包一层span收缩时隐藏图标保留方便识别。经典 ASP 源码里一般引用static/js/common.js如果你要兼容 IE8classList不可用要用className className.replace(...)代替。4.2.1 折叠状态要不要传给后端折叠状态只存前端即可用localStorage记录刷新后保持。ASP 端不需要为此做 session 处理否则刷新页面状态丢失会显得很廉价。4.3 媒体查询处理窄屏全屏网站在大屏上爽但浏览器窗口拉窄后菜单占 240px 会挤压内容区。加一段媒体查询让窄屏下菜单自动收起media (max-width: 768px) { .sidebar { width: 64px; } .sidebar .menu li a span { display: none; } .content { margin-left: 64px; } }这里的断点值不是随便拍的。768px 是常见的 iPad 竖屏宽度低于它内容区留不下多少正文。若你的后台表格多建议断点放到 992px 更稳。注意经典 ASP 和前端无关但部署后 CSS 路径要绝对化。./css在 iframe 页面里会基于 iframe 里 URL 解析经常样式 404源码里用/static/css/style.css这种站点绝对路径最省心。4.4 处理 iframe 高度不自动的坑用 iframe 方案时iframe 高度很少能自动跟随内容而用 divinclude 方案左侧菜单在所有页面都固定。这两个方案能结合吗能左侧菜单用 include 保证一致性右侧内容仍用 iframe但给它固定高度height: calc(100vh - 顶部高度)。这样左侧是真实的 HTML 结构右侧独立滚动两个问题同时解决。示例nav classsidebar…菜单…/nav main classcontent iframe srclist.asp idmainFrame/iframe /main.content iframe { width: 100%; height: calc(100vh - 20px); border: 0; }这样 iframe 高度不再依赖内容而是跟随视口。配合前面margin-left布局整体全屏效果成立。5. 源码里的数据操作ASP 读取数据库、图片上传与编码5.1 ADODB.Connection 连接 ACCESS 与 SQL Server 的两种写法标题中的“asp 版”大概率是经典 ASP而经典 ASP 最常见的数据源是 Access 和 SQL Server。两种连接串不能混 Access conn.Open ProviderMicrosoft.Jet.OLEDB.4.0;Data Source Server.MapPath(/data/mydb.mdb) SQL Server conn.Open ProviderSQLOLEDB;Serverlocalhost;Databasemydb;Uidsa;Pwd123456参数说明Access 用Microsoft.Jet.OLEDB.4.064 位 IIS 下要用Microsoft.ACE.OLEDB.12.0并且要装 AccessDatabaseEngine。SQL Server 用SQLOLEDB老驱动新版也可以用SQLNCLI11但依赖对应客户端。Server.MapPath把虚拟路径转物理路径推荐写绝对虚拟路径以/开头避免 include 里相对路径错乱。5.2 asp 图片上传无组件上传的边界热搜里“asp 图片 上传”非常贴近这个标题。经典 ASP 没有内置上传对象做图片上传有组件和无组件两条路。无组件上传实际上是自己解析 HTTP 二进制流用Request.BinaryRead读取数据然后按 multipart 边界切分。% Dim formBytes, divider, dividerPos If Request.TotalBytes 0 Then formBytes Request.BinaryRead(Request.TotalBytes) dividerPos InStrB(formBytes, CByte(H0D H0A)) - 1 divider LeftB(formBytes, dividerPos) 继续切分文件头、文件名与文件内容 End If %逻辑说明Request.BinaryRead一次读完整包体大文件会撑爆内存所以无组件上传只适合小于 1MB 的图片。切分时要按字节用LeftB/MidB/InStrB而不是平时字符串的Left/Mid/InStr否则中文文件名会乱码。保存时用ADODB.Stream写入物理路径这是最常见的做法。社区里也有现成的无组件类可以直接引入。源码包里如果自带upload.asp你要重点检查它是否允许自定义扩展名否则容易被上传 webshell。限制白名单方式allowedExt jpg|png|gif|webp每次保存前用LCase(GetExtName(filename))比对这个列表不允许就直接错误返回。这是比黑名单安全得多的做法。5.3 换行问题在 ASP 输出端的解决前面在 3.4 提到 CSS 换行但如果文本里有换行符\r\n需要转成br。在经典 ASP 中这样做Function ShowContent(str) ShowContent Replace(Server.HTMLEncode(str), vbCrLf, br) End Function这个函数先编码防脚本再把换行符转成br双引号和尖括号都不会被浏览器当作 HTML 执行。很多从 ASP.NET 转过来的朋友会把 GridView 的RowDataBound写法带过来反而是死路。5.4 源码里容易被忽视的 SQL 注入点左侧菜单参数mod、列表页的id、分页参数page只要直接拼 SQL 就是注入点。连接数据库前做一次通用校验可以省很多事Function SafeInt(v) On Error Resume Next SafeInt 0 If IsNumeric(v) Then SafeInt CLng(v) If SafeInt 0 Then SafeInt 0 End Function使用newsId SafeInt(Request(id)) sql SELECT * FROM news WHERE id newsId参数说明IsNumeric通过才转CLng失败返回 0字符串注入被直接丢弃。字符串类型字段则使用Replace把单引号翻倍经典 ASP 中Replace(str, , )是基本转义。这样的源码交给客户安全性上才不会一测就倒。6. 让这份源码更好用的 3 个小技巧6.1 多级菜单用数据表驱动左侧菜单如果只有一层数组就够。一旦出现“系统管理-用户管理-角色管理”三级数组写法会越来越乱。我在正式项目里改用数据库表CREATE TABLE menu ( id INT PRIMARY KEY, parent_id INT DEFAULT 0, name VARCHAR(50), link VARCHAR(255), sort_order INT DEFAULT 0 );ASP 循环输出多级菜单时先在内存构建树再递归输出Sub RenderMenu(parentId) 在此循环查询子菜单输出 li并对有子级的节点递归调用 End Sub要点每个菜单记录带parent_id顶级的为 0。渲染时用Response.Write逐层缩进最终生成的 HTML 结构与手写完全一致且增删靠 SQL 不用改代码。6.2 全屏页面在 1920 宽下也要自适应全屏并不等于内容占满整个屏幕。左侧 240px 右侧内容在 4K 屏上会拉伸过宽阅读困难。给内容区加最大宽度和居中.content-inner { max-width: 1400px; margin: 0 auto; }这样大屏下内容区保持居中表格和图片不会撑得变形。可以用这个技巧验证源码是否真的支持“HTML5 全屏”把浏览器拖成细长条再看菜单是否折叠、内容是否溢出。溢出时检查box-sizing有没有统一设置为border-box* { box-sizing: border-box; }6.3 用文件头注释维护菜单版本最后一个小技巧来自我维护老项目的习惯在menu.asp和inc/header.asp顶部写上版本变更注释并且用统一格式 menu.asp 左侧菜单生成文件 版本: 2025-03-10 修改: 添加图片上传菜单项目录指向 upload.asp 这不是规范文档是救命稻草。经典 ASP 源码包没有自动编译检查改错一个语法整个站点白屏注释里的版本记录能让你快速定位上一次改了什么。配合压缩包里常见的backup/目录每次大改前把旧文件复制进去比任何 Git 在服务器现场都好用。这样一套流程下来从目录结构到数据安全一份“简约左侧菜单 HTML5 全屏网站源码 asp 版”就能从能运行变成够稳当。下次打开这类 zip先看inc目录、再看conn.asp最后再改 CSS 就不会走弯路。本文还有配套的精品资源点击获取
经典ASP旧站改造：HTML5全屏左侧菜单源码实践
简介一份ASP实例开发源码主题为简约左侧菜单的HTML5全屏网站适合ASP初学者、网站前后端开发者学习动态页面搭建与界面设计。该源码围绕左侧导航菜单与全屏内容区域展开将HTML5语义化结构、CSS布局、JavaScript动效与ASP后台处理相结合可作为个人练手或课程设计参考。压缩包共781个文件体积约9.63MB内容以gif、png、jpg等图片素材、js脚本、css样式、asp动态页面和html静态页面为主其中asp文件约91个、html页面79个、css样式50个另有少量字体、xml、php、jsp、aspx等辅助文件能较好体现网站开发中各类型资源的组织方式。目前已有187人学习该资源。从文件构成看包内包含文件上传、系统安装配置、支付宝支付回调、数据管理接口等常见ASP功能示例可帮助学习者理解完整站点从前端展示到后端处理的实现流程并可直接部署测试、复用扩展。1. 简约左侧菜单 HTML5 全屏网站asp 版到底解决什么问题经典 ASPVBScript老项目还在跑但页面上世纪风格。新的需求是左侧菜单 右侧全屏内容区域同时要在 IE 老环境和现代浏览器都看起来像样。这套“asp 版”源码的价值不在新——而是把菜单抽成可复用文件、用 include 一次改全站再配合 HTML5 语义标签和媒体查询让老后台脱去表格布局的壳。适合维护旧站、接私活用 asp 重写简单管理后台的人。下面从目录到参数说说我拿到这类标题时会怎么做。2. 先把架子搭起来ASP 版全屏布局的目录与母版页写法2.1 经典 ASP 如何复用头部和左侧菜单经典 ASP 没有母版页但用 include 文件模拟母版效果是标准做法。项目标题里“简约左侧菜单 HTML5 全屏网站源码”要复现目录结构我会这么摆asp-fullscreen-site/ |-- inc/ | |-- conn.asp 数据库连接文件 | |-- header.asp 公共头部 !DOCTYPE html | -- menu.asp 左侧菜单生成逻辑 |-- admin/ | |-- index.asp | |-- list.asp | -- upload.asp |-- static/ | |-- css/style.css | -- js/common.js -- uploadfiles/ 图片上传物理路径menu.asp里不放完整 HTML只输出aside这一段。每个业务页面顶部用!--#include fileinc/header.asp--左侧菜单用!--#include fileinc/menu.asp--。这里我提醒一句include 用file还是virtual取决于站点路径。本地调试 IIS 里file是基于当前文件目录的跨目录到上一级时经常报错换成virtual/inc/menu.asp更稳。2.1.1 为什么菜单要单独拆成文件老式 ASP 页面常把菜单复制到每个页面改一个栏目名要全局替换。拆成menu.asp后栏目增删只改一个文件。这个设计理念对 HTML5 全屏站点同样适用左侧菜单是固定位置你不希望同一个导航出现在 20 个页面里。2.2 左侧菜单的 HTML5 结构nav 无序列表HTML5 语义标签这层左边菜单我推荐用nav classsidebar包ul右侧内容区用main。不用div堆是对的不仅因为搜索引擎还因为屏幕阅读器读起来层次清楚。结构如下nav classsidebar idsidebar div classsidebar-header后台管理/div ul classmenu idmenu lia hrefindex.asp?moddashboard首页/a/li !-- 动态菜单由 menu.asp 输出静态这里只留兜底 -- /ul /nav main classcontent idcontent !-- 每个业务页面的正文 -- /main这个结构配合 CSS 能实现全屏效果。注意main在一个页面里只有一个多个会触发 HTML5 校验警告。2.3 CSS让左侧固定、右侧全屏内容区自动撑满全屏网站的核心是两个左侧菜单固定宽度并占满高度右侧内容区宽度用calc(100% - 240px)计算并独立滚动。下方是完整可用的一段html, body { height: 100%; margin: 0; } .sidebar { position: fixed; top: 0; left: 0; width: 240px; height: 100%; background: #2b3a4a; overflow-y: auto; z-index: 100; } .content { margin-left: 240px; /* 不占满时用 margin避免 calc 兼容问题 */ min-height: 100vh; padding: 20px; box-sizing: border-box; } .menu li a { display: block; padding: 12px 20px; color: #cbd5e0; text-decoration: none; } .menu li a:hover, .menu li.active a { background: #1c6ea4; color: #fff; }说明几个要点position: fixed让菜单不随滚动条移动这是全屏后台的基础。右侧不用margin-left还可以用calc(100% - 240px)但在老 IE9 里calc有兼容问题经典 ASP 面对的浏览器环境经常很老所以用 margin 更保险。min-height: 100vh是 HTML5 才有的单位。如果某个页面内容短底部背景不会露白。需要我列一个文件内容对应表吗实际上这种源码压缩包里最常见的问题是 CSS 和 ASP 文件编码不统一——文件头不加% LanguageVBScript CodePage65001 %中文菜单在浏览器里全变问号。这属于源码部署时的第一个坑。2.4 布局文件清单与部署顺序对照源码包你至少应该检查这些文件文件作用修改频率inc/header.asp输出 DOCTYPE、HTML 头部、CSS 引用低inc/menu.asp生成左侧菜单项高inc/conn.asp数据库连接字符串低static/css/style.css全屏布局与配色中admin/*.asp每个业务功能页高按顺序部署先改conn.asp连接字符串再改menu.asp菜单数组最后改 CSS。别一上来就动 CSS否则菜单还没数据你调样式也没意义。3. 实例开发的落地细节从菜单高亮到 ASP 分页查询3.1 动态生成菜单VBScript 循环输出列表项上面静态列表只是兜底真正的源码里菜单应该从数组或数据库表生成。我常用数组因为经典 ASP 连数据库做菜单查询开销大而栏目本身变化不频繁。下面是menu.asp里的核心结构% Dim arrMenus, i, modName, clsName arrMenus Array(dashboard|仪表盘, news|新闻管理, product|产品管理, upload|图片上传) Response.Write nav classsidebar Response.Write div classsidebar-header后台管理/div Response.Write ul classmenu For i 0 To UBound(arrMenus) modName Split(arrMenus(i), |)(0) clsName modName 用于高亮判断 If modName Request(mod) Then clsName active Response.Write li class clsName a href?mod modName Split(arrMenus(i), |)(1) /a/li Next Response.Write /ul/nav %逻辑说明每个菜单项用mod|标题格式存储Split按竖线拆开。从 URL 参数Request(mod)读取当前模块名命中的li加上active类。注意Response.Write拼接字符串时外层双引号里的属性必须写转义这是 VBScript 和 ASP 初学最常见的语法错。参数说明arrMenus菜单数组改这里就能增删菜单项不用改 HTML。Request(mod)同时接受Request.QueryString(mod)和Request.Form(mod)严格用时用后者更安全。3.2 为当前页面自动高亮左侧菜单的两种方式除了上面通过 URL 参数判断还有一种常见做法是给每个页面在 include 前定义变量% pageName news % !--#include file../inc/menu.asp--menu.asp里用同一个变量判断高亮。区别是URL 参数判断适合全站一套菜单变量判断适合不同目录不同菜单。标题里的“源码”如果包含多个功能页面我更推荐后者因为当左侧菜单很长时变量能提前让业务页面声明自己属于哪个栏目。3.2.1 高亮判断的边界经常有人直接在循环里比较Request.ServerVariables(SCRIPT_NAME)这会把list.asp和edit.asp归错菜单。我一般建议在公共头部定义一个g_CurrentMod查询页和编辑页都赋值同一模块名高亮逻辑只看这个变量。3.3 右侧内容区ASP 读取数据库并分页显示管理后台必然有列表页。经典 ASP 没有 DataGrid自己写分页是家常便饭。这里给出最简版本假设 ACCESS 库里有news表% Dim conn, rs, pageNo, pageSize, totalCount, totalPage, sql, i pageNo Request(page) If Not IsNumeric(pageNo) Then pageNo 1 pageNo CInt(pageNo) If pageNo 1 Then pageNo 1 pageSize 10 Set conn Server.CreateObject(ADODB.Connection) conn.Open ProviderMicrosoft.Jet.OLEDB.4.0;Data Source Server.MapPath(data.mdb) Set rs Server.CreateObject(ADODB.Recordset) sql SELECT COUNT(*) FROM news totalCount conn.Execute(sql)(0) totalPage 1 If totalCount 0 Then totalPage Fix((totalCount pageSize - 1) / pageSize) If pageNo totalPage Then pageNo totalPage sql SELECT * FROM news ORDER BY id DESC rs.CursorLocation 3 adUseClient rs.Open sql, conn, 1, 1 rs.PageSize pageSize rs.AbsolutePage pageNo % table % i 0 Do While Not rs.EOF And i rs.PageSize % tr td% Server.HTMLEncode(rs(title)) %/td td% rs(addtime) %/td tda hrefedit.asp?id% rs(id) %编辑/a/td /tr % rs.MoveNext i i 1 Loop % /table逻辑说明先查总数求总页数再用rs.PageSize和rs.AbsolutePage跳页这是经典 ASP 最简单的分页姿势。CursorLocation 3必须设否则AbsolutePage在服务端游标下不生效。页码变量先做IsNumeric校验空值和非法字符都会回退到第 1 页避免CInt()抛异常。循环用Do While Not rs.EOF And i rs.PageSize比For i 1 To rs.PageSize更稳因为末页记录数不一定等于每页条数。参数说明pageSize每页条数列表页 10 条够用导出场景可调到 50。ORDER BY id DESC新记录在前如果你要置顶加一个is_top字段排两次序。3.4 标题换行和 HTMLEncode 处理热搜里有个词是“aspgridview 列中的数据怎么换行”其实那指 ASP.NET WebForms 的 GridView。经典 ASP 页面没有 GridView但需求是通的列表里标题过长要自动换行而不是把表格撑破。CSS 处理就行td.news-title { word-break: break-all; /* 强制中英文断行 */ white-space: normal; /* 允许换行 */ max-width: 360px; }同时输出数据库内容时别忘了 HTML 编码否则标题里的script会被执行这在“实例开发源码”里属于安全底线% Server.HTMLEncode(rs(title)) %这样既满足换行也把 XSS 挡在外面。4. HTML5 全屏带来的交互响应式折叠、iframe 还是 div4.1 最终选择全屏区域用 div 还是 iframe做“HTML5 全屏网站源码”时最大的争议是右侧内容区到底用 iframe 还是 div。经典 ASP 老项目往往已经把各个功能做成了独立 ASP 页面直接套 iframe 简单左侧菜单不动右侧src指向对应页面。但 iframe 的缺点也很明显。方案优点缺点iframe改造快每个模块独立滚动、状态隔离高矮不自动、键盘操作体验差、多层 iframe 嵌套难维护divinclude页面完整URL 可刷新状态可带参数每个页面都要引入头部菜单公共逻辑重复AJAX 加载局部刷新体验好菜单和标题联动经典 ASP 下做旧浏览器兼容成本高我的建议如果源码里功能页是独立的先保留 iframe 跑通等验证完菜单结构稳定再逐步改成 divinclude。网上很多“HTML5 后台模板”其实都走 divinclude 路线但 ASP 版用 iframe 更贴合老系统迁移的实际。4.2 左侧菜单最小可用的 JS 折叠标题关键词“左侧菜单”要做得像样至少要有折叠交互。纯 CSS 也能做但配合一点原生 JS 最可控。下面是最小实现document.getElementById(menuToggle).addEventListener(click, function () { var sidebar document.getElementById(sidebar); var content document.getElementById(content); sidebar.classList.toggle(collapsed); content.classList.toggle(collapsed); });配合 CSS.sidebar.collapsed { width: 64px; } .sidebar.collapsed .menu li a span { display: none; } /* 隐藏文字 */ .content.collapsed { margin-left: 64px; }逻辑说明按钮点击切换collapsed类左侧菜单收缩成图标条右侧内容区同步改变 margin。菜单文字外包一层span收缩时隐藏图标保留方便识别。经典 ASP 源码里一般引用static/js/common.js如果你要兼容 IE8classList不可用要用className className.replace(...)代替。4.2.1 折叠状态要不要传给后端折叠状态只存前端即可用localStorage记录刷新后保持。ASP 端不需要为此做 session 处理否则刷新页面状态丢失会显得很廉价。4.3 媒体查询处理窄屏全屏网站在大屏上爽但浏览器窗口拉窄后菜单占 240px 会挤压内容区。加一段媒体查询让窄屏下菜单自动收起media (max-width: 768px) { .sidebar { width: 64px; } .sidebar .menu li a span { display: none; } .content { margin-left: 64px; } }这里的断点值不是随便拍的。768px 是常见的 iPad 竖屏宽度低于它内容区留不下多少正文。若你的后台表格多建议断点放到 992px 更稳。注意经典 ASP 和前端无关但部署后 CSS 路径要绝对化。./css在 iframe 页面里会基于 iframe 里 URL 解析经常样式 404源码里用/static/css/style.css这种站点绝对路径最省心。4.4 处理 iframe 高度不自动的坑用 iframe 方案时iframe 高度很少能自动跟随内容而用 divinclude 方案左侧菜单在所有页面都固定。这两个方案能结合吗能左侧菜单用 include 保证一致性右侧内容仍用 iframe但给它固定高度height: calc(100vh - 顶部高度)。这样左侧是真实的 HTML 结构右侧独立滚动两个问题同时解决。示例nav classsidebar…菜单…/nav main classcontent iframe srclist.asp idmainFrame/iframe /main.content iframe { width: 100%; height: calc(100vh - 20px); border: 0; }这样 iframe 高度不再依赖内容而是跟随视口。配合前面margin-left布局整体全屏效果成立。5. 源码里的数据操作ASP 读取数据库、图片上传与编码5.1 ADODB.Connection 连接 ACCESS 与 SQL Server 的两种写法标题中的“asp 版”大概率是经典 ASP而经典 ASP 最常见的数据源是 Access 和 SQL Server。两种连接串不能混 Access conn.Open ProviderMicrosoft.Jet.OLEDB.4.0;Data Source Server.MapPath(/data/mydb.mdb) SQL Server conn.Open ProviderSQLOLEDB;Serverlocalhost;Databasemydb;Uidsa;Pwd123456参数说明Access 用Microsoft.Jet.OLEDB.4.064 位 IIS 下要用Microsoft.ACE.OLEDB.12.0并且要装 AccessDatabaseEngine。SQL Server 用SQLOLEDB老驱动新版也可以用SQLNCLI11但依赖对应客户端。Server.MapPath把虚拟路径转物理路径推荐写绝对虚拟路径以/开头避免 include 里相对路径错乱。5.2 asp 图片上传无组件上传的边界热搜里“asp 图片 上传”非常贴近这个标题。经典 ASP 没有内置上传对象做图片上传有组件和无组件两条路。无组件上传实际上是自己解析 HTTP 二进制流用Request.BinaryRead读取数据然后按 multipart 边界切分。% Dim formBytes, divider, dividerPos If Request.TotalBytes 0 Then formBytes Request.BinaryRead(Request.TotalBytes) dividerPos InStrB(formBytes, CByte(H0D H0A)) - 1 divider LeftB(formBytes, dividerPos) 继续切分文件头、文件名与文件内容 End If %逻辑说明Request.BinaryRead一次读完整包体大文件会撑爆内存所以无组件上传只适合小于 1MB 的图片。切分时要按字节用LeftB/MidB/InStrB而不是平时字符串的Left/Mid/InStr否则中文文件名会乱码。保存时用ADODB.Stream写入物理路径这是最常见的做法。社区里也有现成的无组件类可以直接引入。源码包里如果自带upload.asp你要重点检查它是否允许自定义扩展名否则容易被上传 webshell。限制白名单方式allowedExt jpg|png|gif|webp每次保存前用LCase(GetExtName(filename))比对这个列表不允许就直接错误返回。这是比黑名单安全得多的做法。5.3 换行问题在 ASP 输出端的解决前面在 3.4 提到 CSS 换行但如果文本里有换行符\r\n需要转成br。在经典 ASP 中这样做Function ShowContent(str) ShowContent Replace(Server.HTMLEncode(str), vbCrLf, br) End Function这个函数先编码防脚本再把换行符转成br双引号和尖括号都不会被浏览器当作 HTML 执行。很多从 ASP.NET 转过来的朋友会把 GridView 的RowDataBound写法带过来反而是死路。5.4 源码里容易被忽视的 SQL 注入点左侧菜单参数mod、列表页的id、分页参数page只要直接拼 SQL 就是注入点。连接数据库前做一次通用校验可以省很多事Function SafeInt(v) On Error Resume Next SafeInt 0 If IsNumeric(v) Then SafeInt CLng(v) If SafeInt 0 Then SafeInt 0 End Function使用newsId SafeInt(Request(id)) sql SELECT * FROM news WHERE id newsId参数说明IsNumeric通过才转CLng失败返回 0字符串注入被直接丢弃。字符串类型字段则使用Replace把单引号翻倍经典 ASP 中Replace(str, , )是基本转义。这样的源码交给客户安全性上才不会一测就倒。6. 让这份源码更好用的 3 个小技巧6.1 多级菜单用数据表驱动左侧菜单如果只有一层数组就够。一旦出现“系统管理-用户管理-角色管理”三级数组写法会越来越乱。我在正式项目里改用数据库表CREATE TABLE menu ( id INT PRIMARY KEY, parent_id INT DEFAULT 0, name VARCHAR(50), link VARCHAR(255), sort_order INT DEFAULT 0 );ASP 循环输出多级菜单时先在内存构建树再递归输出Sub RenderMenu(parentId) 在此循环查询子菜单输出 li并对有子级的节点递归调用 End Sub要点每个菜单记录带parent_id顶级的为 0。渲染时用Response.Write逐层缩进最终生成的 HTML 结构与手写完全一致且增删靠 SQL 不用改代码。6.2 全屏页面在 1920 宽下也要自适应全屏并不等于内容占满整个屏幕。左侧 240px 右侧内容在 4K 屏上会拉伸过宽阅读困难。给内容区加最大宽度和居中.content-inner { max-width: 1400px; margin: 0 auto; }这样大屏下内容区保持居中表格和图片不会撑得变形。可以用这个技巧验证源码是否真的支持“HTML5 全屏”把浏览器拖成细长条再看菜单是否折叠、内容是否溢出。溢出时检查box-sizing有没有统一设置为border-box* { box-sizing: border-box; }6.3 用文件头注释维护菜单版本最后一个小技巧来自我维护老项目的习惯在menu.asp和inc/header.asp顶部写上版本变更注释并且用统一格式 menu.asp 左侧菜单生成文件 版本: 2025-03-10 修改: 添加图片上传菜单项目录指向 upload.asp 这不是规范文档是救命稻草。经典 ASP 源码包没有自动编译检查改错一个语法整个站点白屏注释里的版本记录能让你快速定位上一次改了什么。配合压缩包里常见的backup/目录每次大改前把旧文件复制进去比任何 Git 在服务器现场都好用。这样一套流程下来从目录结构到数据安全一份“简约左侧菜单 HTML5 全屏网站源码 asp 版”就能从能运行变成够稳当。下次打开这类 zip先看inc目录、再看conn.asp最后再改 CSS 就不会走弯路。本文还有配套的精品资源点击获取