洛丽糖 - css
type: channel
link: https://luolt.cn/tag/css/
items: 一款不错的额404错误页面源码
items: 在线 SQL 语句生成器：可视化配置，零基础也能写 SQL
items: 通过AI编写的原生JS弹窗气泡
items: typecho简洁主题-采风
items: 通过原生js简单实现手风琴效果
items: vCard是一个完全响应的个人资料组合html模板
items: 隔壁群友分享的音乐播放器代码
items: 奇趣起始页简洁轻巧的开源起始页
items: 简洁的可变透明度返回顶部按钮
items: 用别人的代码写了一个留言墙

一款不错的额404错误页面源码
type: item
date: 2026-03-02T11:54:56+08:00
description: 这一款不错的404页面是博主的一个域名没有正确解析后，访问发现的，看着不错就个保存了下来，以后可能用得到。 404 - 页面未找到 系统提示 Website Error 站点未找到或状态异常 可能的原因如下，请逐项排查： 主机控制面板未绑定域名（请确认 www 和 @ 已分别绑定）。 域名解析错误，请检查您的域名 DNS 解析记录是否正确。 产品到期时间过长，当前域名可能已被解除绑定。 诊断信息 <rect x="9" y="9" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2"/> <rect x="5" y="5" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2" opacity=".6"/> 复制 出错时间 — 出错 URL — <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"></circle> <path d="M12 7.5v.1m0 3.4v5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path> 提示：如有必要，请将上述诊断信息记录并提供给技术人员处理。 <path d="M20 7v6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20 13a8 8 0 1 1-2.34-5.66L20 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 刷新页面 404 <defs> <pattern id="dots" width="16" height="16" patternUnits="userSpaceOnUse"> <circle cx="1" cy="1" r="1" fill="#E6EEFA"/> </pattern> <linearGradient id="grad" x1="0" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#2563EB"/> <stop offset="100%" stop-color="#1E48CC"/> </linearGradient> </defs> <rect x="0" y="0" width="800" height="260" fill="url(#dots)"/> <g transform="translate(188,120) rotate(-14)"> <rect x="-60" y="-22" rx="16" ry="16" width="200" height="44" fill="#FFFFFF" stroke="#CFE0FF" stroke-width="3"/> <rect x="-46" y="-10" rx="9" ry="9" width="172" height="20" fill="#F3F8FF" stroke="#DCE8FF"/> </g> <g transform="translate(502,120) rotate(14)"> <rect x="-60" y="-22" rx="16" ry="16" width="200" height="44" fill="#FFFFFF" stroke="#CFE0FF" stroke-width="3"/> <rect x="-46" y="-10" rx="9" ry="9" width="172" height="20" fill="#F3F8FF" stroke="#DCE8FF"/> </g> <path d="M394 94 L410 122 L392 134 L408 160" fill="none" stroke="url(#grad)" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="392" cy="134" r="3" fill="#2563EB"/> <circle cx="404" cy="118" r="2" fill="#2563EB" opacity=".7…

在线 SQL 语句生成器：可视化配置，零基础也能写 SQL
type: item
date: 2025-12-20T19:17:00+08:00
description: 这款纯前端在线SQL生成器是为开发人员、运维人员和数据库初学者打造的轻量化工具，无需后端环境、无需安装软件，仅需浏览器打开即可使用。它将复杂的SQL语法转化为可视化配置项，覆盖增删改查全场景，还集成了JOIN联查、语法校验、模板套用、注释生成、模拟执行预览等实战功能，既能提升开发效率，又能降低手写SQL的出错率，是数据库操作的高效辅助工具。核心亮点零门槛使用，可视化配置无需记忆复杂SQL语法，通过选择操作类型、填写表名、配置字段/条件，即可自动生成标准SQL语句。字段支持类型选择（数字/字符串/日期），自动适配引号，避免语法错误。完整JOIN联查支持，多表操作无忧内置INNER JOIN（内联）、LEFT JOIN（左联）、RIGHT JOIN（右联）三种联查类型，支持多表逗号分隔配置，关联条件直接填写，轻松实现多表关联查询。6大常用SQL模板，一键套用内置模糊查询（LIKE）、批量插入、范围查询（IN）、区间查询（BETWEEN）、统计查询（COUNT）、求和查询（SUM）等高频模板，省去重复编写基础SQL的时间。SQL语法精准校验，规避错误内置前端语法校验规则，自动检测增删改查语句的合法性，非法语句标红提示，提前规避语法错误导致的执行失败。自动注释生成，规范代码按操作类型自动生成语义化注释，删改操作额外添加风险提醒（如DELETE不可逆、UPDATE无WHERE更新全表），同时支持手动编辑，提升SQL代码的可维护性。模拟执行预览，提前预判效果SELECT语句返回模拟表格数据（含字段表头+测试数据），增删改语句返回执行结果提示，无需连接数据库即可预判操作效果，降低真实环境操作风险。轻量化纯前端，跨平台可用基于原生HTML+CSS+JS开发，无框架依赖，支持Windows、Mac、Linux等系统，手机端也能适配使用，保存单个HTML文件即可离线运行。功能清单功能模块具体能力基础操作支持SELECT（查询）、INSERT（新增）、UPDATE（修改）、DELETE（删除）高级查询排序（ORDER BY）、分页（LIMIT）、多表JOIN联查字段配置字段增删、类型选择、表前缀支持（如user.id）工具辅助SQL格式化、一键复制、语法校验、自动注释、配置清空模板中心6大常用SQL模板，一键套用并支持自定义修改预览功能模拟执行结果预览（表格/执行提示）安全防护危险字符过滤（防注入）、删改操作风险提醒适用人群数据库初学者：无需手写SQL，通过配置快速理解SQL语法逻辑开发人员：提升日常SQL编写效率，减少重复劳动运维人员：快速生成标准SQL，降低数据库操作风险办公人员：简单配置即可实现数据查询/新增，无需技术背景使用方式复制代码保存为sql-builder.html文件，用浏览器直接打开选择操作类型（如SELECT查询），填写主表名按需配置字段、查询条件、排序/分页，或开启JOIN联查配置多表点击「生成SQL」得到语句，可进一步格式化、加注释、校验语法点击「模拟执行预览」查看效果，满意后一键复制使用项目代码{hide} 终极版SQL生成器（注释+预览+JOIN+校验+模板） 终极版SQL生成器（注释+预览+JOIN+校验+模板） 操作类型： SELECT 查询（JOIN联查+排序+分页） INSERT 新增 UPDATE 修改 DELETE 删除 主数据表名： 开启JOIN联查（多表必备） 联查类型： INNER JOIN（内联，取交集） LEFT JOIN（左联，主表全显） RIGHT JOIN（右联，联查表全显） 关联表名： 关联条件（例：user.id=order.uid AND order.gid=goods.id）： 多表联查依次写关联条件，用AND连接 字段配置： 普通字段 数字 字符串 日期 + - 查询条件（WHERE）： 100，无需写WHERE"> 排序（ORDER BY）： 分页（LIMIT）： 调用常用SQL模板 选择模板： -- 选择常用模板 -- 模糊查询（LIKE） 批量新增（多条INSERT） 范围查询（IN） 区间查询（BETWEEN） 统计查询（COUNT） 求和查询（SUM） 选择后生成模板SQL，可修改参数使用 生成SQL 格式化SQL 语法校验 应用模板 自动加注释 模拟执行预览 清空配置 生成结果（可直接复制）： 复制SQL ✅ 注释已自动适配操作类型，可手动修改 显示执行预览结果 SQL模拟执行返回结果： ⚠️ 仅模拟返回结构，非真实数据库查询 {/hide}

通过AI编写的原生JS弹窗气泡
type: item
date: 2025-09-18T17:37:37+08:00
description: 这款js弹窗气泡代码非常简约，能够胜任日常弹窗业务。 原生JS弹窗气泡 默认弹窗 成功弹窗 错误弹窗 警告弹窗 信息弹窗 不自动关闭 带跳转的弹窗

typecho简洁主题-采风
type: item
date: 2025-03-31T00:47:44+08:00
description: 「采风」是一款专为创作者设计的极简风格 Typecho 主题，强调内容呈现与阅读体验，适合技术博客、个人随笔与生活记录。主题下载：{hide}https://github.com/lovefc/typecho_caifeng{/hide}主题特性无干扰的极简布局自适应宽屏/窄屏显示响应式布局（移动端优化）轻量级代码架构渐进式增强设计快速安装下载最新 release 包解压至 /usr/themes/ 目录后台启用主题建议搭配 Markdown 编辑器使用开源协议本项目基于 MIT License 开源，2025 © lovefc

通过原生js简单实现手风琴效果
type: item
date: 2024-10-06T13:55:00+08:00
description: 今天花费一点时间解决了一下主题中的tab切换存在两种状态的时候只生效一种问题，也修复了一下手风琴每次需要点击两次才能使用的问题。今天就把本站使用的手风琴代码分享给大家，功能有限，只实现了展开和闭合，不支持点击另一个其他展开的全部闭合。下面就是纯纯的干货环节简单的css代码/*手风琴*/ .xm-sfq-body{ background: #ececec; margin: .5rem 0; border-radius: 6px; } .xm-sfq { background-color: #16b576; cursor: pointer; padding: .5rem; width: calc(100% - 1rem); border: none; font-size: 14px; transition: 0.4s; border-radius: 6px; } .xm-sfq-title{ margin-left: 1rem; color: #fff; } .xm-sfq.active,.xm-sfq:hover { background-color:red; } .panelcd { background-color: #bebebe; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; padding: 0 1rem; line-height: 2.5; font-size: 13px; border-radius: 0 0 6px 6px; } .xm-sfq:after { content:'\002B'; font-weight:bold; float:left; margin-left:5px; } .xm-sfq.active:after { content:"\2212"; }html代码 标题 这是内容 标题 这是内容 标题 这是内容 标题 这是内容 标题 这是内容 javascript{hide}function sfq(element) { if (!element) return; var xmSfqElement = element.querySelector('.xm-sfq'); if (xmSfqElement) { // 给 .xm-sfq 添加或删除 "ddd" 类 xmSfqElement.classList.toggle('active'); var panel = element.querySelector('.panelcd'); if (panel.style.maxHeight) { panel.style.maxHeight = ''; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } }{/hide}

vCard是一个完全响应的个人资料组合html模板
type: item
date: 2024-07-31T22:06:25+08:00
description: vCard是一个完全响应的个人投资组合网站，对所有设备都有响应，使用HTML、CSS和JavaScript构建。{hide}https://github.com/codewithsadee/vcard-personal-portfolio/?tab=readme-ov-file{/hide}

隔壁群友分享的音乐播放器代码
type: item
date: 2024-03-13T12:28:00+08:00
description: 下面就是隔壁群友分享的音乐代码，实测还是挺不错的。 <?php $friendMusic = '1958354765||dfdd||https://pic.ziyuan.wang/user/xunm/2024/02/2695743714_f01cda822aec1.jpg||半生'; if ($friendMusic) { $musicInfo = explode('||', $friendMusic); $musicId = isset($musicInfo[0]) ? trim($musicInfo[0]) : ''; $musicAuthor = isset($musicInfo[1]) ? trim($musicInfo[1]) : ''; $musicImage = isset($musicInfo[2]) ? trim($musicInfo[2]) : ''; $musicName = isset($musicInfo[3]) ? trim($musicInfo[3]) : ''; if (strpos($musicId, 'http') === 0) { $musicUrl = $musicId; } else { $musicUrl = '//music.163.com/song/media/outer/url?id=' . $musicId . '.mp3'; } if ($musicId && $musicAuthor && $musicImage && $musicUrl && $musicName) { ?> <img class="mimg" src="<?php echo $musicImage; ?>" alt="" style="width: 110%; height: 110%; position: absolute; pointer-events: none; filter: brightness(80%) saturate(150%) blur(10px); -webkit-filter: brightness(80%) saturate(150%) blur(10px); z-index: 0;"> <div class="music-play-conten-left-bg" style="background-image: url(<?php echo $musicImage; ?>);"> <?php echo $musicName; ?> <?php echo $musicAuthor; ?> <div class="conten-right-y-tb" lang="<?php echo $musicUrl; ?>" onclick="audbf('<?php echo $musicId; ?>')"> <i class="iconfont icon-jixu" id="sh-aud-left-plak-<?php echo $musicId; ?>" lang="0"> <i id="musicurl-<?php echo $musicId; ?>" lang="<?php echo $musicUrl; ?>" class="<?php echo $musicImage; ?>" style="display: none;"> <audio id="music-player-<?php echo $musicId; ?>" src="<?php echo $musicUrl; ?>" type="audio/mpeg"> <?php } } ?>

奇趣起始页简洁轻巧的开源起始页
type: item
date: 2024-03-10T11:50:00+08:00
description: {zt a="0" b="https://s.paul.ren/" c="https://github.com/Dreamer-Paul/KStart"}奇趣起始页是一个基于社区维护的开源项目，可以通过提交配置文件，从而创建自己专属的起始页。无需登录，只需要一个 ?u=paul 形式的查询参数就可以随时随地进行访问，是不是很酷呢？项目特点所有功能均使用原生 JS 实现支持导入导出设置项可上传个人配置到 GitHub 仓库实现永久托管支持夜间模式所有内容均为社区维护（虽然还没有人 PR）

简洁的可变透明度返回顶部按钮
type: item
date: 2024-02-29T13:35:00+08:00
description: 可变透明度返回顶部代码，如果向下滚动超过1200像素，按钮的透明度会下降，减少视觉干扰，更便于浏览内容主体，非常贴心的用户体验，兼容主流浏览器js代码// JavaScript Document (function($){ var goToTopTime; $.fn.goToTop=function(options){ var opts = $.extend({},$.fn.goToTop.def,options); var $window=$(window); $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix //$(this).hide(); var $this=$(this); clearTimeout(goToTopTime); goToTopTime=setTimeout(function(){ var controlLeft; if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) { controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg; }else{ controlLeft = $window.width()- opts.pageWidthJg-$this.width(); } var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6 var controlTop=$window.height() - $this.height()-opts.pageHeightJg; controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop; var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false; if (shouldvisible){ $this.stop().show(); }else{ $this.stop().hide(); } $this.css({ position: cssfixedsupport ? 'absolute' : 'fixed', top: controlTop, left: controlLeft }); },30); $(this).click(function(event){ $body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration); $(this).blur(); event.preventDefault(); event.stopPropagation(); }); }; $.fn.goToTop.def={ pageWidth:960,//页面宽度 pageWidthJg:2 ,//按钮和页面的间隔距离 pageHeightJg:100,//按钮和页面底部的间隔距离 startline:300,//出现回到顶部按钮的滚动条scrollTop距离 duration:500,//回到顶部的速度时间 targetObg:"html"//目标位置,用body太恶心了，回不到最上面去 }; })(jQuery); $(function(){ $('').appendTo("body"); });我在原来的css修改了一点点，各位可以在原来的代码中重新修改。.cd-top { z-index:9999; display: inline-block; border-radius: 3px; height: 38px; width: 38px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(232, 98, 86, 0.8) url(https://yfch.top/img/top.png) no-r…

用别人的代码写了一个留言墙
type: item
date: 2024-02-26T17:11:13+08:00
description: 今天优化了一下搜索弹窗，偷拿了一段别人的特效代码。顺便又从别人的那里复制粘贴了一段留言墙代码，随便又又抄袭了一下别人的css样式代码，这样就搞定了，是不是很快，抄袭虽然好，就怕火葬场。