端小白也能搞定：CSS文字横向无缝滚动+悬停暂停（附实测代码）
端小白也能搞定：CSS文字横向无缝滚动+悬停暂停（附实测代码）
- 为啥老板总想要那种"新闻跑马灯"效果？
- 先搞清楚我们要做啥
- CSS实现滚动的几种野路子
- marquee标签？祖传玩意儿了
- transform + animation：主流打法
- flex + infinite translate：更丝滑的现代方案
- 手把手撸一个能上线的版本
- HTML结构怎么搭才不翻车
- 关键CSS属性逐行拆解
- 无缝衔接的秘密再深挖
- 让鼠标悬停真的能暂停
- hover触发animation-play-state: paused
- 移动端怎么办？
- 这方案到底靠不靠谱？优缺点唠明白
- 先说说优点，心里美滋滋
- 再说说缺点，别盲目乐观
- 实战中踩过的那些坑
- 滚动速度太快像弹幕？
- 中文和英文混排对不齐？
- 容器宽度变了，滚动断档？
- 文字模糊或者锯齿？
- 调试技巧：浏览器里怎么快速试效果
- 临时改 animation-play-state
- 用 outline 标边界
- 慢动作看细节
- 手机模拟器测 touch
- 让代码更健壮的小聪明
- 用 CSS 变量控制滚动速度
- 防溢出露馅
- will-change 优化
- 无障碍访问（A11y）
- 加载时的 FOUC 处理
- 最后悄悄说句
前端小白也能搞定：CSS文字横向无缝滚动+悬停暂停（附实测代码）
为啥老板总想要那种"新闻跑马灯"效果？
说实话，我刚入行那会儿，看到产品需求文档里写着"需要横向滚动公告栏"的时候，内心是崩溃的。那时候满脑子都是什么？marquee标签？还是拉一个 huge 的 JS 轮播库进来？结果老大飘过来一句：“能用 CSS 解决的，就别碰 JS。”
这话说得太对了。你想想，就为了个文字从左往右跑的效果，你引入一个 Swiper.js 或者自己写一堆 setInterval， bundle 体积咔咔涨，运行时还多占内存，关键是 SEO 直接原地爆炸——搜索引擎蜘蛛一看，好家伙，你的公告文字全是 JS 动态塞进去的，抓个寂寞啊？
所以今天咱们就来唠唠，怎么用纯 CSS 搞出一个丝滑的无缝滚动，还要带悬停暂停功能。别以为这很简单，里面水深得呢，特别是那个"无缝"和"暂停"，坑了我好几次夜宵。
先搞清楚我们要做啥
做技术方案之前，得先明白业务到底要什么。我见过太多人一上来就撸代码，结果做出来了才发现产品经理说的是另一种东西。
这种横向滚动，业务里一般叫"跑马灯"或者"新闻 ticker"。常见场景我给你数数：
股市行情——那些红红绿绿的股票代码，永远在屏幕顶端滚动，眼睛一瞥就能扫到自选股有没有炸雷。
电商公告——“全场满199减50”、“新款iPhone到货了”，这种促销信息得循环播放，生怕你错过。
新闻网站——"Breaking News"那种 urgency 感，就是靠不停滚动营造出来的。
后台管理系统——告警信息、系统通知，得让用户一进页面就注意到。
核心需求其实就三条，记好了：
第一，横向滚。 别给我搞成纵向的，那是另一个物种。
第二，无缝衔接。 这个最关键。文字滚到最左边没了，右边得马上续上，中间不能有空档期。人眼对 discontinuity 特别敏感，一旦断了，那个违和感能让你难受一天。
第三，悬停就得停。 用户体验的基本礼貌。用户鼠标放上去了，明显是想看清楚内容，你还继续滚，那不是找骂吗？
CSS实现滚动的几种野路子
别急着写代码，先看看有哪些方案能打。这就像买菜，你得知道菜市场有几条路，哪条路最近，哪条路坑最多。
marquee标签？祖传玩意儿了
有些老程序员可能还记得 这个标签。HTML 原生支持，一行代码搞定：
<marquee behavior="scroll" direction="left">
这是要滚动的内容
marquee>
确实能用，但兄弟，这玩意儿已经被废弃了。W3C 官方不推荐，现代浏览器虽然还兼容（毕竟存量网站太多），但保不齐哪天就被砍了。而且可控性差，样式难调，悬停暂停都得靠 JS 监听事件，咱们还是别跟过时的东西较劲了。
transform + animation：主流打法
现在最稳的方案是用 CSS Animation 配合 transform: translateX()。为什么不用 margin-left 或者 left？因为 transform 走合成层，不会触发重排重绘，性能高一个数量级。特别是在移动端，掉帧和丝滑的区别，往往就在这一个属性上。
核心思路是：让内容从右侧进入，平移到左侧出去。
flex + infinite translate：更丝滑的现代方案
但是，这里有个问题。如果内容长度不固定，或者你要做"无缝"效果，单纯一个 translate 是不够的。为啥？因为当最后一个字滚出左边框的时候，右边是空的！你得等它完全出去，再瞬间重置回右边，这中间有个 flash，肉眼可见的卡顿。
解决方法是内容复制。把要滚动的内容复制一份，拼在原内容的后面。这样当第一份内容快要滚完的时候，第二份内容正好接上，视觉上就是个无限循环。这个 trick 很巧妙，后面代码里详细讲。
手把手撸一个能上线的版本
好了，理论讲完，上硬货。这个方案我在生产环境跑过，兼容到 IE11 没问题（虽然 IE 用户越来越少，但公司后台系统你懂的，总有几台古董机）。
HTML结构怎么搭才不翻车
结构要简单，但得为 CSS 服务。我的建议是这样：
<div class="marquee-container">
<div class="marquee-content">
<span class="text-wrapper">
🎉 热烈庆祝公司上市10周年！全场商品低至5折起！新用户注册领888元大礼包！限时特惠，手慢无！
span>
<span class="text-wrapper">
🎉 热烈庆祝公司上市10周年！全场商品低至5折起！新用户注册领888元大礼包！限时特惠，手慢无！
span>
div>
div>
看到没？关键点在于 .text-wrapper 有两个，内容一模一样。这就是前面说的"复制一份骗过人眼"的 trick。
.marquee-container 是外层容器，负责遮罩和溢出隐藏。.marquee-content 是动画层，负责整体平移。
关键CSS属性逐行拆解
.marquee-container {
/* 固定高度，防止内容撑开 */
height: 40px;
/* 背景色随意，根据你的设计来 */
background: linear-gradient(90deg, #ff6b6b, #ee5a6f);
/* 最关键的一行：溢出隐藏，只显示容器内的内容 */
overflow: hidden;
/* 相对定位，作为子元素的定位上下文 */
position: relative;
/* 圆角、阴影这些装饰性属性，根据喜好加 */
border-radius: 4px;
box-shadow: 0 2px 8px rgba(238, 90, 111, 0.3);
}
.marquee-content {
/* 让两个 span 横向排列 */
display: flex;
/* 垂直居中 */
align-items: center;
/* 高度填满容器 */
height: 100%;
/* 动画名称，后面定义 */
animation-name: marquee-scroll;
/* 一次完整的滚动需要20秒，根据内容长度调整 */
animation-duration: 20s;
/* 线性速度，匀速滚动，不会忽快忽慢 */
animation-timing-function: linear;
/* 无限循环 */
animation-iteration-count: infinite;
/* 动画开始时在第一帧停留，避免初始位置的跳动 */
animation-fill-mode: both;
}
.text-wrapper {
/* 文字不换行，这是横向滚动的前提 */
white-space: nowrap;
/* 文字颜色 */
color: #fff;
/* 字号 */
font-size: 14px;
/* 字间距稍微拉开一点，阅读更舒适 */
letter-spacing: 0.5px;
/* 左右内边距，让两段文字之间有点呼吸感 */
padding: 0 50px;
/* 行高继承，垂直居中 */
line-height: 40px;
}
/* 定义关键帧动画 */
@keyframes marquee-scroll {
0% {
/* 初始位置：从右侧进入 */
transform: translateX(0);
}
100% {
/* 结束位置：向左平移50% */
/* 为什么是50%？因为内容复制了一份，两份总长度是单份的2倍 */
/* 平移50%正好让第一份完全出去，第二份完全进来，形成无缝 */
transform: translateX(-50%);
}
}
这里有几个点特别值得细说：
white-space: nowrap 是命脉。如果不加这个，文字遇到容器边界会自动换行，你的横向滚动直接变成纵向排版，当场翻车。
animation-timing-function: linear 也很重要。默认的 ease 会有加速减速过程，看起来一顿一顿的，不够"机械感"（或者说不够丝滑）。线性匀速更符合人们对"滚动公告"的认知。
translateX(-50%) 的 trick 前面提过。因为有两份一模一样的内容，总宽度是单份的两倍，所以平移自身宽度的50%，正好完成一个周期的滚动。
无缝衔接的秘密再深挖
可能有同学会问：为什么是两份？一份不行吗？
假设你只有一份内容，宽度是 W。从 translateX(100%)（完全在右侧外面）滚动到 translateX(-100%)（完全在左侧外面），确实能看完所有内容。但当它到达 -100% 的时候，瞬间重置回 100%，这个重置过程如果动画没处理好，会有跳变。而且 translateX(100%) 意味着初始状态容器里是完全空的，用户第一眼看到的是一个空白区域，体验不好。
两份内容的方案，初始状态是第一份内容填满容器，第二份紧挨着在右侧。滚动过程中，第一份慢慢出去，第二份慢慢进来，当第一份完全出去的时候，第二份正好完全占据容器，此时动画也正好到了50%，瞬间回到起点（因为两份内容一样），人眼完全察觉不到跳变，完美。
这个原理其实跟传统的"雪碧图动画"或者"无缝轮播"是一个路数，都是利用视觉暂留和内容的周期性。
让鼠标悬停真的能暂停
无缝滚动搞定了，现在来解决悬停暂停。看起来简单，实际有坑。
hover触发animation-play-state: paused
最直接的思路：
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}
没错，这就是核心代码。animation-play-state 是专门控制动画运行状态的属性，paused 就是暂停，running 就是运行（默认）。
但是！这里有个事件冒泡的坑。如果你的 .text-wrapper 里还有其他可交互元素，比如链接、按钮，鼠标移上去的时候，hover 状态可能会混乱。还有，如果你用了 cursor: pointer 之类的，要确保层级正确。
更健壮的写法是确保 hover 在容器上，且状态能正确传递到动画层：
.marquee-container {
/* ... 其他样式 ... */
cursor: pointer;
}
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}
/* 加个过渡，让暂停更柔和，不会急刹车 */
.marquee-content {
/* ... 其他样式 ... */
/* 虽然 animation 本身不能 transition，但可以加个 will-change 优化 */
will-change: transform;
}
移动端怎么办？
这是最头疼的。移动端没有 hover 这个概念，用户是 touch 的。你手指按上去，:hover 伪类可能会触发（取决于浏览器实现），但抬起手指后，状态可能不会自动恢复，或者表现得很诡异。
稳妥起见，移动端需要 JS 兜底。但别担心，就两行，不违背"纯 CSS"的初心（毕竟 PC 端还是纯 CSS，移动端只是增强）：
const marquee = document.querySelector('.marquee-content');
// touch 开始时暂停
marquee.addEventListener('touchstart', () => {
marquee.style.animationPlayState = 'paused';
});
// touch 结束时恢复
marquee.addEventListener('touchend', () => {
marquee.style.animationPlayState = 'running';
});
当然，如果你追求极致的纯 CSS，也可以考虑用 @media (hover: hover) 媒体查询，只在支持 hover 的设备上启用暂停功能：
@media (hover: hover) {
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}
}
这样移动端默认就是一直滚，不暂停，也算一种策略。具体怎么选，看产品需求。
这方案到底靠不靠谱？优缺点唠明白
技术选型最怕的就是只看优点不看坑。我把我实战中的感受摊开来给你看。
先说说优点，心里美滋滋
纯 CSS，零依赖。 这意味着什么？页面加载快啊！你不用等那个 JS 文件下载、解析、执行，CSS 是渲染阻塞的，但同时也是最先处理的，用户第一眼就能看到效果。而且少了一个请求，HTTP/2 虽然多路复用，但能少开条流总是好的。
性能开销小。 transform 和 opacity 是浏览器优化最好的两个属性，走合成层，不触发重排，GPU 直接参与。我测过，在 mid-range 安卓机上，这个滚动能稳 60fps，跟原生一样丝滑。
SEO 友好。 这是最关键的业务价值。你的公告文字实打实写在 HTML 里，搜索引擎蜘蛛爬过来一目了然。你要是换成 JS 动态生成，或者用 Canvas 画，SEO 直接归零。对于电商、新闻类站点，这往往是决定性因素。
可维护性高。 就几行 CSS，后面接手的人一眼就能看懂。不像某些 JS 库，升级个版本 API 全变，或者文档稀烂，想改个速度都得翻源码。
再说说缺点，别盲目乐观
内容长度固定时不好适配。 我们的方案里，动画时长是固定的（比如20秒）。如果内容很短，20秒滚完太拖沓；如果内容超长，20秒滚完像飞一样。虽然可以用 CSS 变量动态调整，但终归不如 JS 那样能根据内容长度自动计算速度。
超长文本可能卡顿。 如果你要滚动的文本是几千字的长文，复制一份就是双倍 DOM 节点，虽然现代浏览器处理几千个节点没问题，但万一你还加了复杂的样式、伪元素、阴影什么的，渲染压力会上去。这时候可能需要考虑虚拟滚动或者分段加载。
IE？别提了。 虽然前面说兼容到 IE11，但 animation 属性在 IE10 以下是不支持的。如果你的用户群体还有大量 IE9（比如某些政府机构、银行内部系统），这个方案直接毙掉。不过都2024年了，IE9 应该进博物馆了吧？
动态内容更新麻烦。 如果公告是实时推送的，你需要用 JS 去更新 DOM，这时候要确保更新时动画状态正确，否则可能出现跳帧。好在这个问题用少量 JS 就能解决，不是硬伤。
实战中踩过的那些坑
理论讲完，来点血泪史。这些都是我深夜加班 debug 出来的经验，你现在看到，相当于白嫖了我的夜宵。
滚动速度太快像弹幕？
产品经理第一天说"快点，让用户注意到"，第二天说"慢点，看都看不清"。调 animation-duration 就行，但注意，时长越长速度越慢，这个反直觉的关系别搞混了。
更高级的做法是用 CSS 变量，方便全局调整：
:root {
--marquee-duration: 20s;
}
.marquee-content {
animation-duration: var(--marquee-duration);
}
/* 不同场景用不同速度 */
.marquee-container.urgent {
--marquee-duration: 10s;
}
.marquee-container.relax {
--marquee-duration: 30s;
}
中文和英文混排对不齐？
这是个排版玄学问题。中文字符通常是等宽（monospace 感），英文是比例宽度，混在一起的时候，如果用了某些字体，视觉上有断层感。
解决方法是微调 letter-spacing 和 word-spacing：
.text-wrapper {
/* 中文间距 */
letter-spacing: 0.05em;
/* 英文单词间距 */
word-spacing: 0.1em;
/* 用支持中文的等宽或准等宽字体 */
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
还有一种 trick 是给中英文之间加零宽空格 或者用 分别包起来微调，但那样 HTML 结构太脏，不建议。
容器宽度变了，滚动断档？
响应式布局的痛。用户缩放浏览器，或者从竖屏转到横屏，容器宽度变了，但动画还是按照原来的 translateX(-50%) 跑，可能出现两份内容之间出现空隙，或者重叠。
严格来说，我们的方案里，因为 translateX 是相对于自身宽度的百分比，而自身宽度是由内容撑开的（display: flex + white-space: nowrap），所以内容没变的情况下，百分比是自适应的。但如果内容本身变了（比如字体大小随屏幕宽度变化），就可能出问题。
保险起见，可以用 JS 监听 resize，或者更简单，用 CSS 锁死一些关键尺寸：
.marquee-container {
/* 最小宽度保证，再小就不优雅降级 */
min-width: 320px;
/* 或者直接用媒体查询断点 */
}
@media (max-width: 768px) {
.text-wrapper {
font-size: 12px;
padding: 0 20px;
}
}
文字模糊或者锯齿？
滚动过程中文字发虚，特别是 Windows 下的 Chrome。这是因为 transform 开启了硬件加速，但某些显卡驱动渲染文字不够锐利。
可以加个 hack：
.marquee-content {
/* 强制 GPU 渲染，有时能缓解 */
transform: translateZ(0);
/* 或者调整抗锯齿 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
但要注意，translateZ(0) 会创建新的层叠上下文，可能影响 z-index 的表现，用的时候留意一下。
调试技巧：浏览器里怎么快速试效果
写 CSS 动画，DevTools 是你的好朋友。几个我常用的技巧：
临时改 animation-play-state
在 Elements 面板，选中 .marquee-content，在 Styles 里直接勾选或取消 animation-play-state: paused，看暂停效果是否符合预期。这比刷新页面快多了，特别是调那个"刚好停在我想要的位置"的时候。
用 outline 标边界
布局乱了，不知道哪里超了？加个 outline：
.marquee-container {
outline: 2px solid red;
}
.marquee-content {
outline: 2px solid blue;
}
.text-wrapper {
outline: 1px dashed green;
}
肉眼可见的层级关系，比 border 好，因为不占布局空间。
慢动作看细节
Chrome DevTools 有个神器：Animations 面板（如果没显示，按 Esc 打开 Drawer，点菜单找 Animations）。在这里你可以：
- 把动画速度降到 10%，看清楚每一帧的衔接
- 手动拖拽时间轴，看任意时刻的状态
- 查看动画的 keyframes 详情
对于调试"无缝"效果特别有用。你能肉眼确认，当第一份内容完全出去的时候，第二份是不是完美接上，有没有缝隙或者重叠。
手机模拟器测 touch
Device Toolbar 切到手机模式，但注意，这里的 touch 是模拟的，:hover 行为可能跟真机不一样。最稳妥还是真机调试，或者用 Safari 的 Remote Debugging（iOS）和 Chrome 的 Remote Debugging（Android）。
真机上如果发现触摸不暂停，检查两点：
- 元素是否正确响应了 touch 事件（有时候被其他层挡住了）
- JS 的事件监听是否加上了（如果用了 JS 兜底方案）
让代码更健壮的小聪明
写到这，你已经能跑通基础版本了。但production code 和 demo 的区别，就在于那些"万一"的处理。
用 CSS 变量控制滚动速度
前面提过，再给个完整示例：
<div class="marquee-container" style="--marquee-speed: 15s;">
<div class="marquee-content">
<span class="text-wrapper">...span>
<span class="text-wrapper">...span>
div>
div>
.marquee-content {
/* 默认值，如果行内没定义就用这个 */
animation-duration: var(--marquee-speed, 20s);
}
这样同一套 CSS，不同实例可以有不同的速度，不用写多个 class。
防溢出露馅
overflow: hidden 是必须的，但有时候内容太长，或者用户设置了很大的字体，可能从其他方向溢出。保险起见：
.marquee-container {
overflow: hidden;
position: relative;
/* 有时候还需要 */
max-width: 100%;
box-sizing: border-box;
}
will-change 优化
告诉浏览器"这个元素要动画了，你提前准备一下"：
.marquee-content {
will-change: transform;
}
注意，will-change 是双刃剑，用多了反而占用 GPU 内存。建议只在确定要动画的元素上加，动画结束后可以移除（如果需要的话，滚动公告一般是无限循环，所以一直留着也行）。
无障碍访问（A11y）
别忘了视力不好的用户。滚动内容对使用屏幕阅读器的人不太友好，因为只读一遍就过去了。可以加上 aria-live 属性，让屏幕阅读器能读到：
<div class="marquee-container" aria-live="polite" aria-atomic="true">
<div class="marquee-content">
<span class="text-wrapper" role="text">
这里是公告内容...
span>
<span class="text-wrapper" aria-hidden="true">
这里是公告内容...
span>
div>
div>
aria-live="polite" 表示内容变化时礼貌地通知读屏软件，不会打断当前朗读。aria-hidden="true" 让第二份内容对屏幕阅读器不可见，因为内容一样，读两遍反而烦人。
还有，prefers-reduced-motion 媒体查询要尊重：
@media (prefers-reduced-motion: reduce) {
.marquee-content {
animation: none;
/* 静止状态下展示全部内容，或者换种方式 */
flex-wrap: wrap;
height: auto;
}
}
有些用户设置了"减少动画"，可能是晕车或者注意力障碍，这时候咱就别滚了，静态展示完事。
加载时的 FOUC 处理
Flash of Unstyled Content，内容加载瞬间的样式闪烁。如果 CSS 加载慢了，用户可能先看到静止的两行文字，然后 CSS 到了突然开始滚动，有点突兀。
可以加个初始状态隐藏，或者用内敛样式先定住：
<div class="marquee-container" style="opacity: 0;">
...
div>
<script>
// CSS 加载完再显示
window.addEventListener('load', () => {
document.querySelector('.marquee-container').style.opacity = '1';
});
script>
或者用 animation-delay 错开启动时间，给浏览器一点准备时间。
最后悄悄说句
好了，全套功夫都交给你了。从基本原理到踩坑实录，从 PC 到移动端，从性能优化到无障碍访问，该说的不该说的都说了。
下次产品再说"就加个简单的跑马灯"，你可以笑着甩出这段代码，然后——去摸鱼吧。是真的，这活儿现在对你就是五分钟的事，剩下的时间喝杯咖啡，看看技术博客，或者跟后端兄弟吹吹水，不香吗？
而且你注意到了吗？咱们这个方案，没有引用任何第三方库，没有复杂的构建配置，复制粘贴就能跑。这种"简单但 robust"的解决方案，往往比那些重型的、依赖众多的方案更有生命力。五年后，可能你用的框架都换了三茬，但这几行 CSS 大概率还能稳稳地跑在公司的公告栏上。
技术嘛，有时候追求的就是这种优雅且持久的感觉。就像一个好的老员工，不多话，不折腾，但关键时刻永远不掉链子。
代码拿去，不谢。有问题？死党群聊里吼一声，懂的兄弟会捞你的。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
