Hello World
type: channel
link: https://blog.zhuxu.asia/
description: Your description here.
items: 短代码测试
items: 分离文章的评论和引用通告
items: 代码高亮测试
items: 这是一篇文章
items: 人工智能时代的职业变革与人才培养
items: 从甲骨文到数字书法——汉字书写文化的传承与革新
items: 长安春深遇故人
items: 视频播放测试
items: markdown语法指南
items: 增强版 CSS 框架使用文档

短代码测试
type: item
date: 2026-01-23T07:40:00+00:00
description: [button type="success"]测试按钮[/button][badge type="danger"]测试徽章[/badge]

分离文章的评论和引用通告
type: item
date: 2025-12-11T13:03:02+00:00
description: 分离文章的评论和引用通告打开模板的 comments.php 文件，找到通篇的核心语句：<?php $this->comments()->to($comments); ?>这条语句控制着评论的类型，他的参数如下：语句注释<?php $this→comments()→to($comments); ?>显示全部（默认）<?php $this→comments('comment')→to($comments); ?>只显示 comment<?php $this→comments('trackback')→to($trackbacks); ?>只显示 trackback<?php $this→comments('pingback')→to($pingbacks); ?>只显示 pingback为了分开，我们开始对 comments.php 做如下修改，首先只显示评论:<?php $this->comments('comment')->to($comments); ?> <?php if ($comments->have()) : ?> <?php while ($comments->next()) : ?> <li id="<?php $comments->theId() ?>"> <?php $comments->gravatar(32, '', '', 'avatar'); ?> <?php $comments->author() ?> Says: <?php $comments->date('F jS, Y'); ?> at <?php $comments->date('h:i a'); ?> <?php $comments->content() ?> <?php endwhile; ?> <?php endif; ?>然后输出 pingback，pingback 并不需要那么多的展示内容，假设只展示标题和日期：<?php $this->comments('pingback')->to($pingbacks); ?> <?php if ($pingbacks->have()) : ?> Pingbacks <?php while ($pingbacks->[next](http://www.php.net/next)()) : ?> <li id="<?php $pingbacks->theId() ?>"> <?php $pingbacks->author() ?> <?php $pingbacks->[date](http://www.php.net/date)('F jS, Y'); ?> <?php endwhile; ?> <?php endif; ?>如果你要显示 trackback，也可以按如上的修改。typecho 模板语法很多是通用的，所以当你遇到不清楚的问题时，可以自己试着拼凑一下，就会有惊喜哦。

代码高亮测试
type: item
date: 2025-11-09T09:21:00+00:00
description: console.log("行号从5开始"); console.log("下一行是6");def func(): a = 1 b = 2 # 高亮此行 c = 3 d = 4 # 高亮此行及下两行 e = 5 f = 6 两个空格 → 一个制表符[x] Write the press release[ ] Update the website[ ] Contact the media

这是一篇文章
type: item
date: 2025-11-07T08:40:00+00:00
description: index.php模板信息我们先从主文件说起，打开这个文件，首先看到的是注释：/** * 这是typecho系统的一套默认皮肤。你可以在typecho的官方网站获得更多关于此皮肤的信息 * * @package Typecho Default Theme * @author typecho * @version 1.0.0 * @link http://typecho.org */这是模板信息存放的地方，它将在后台的模板选择页显示。前两行是简短的介绍，每个“*”表示一个段落。@package 表示模板名@author表示作者名@version是模板的版本号@link是作者的网站连接紧挨着注释下方的$this->need('header.php')，在结尾处也会看到$this->need('sidebar.php')和$this->need('footer.php')。这些语句用来调用模板的其它模块。header故名思议是页首，sidebar是侧栏，footer是页脚。(与php的include功能差不多，need是typecho程序内置的方法，内部还会存在一些判断什么的，建议在做主题是使用need方法而不是include)显示文章列表<?php if ($this->have()): ?> <?php while($this->next()): ?> <a href="<?php $this->permalink() ?>"><?php $this->title() ?> 作者:<a href="<?php $this->author->permalink(); ?>"><?php $this->author(); ?> 时间: <?php $this->date(); ?> 分类: <?php $this->category(','); ?> <a href="<?php $this->permalink() ?>#comments"><?php $this->commentsNum('评论', '1 条评论', '%d 条评论'); ?> 标签：<?php $this->tags(','); ?> <?php $this->content('- 阅读剩余部分 -'); ?> <?php endwhile; ?> <?php else: ?>暂无文章<?php endif; ?>进入文章循环，输出文章，一句一句介绍代码解释<?php if ($this->have()): ?>判断是否有文章，没有的话输出提示<?php while($this->next()): ?>开始循环输出文章，与<?php endwhile; ?>对应<?php $this->permalink() ?>文章所在的连接<?php $this->title() ?>文章标题<?php $this->author(); ?>文章作者<?php $this->author->permalink(); ?>文章作者地址<?php $this->date(); ?>文章的发布日期，日期格式可在typecho后台设置->阅读中设置<?php $this->category(','); ?>文章所在分类<?php $this->tags(','); ?>文章标签<?php $this->commentsNum('评论', '1 条评论', '%d 条评论'); ?>文章评论数及连接<?php $this->content('- 阅读剩余部分 -'); ?>文章内容，其中的“- 阅读剩余部分 -”是显示摘要时隐藏部分的邀请链接，也可使用<?php $this->excerpt(140, '...'); ?>来进行自动截取文字内容，“140”是截取字符数量文章分页<?php $this->pageNav('«前一页', '后一页»'); ?>也可以这样分开写<?php $this->pageLink('下一页','next'); ?> <?php $this->pageLink('上一页'); ?>其他说明archive.php代码同index.php，区别就是index.php是显示首页的，而archive.php是显示某分类下的文章列表、搜索结果的。如果模板文件中不存在archive.php，程序就会自动用index.php代替archive.php。header.php编码打开这个文件，见到的第一个php代码就是：<meta charset="<?php $this->options->charset(); ?>">调用默认的编码，现在最经常用都是utf-8吧。所以我通常是直接写成utf-8，省去php处理时间。页面标题<?php $this->archiveT…

人工智能时代的职业变革与人才培养
type: item
date: 2025-11-01T12:42:58+00:00
description: 随着人工智能技术的飞速发展，从工业机器人到智能客服，从算法推荐到自动驾驶，人工智能已经渗透到社会生产生活的各个领域，引发了一场深刻的职业变革。传统职业面临着被替代的风险，新兴职业不断涌现，职业结构的调整速度日益加快。在这一背景下，如何适应职业变革的趋势，培养符合时代需求的人才，成为个人、企业和社会共同面临的重要课题。人工智能对职业的影响并非简单的“替代”，而是呈现出“替代与创造并存”的复杂态势。根据牛津大学的研究报告，重复性强、规则明确、低技能要求的职业最容易被人工智能替代，如制造业中的流水线工人、零售业中的收银员、银行业中的柜员等。以制造业为例，工业机器人凭借其高精度、高效率、不知疲倦的优势，已经在汽车制造、电子组装等领域大规模应用，替代了大量传统的手工操作岗位。富士康等大型制造企业引入工业机器人后，生产线的自动化率显著提高，人工需求大幅减少，这一现象被称为“机器换人”。除了替代低技能岗位，人工智能还在重塑中高技能岗位的工作内容。以医疗行业为例，人工智能辅助诊断系统能够通过深度学习大量的医学影像数据，快速准确地识别肿瘤、肺炎等疾病，辅助医生做出诊断决策。这不仅提高了诊断效率，也降低了误诊率，但同时也要求医生具备与人工智能系统协作的能力，能够解读系统给出的诊断建议，并结合临床经验做出最终判断。类似地，在法律行业，智能合同审查系统能够快速识别合同中的风险条款，替代了律师的部分基础性工作，让律师能够将更多精力投入到案件分析、策略制定等高端工作中。这种“人机协作”的模式，正在成为越来越多职业的新形态。与传统职业被替代或重塑的同时，人工智能的发展也创造了大量新兴职业。人工智能研发领域需要算法工程师、数据科学家、机器学习工程师等专业人才，这些职业对专业技能的要求极高，薪酬水平也位居各行业前列。人工智能应用领域则涌现出智能产品经理、人工智能训练师、数据标注员等新兴职业。其中，人工智能训练师负责对人工智能系统进行数据标注、模型训练和优化，确保系统能够准确理解和处理信息，这一职业的需求量近年来呈现爆发式增长。此外，随着人工智能伦理、隐私保护等问题日益受到关注，人工智能伦理研究员、数据安全专家等职业也逐渐兴起，成为保障人工智能健康发展的重要力量。职业变革的加速也对人才的能力结构提出了新的要求。在人工智能时代，单一的专业技能已经无法满足职业发展的需求，复合型能力成为人才竞争力的核心。首先，数字化能力是基础要求，无论是传统职业还是新兴职业，都需要从业者具备基本的数字工具使用能力、数据处理能力和信息技术素养。其次，创新能力和问题解决能力变得更加重要，人工智能能够处理重复性问题，但在面对复杂的、不确定性的问题时，仍需要人类发挥创新思维，提出解决方案。例如，算法工程师需要不断创新算法模型，以提高人工智能系统的性能；企业管理者需要结合人工智能技术，创新商业模式和管理方式。此外，跨学科素养和终身学习能力也成为人工智能时代人才的必备素质。人工智能技术的发展融合了计算机科学、数学、统计学、心理学等多个学科的知识，许多新兴职业都要求从业者具备跨学科的知识结构。例如，智能教育产品经理需要同时了解人工智能技术、教育学和心理学知识；人工智能医疗研究员需要掌握计算机技术和医学知识。同时，由于技术发展速度快，职业结构调整频繁，从业者必须保持终身学习的习惯，不断更新知识和技能，才能适应职业发展的需求。面对人工智能时代的职业变革，个人、企业和社会需要共同发力，构建完善的人才培养体系。从个人层面来看，要树立终身学习的理念，主动关注行业发展趋势，根据自身职业规划，有针对性地学习新的知识和技能。例如，传统制造业的工人可以学习工业机器人操作和维护技能，转型为技术工人；传统媒体从业者可以学习新媒体运营和数据分析技能，适应媒体融合的发展趋势。同时，要注重培养自己的创新能力、批判性思维和人际沟通能力，这些能力是人工智能难以替代的。企业作为人才需求的主体，应当承担起人才培养的重要责任。一方面，企业要加大对员工培训的投入，建立完善的内部培训体系，根据技术发展和岗位需求，为员工提供个性化的培训课程，帮助员工实现职业转型。例如，互联网企业可以为员工提供人工智能技术培训，培养内部的人工智能应用人才；制造企业可以与职业院校合作，开展订单式培训，培养符合企业需求的技能型人才。另一方面，企业要营造创新的企业文化，鼓励员工尝试新的技术和方法，为人才的成长提供良好的环境。社会层面，教育体系的改革是关键。学校教育要打破传统的学科壁垒，加强跨学科教育，开设人工智能相关的课程，培养学生的数字化素养和创新能力。例如，中小学可以开设编程课程，培养学生的逻辑思维能力；高等院校可以设立人工智能专业，培养高端研发人才，同时在其他专业中融入人工智能相关知识，培养复合型人才。此外，职业教育要紧跟产业发展趋势，调整专业设置，加强实践…

从甲骨文到数字书法——汉字书写文化的传承与革新
type: item
date: 2025-11-01T12:42:39+00:00
description: 汉字，作为世界上唯一沿用至今的表意文字体系，其书写不仅是信息传递的工具，更承载着中华民族数千年的文化基因与审美追求。从殷商甲骨上的契刻符号，到商周青铜鼎上的铭文，从秦汉竹简的隶书古朴，到魏晋名士的行书风流，汉字书写在不同历史时期呈现出独特的艺术风貌，也形成了一套完整的文化传承体系。进入数字时代，键盘输入逐渐取代纸笔书写，汉字书写文化面临着前所未有的挑战，却也在技术赋能下迎来了新的革新机遇。殷商时期的甲骨文，是目前已知最早的成熟汉字体系。当时的先民们将占卜吉凶的辞句刻在龟甲兽骨上，线条刚劲瘦硬、疏密相间，既有“刀刻”的质感，又暗含着原始的对称美学。由于甲骨材质坚硬，契刻难度极大，每一个字的笔画都经过了精心考量，这种“惜墨如金”的书写方式，也塑造了汉字最初的构形逻辑——以最简单的线条勾勒事物的本质特征。比如“日”字，便是模拟太阳圆形的轮廓；“山”字，则是对山峰连绵起伏形态的抽象概括。甲骨文的书写者多为王室贵族或专职卜官，他们的书写活动与祭祀、战争等重大国事紧密相关，使得汉字从诞生之初就兼具实用功能与精神内涵。商周时期的金文（铭文）在甲骨文的基础上实现了突破。青铜鼎彝作为“国之重器”，其铭文不仅记录了祖先功绩、祭祀典礼等重要事件，更在书写风格上变得厚重饱满。由于青铜铸造的工艺特性，铭文线条圆润雄浑，结构匀称端庄，展现出“金石之气”的独特美感。与甲骨文的契刻不同，金文的书写先以毛笔在陶范上书写，再进行铸造，这使得书写者能够更自由地发挥笔法，线条的粗细变化和转折过渡也更加自然。西周时期的《毛公鼎》铭文，全文497字，是目前已知最长的金文作品，其字体结构严谨，笔法娴熟，堪称金文书法的巅峰之作，也证明了当时汉字书写已经形成了较为规范的技法体系。秦汉时期是汉字书写体系成熟的关键阶段。秦始皇统一六国后，推行“书同文”政策，以小篆为标准字体，规范了汉字的字形结构。小篆线条匀净流畅，笔画对称整齐，具有极强的规范性和装饰性，是汉字书写从实用向审美过渡的重要标志。但小篆书写难度较大，难以满足日常政务需求，于是隶书在民间逐渐兴起。隶书打破了小篆的圆转笔法，采用“蚕头燕尾”“一波三折”的笔法特征，字形由修长变为扁方，书写更为简便高效。东汉时期，隶书达到鼎盛，碑刻书法如《曹全碑》《张迁碑》等，或秀丽飘逸，或雄浑厚重，展现出丰富的艺术风格，为汉字书法奠定了坚实的技法基础。魏晋南北朝时期，汉字书写进入了“尚韵”的艺术高峰。随着造纸术的普及和文人阶层的兴起，毛笔书写成为文人表达情感、彰显个性的重要方式。王羲之的《兰亭集序》被誉为“天下第一行书”，其笔法灵动多变，结体疏密相间，字势欹正相生，将汉字的书写美感推向了极致。这一时期，楷书、行书、草书等字体逐渐成熟，形成了完整的字体体系。楷书规范端庄，适合官方文书；行书兼具实用与审美，成为日常书写的主流；草书则以奔放洒脱的风格，成为文人抒发情感的载体。汉字书写不再仅仅是信息传递的工具，更成为一种独立的艺术形式——书法艺术，形成了“书为心画”的审美理念。唐宋时期，书法艺术进一步繁荣发展，形成了“尚法”“尚意”的艺术追求。唐代楷书发展到顶峰，颜真卿、柳公权、欧阳询等书法家建立了严谨的楷书技法规范，其作品如《颜勤礼碑》《玄秘塔碑》《九成宫醴泉铭》等，成为后世学习楷书的典范。同时，草书在张旭、怀素的笔下达到了新的高度，其作品笔走龙蛇、气势磅礴，将书法的抒情性发挥到极致。宋代文人将书法与诗文、绘画相结合，提出“书贵写意”的理念，苏轼、黄庭坚、米芾、蔡襄等“宋四家”的书法作品，更注重个人情感的表达，笔法自由灵动，形成了独特的艺术风格。这一时期，书法教育成为科举制度的重要组成部分，“馆阁体”的出现虽然在一定程度上限制了个性发挥，但也推动了书法技法的普及。明清时期，书法艺术呈现出多元化的发展态势。明代文人书法注重个性张扬，祝允明、文徵明、唐寅、王宠等书法家各具特色，或豪放，或清秀，形成了鲜明的艺术风格。清代则出现了“碑学”与“帖学”的争论，碑学主张从汉魏碑刻中汲取营养，强调笔法的雄浑厚重；帖学则注重学习晋唐以来的法帖，追求笔法的灵动飘逸。邓石如、伊秉绶等碑学大家，将汉隶与篆书的笔法融入楷书和行书，创造出全新的书法风格，为书法艺术注入了新的活力。这一时期，书法工具的改进和印刷技术的发展，也使得书法作品的传播更加广泛，进一步推动了书法文化的普及。进入20世纪，特别是数字时代以来，汉字书写文化面临着前所未有的挑战。随着计算机、手机等电子设备的普及，键盘输入逐渐取代了纸笔书写，成为日常信息传递的主要方式。“提笔忘字”成为一种普遍现象，青少年对汉字的字形结构和书写技法越来越陌生，传统书法艺术的传承面临断层危机。与此同时，技术的发展也为汉字书写文化的革新提供了新的机遇。数字书法软件的出现，如“书法大师”“妙笔书法”等，通过模拟毛笔的笔法、墨法和纸张的…

长安春深遇故人
type: item
date: 2025-10-31T14:22:05+00:00
description: 林晚是在一阵剧烈的颠簸中醒来的。鼻尖萦绕着檀香与草药混合的古怪气味，身上盖着的锦被绣着繁复的缠枝莲纹样，绝非她宿舍那床洗得发白的棉被。“姑娘醒了？”一个梳着双丫髻的小姑娘端着铜盆进来，见她睁眼，喜得差点摔了盆子，“快去禀报公子，林姑娘醒了！”林晚脑子嗡嗡作响，昨晚她还在医学院的解剖室熬夜复习，为了赶早八的药理课在桌上趴着睡了过去，怎么一睁眼就到了这古色古香的地方？铜镜里映出张陌生的脸庞，柳叶眉杏核眼，一身淡青色襦裙衬得肌肤胜雪，只是脸色苍白得厉害。“姑娘可是还有不适？”温润的男声自身后响起。林晚回头，见一年轻男子立在门口，青衫广袖，腰间系着玉带，面容清俊如月下寒松。他身后跟着的老郎中刚要搭脉，却被林晚下意识躲开——她清楚自己没病，更怕这古代医术误诊。“我没事，只是有些乏力。”林晚斟酌着开口，努力模仿着记忆里的古言腔调，“多谢公子搭救。”她从丫鬟零碎的话语中得知，自己是被这名叫沈砚之的吏部侍郎从曲江池边救回来的，原主不知为何落水，她一睁眼就占了这具身体。沈砚之刚要说话，院外突然传来急促的呼救声。“公子！老夫人突发恶疾，晕过去了！”管家跌跌撞撞地跑来，脸色惨白。府里的郎中匆忙赶到，诊脉后却面色凝重地摇头：“老夫人脉息微弱，似是痰迷心窍，老夫无能为力啊。”沈砚之脸色骤变，林晚心头一动——痰迷心窍，莫不是急性脑梗或心梗？她虽未正式行医，但急救知识烂熟于心。“公子，或许我能试试。”林晚上前一步，声音虽轻却坚定。沈砚之眼中闪过诧异，却在看到她眼中的笃定后，咬牙点头：“若能救祖母，沈某愿以百金相赠。”林晚让丫鬟取来烈酒和干净的布巾，又让人按住老夫人的四肢，自己则跪在榻边，双手交叠按在老夫人胸口，开始做胸外按压。这古怪的动作让在场众人惊呼，沈砚之也皱紧了眉，却强忍着没阻止。按压持续了一炷香的时间，林晚额角沁满汗珠，手臂酸痛得几乎抬不起来。就在众人以为她疯了的时候，老夫人突然剧烈咳嗽起来，一口浓痰吐了出来，缓缓睁开了眼睛。“祖母！”沈砚之喜极而泣，转头看向林晚，眼中满是敬佩与好奇。老夫人缓过神后，拉着林晚的手连连道谢。当晚，沈砚之亲自送来伤药和点心。烛火摇曳中，他看着林晚缠着纱布的手腕，轻声问：“姑娘的医术，当真奇特。”林晚心头一紧，编了个自幼随隐世神医学艺的借口。沈砚之却没追问，只是递过一只玉簪：“这是家母遗物，望姑娘笑纳。若不嫌弃，便在府中安心住下，也好让我尽地主之谊。”玉簪触手温润，雕着一朵盛放的玉兰花。林晚看着他眼中的真诚，轻轻点头。窗外，长安的月光透过窗棂洒进来，落在两人身上。她忽然觉得，这陌生的大唐，或许会有不一样的缘分在等着她。

视频播放测试
type: item
date: 2025-10-30T12:24:00+00:00
description: [video src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" pip="true" airplay="true"][video src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" quality="高清,https://example.com/videos/1080p.mp4|清,https://example.com/videos/720p.mp4|流畅,https://example.com/videos/480p.mp4"][video src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" poster="https://example.com/covers/main-cover.jpg"width="90%"height="auto" maxWidth="1200px"autoplay="false"loop="false" preload="auto"lang="zh-cn"mutex="true"theme="#ff6600"hotkey="true"volume="0.6"controls="true" muted="false"playbackRate="0.5,1,1.25,1.5,2"pip="true"airplay="true"subtitle="https://example.com/subtitles/chinese.vtt"subtitleType="webvtt"quality="1080P,https://example.com/videos/1080p.mp4|720P,https://example.com/videos/720p.mp4|480P,https://example.com/videos/480p.mp4"delay="2000"ratio="16:9"lazyLoad="true"]

markdown语法指南
type: item
date: 2025-10-30T10:48:00+00:00
description: markdown - 更简洁、更高效=================================================强烈建议开发者认真阅读本文档，掌握md及HBuilderX对md的强大支持。窄屏幕下，可按Alt+滚轮横向滚动很多人只把markdown用于网络文章发表，这糟蹋了markdown。markdown不止是HTML的简化版，更重要的是txt的升级版、word的轻量版、笔记的最佳载体。作为一种简单的格式标记语言，不同于txt的无格式，不同于HTML的复杂标记，也不同于word的鼠标调整样式。markdown通过简单的几个字符键入，就可以快捷的定义文档的样式。比如在行首敲一个“#”，就把这行定义为了1级标题，并且在HBuilderX里有直观完善的着色，这样无需发布为web页面，可直接当word用。掌握markdown，你可以完全抛弃txt和笔记软件的编辑器，并且在大多数场景下替代掉复杂臃肿的word。享受简洁之美、享受效率提升。而HBuilderX，可以被称为最强大的markdown书写工具了。下面的示例列举了markdown语法及对应的HBuilderX使用技巧：开始前，可以先按下文档结构图的快捷键Alt+w（Mac是Ctrl+w），浏览本文的大纲。标题语法markdown的标题是行首以#号开头，空格分割的，不同级别的标题，在HX里着色也不同。如下：标题1标题2标题3标题4标题5标题6标题使用技巧：Emmet快速输入：敲h2+Tab即可生成二级标题【同HTML里的emmet写法，不止标题，HX里所有可对应tag的markdown语法均支持emmet写法】。仅行首生效智能双击：双击#号可选中整个标题段落智能回车：行尾回车或行中Ctrl+Enter强制换行后会自动在下一行补#。而连续2次回车后将自动补的#去掉。(体验同word)回车后再次按Tab可递进一层标题，再按Tab切换列表符在# 后回车，可上插一个空标题行【同word】，或任意位置按Ctrl+Shift+Enter也可以上插空标题行折叠：点标题前的-号可折叠该标题段落，快捷键是Alt+-（展开折叠是Alt+=）多层折叠时折叠或展开子节点，快捷键是Alt+Shift+-或=全文全部折叠或展开，快捷键是Ctrl+Alt+Shift+-或=折叠其他区域，快捷键是Alt+Shift+o。这对长文档管理非常有用，可以专注于当前章节可以在菜单-跳转-折叠中随时找到这些功能列表markdown的列表支持有序列表、无序列表以及特殊的任务列表。同样也是在行前加一个特殊符号，并空格后再跟列表文字内容。有序列表有序列表就是有顺序的列表，依靠行前的数字标记顺序。有序列表1 【设置或取消有序列表符的快捷键：Ctrl+Alt+1，可选中多行批量设置序号；支持多光标批量设置列表符，即按Ctrl+鼠标左键添加多光标】有序列表2 【列表后回车会自动补序号】有序列表3 【智能双击：双击前面的数字，可重新对数字排序，修正序号错误，并选中有序列表段落（左边的4是故意写错让你体验的）】无序列表无序列表就是列表不排序，无序列表因书写随意而被更广泛的使用。无序列表有3种前缀，HX里分别用于表示1级列表、2级列表、3级列表。无序列表1 【快捷键：Ctrl+Alt+-；智能双击：双击-号可选中整段无序列表；再次按Tab会更换二级列表符】无序列表2Emmet：li后敲Tab可生成*号列表符，行首生效快捷键：Ctrl+Alt+8【8即*对应的数字】，支持多光标批量设置列表符，即按Ctrl+鼠标左键添加多光标智能双击：双击*号可选中整段无序列表智能回车：行尾回车或行中Ctrl+Enter强制换行后会自动续列表；连续按回车会清除列表符；再次按Tab会更换列表符；在列表符后回车或行尾Shift+回车，上一行留出列表符*号常用于二级列表，列表符后继续Tab，可切换列表符无序列表3 【快捷键：Ctrl+Alt+=；常用于三级列表；其他同上】任务列表任务列表非常实用，管理待办、已办非常便利。[ ] 任务列表-未完成任务 【快捷键：Ctrl+Alt+[】[x] 任务列表-已完成任务 【快捷键：Ctrl+Alt+]】智能双击：双击方括号内可切换勾选状态，把任务标记为完成或未完成；双击方括号右侧可选中任务列表段落智能回车：回车后自动补任务列表前缀符号；连续按回车清除前缀符号；在列表符后回车或行尾Shift+回车，上一行留出列表符[ ] 如需发布到web渲染，需增加无序列表- 的前缀以上三种列表，均支持批量修改列表符，有如下方式建议依次学习尝试：选中多行，按快捷键Ctrl+Alt+“1”或“-”或“[”或“]”，批量设置列表符如果需要跳行设置有序或无序列表，通过Ctrl+鼠标左键点中目标多行（可不连续），产生多光标，然后…

增强版 CSS 框架使用文档
type: item
date: 2025-10-25T03:39:00+00:00
description: 增强版 CSS 框架使用文档目录1. 框架概述2. 快速开始3. 全局变量3.1 颜色系统3.2 字体系统3.3 边框系统3.4 间距系统3.5 阴影系统3.6 过渡与动画4. 网格系统4.1 容器4.2 行4.3 列4.4 响应式断点4.5 列偏移4.6 列排序5. 工具类5.1 显示控制5.2 布局工具5.3 间距工具5.4 边框工具5.5 文本工具5.6 背景工具5.7 过渡与动画工具5.8 其他工具6. 示例6.1 基础布局示例6.2 响应式布局示例6.3 组件样式示例1. 框架概述 {#1-框架概述}本框架是一个功能完整的 CSS 工具集，提供了全面的样式解决方案，包括：灵活的 12 列网格系统，支持多断点响应式设计完整的全局变量系统，便于主题定制丰富的工具类，覆盖布局、间距、边框、文本等场景统一的过渡与动画效果，提升用户体验标准化的基础样式重置，确保跨浏览器一致性框架设计遵循 "移动优先" 原则，通过清晰的命名规范和模块化结构，使开发者能够快速构建一致、美观的界面。2. 快速开始引入框架将框架 CSS 文件引入到 HTML 文档的 中：\ 基础结构一个典型的页面结构如下：\ \ \ \ \ \ 框架示例\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ 3. 全局变量框架使用 CSS 变量（Custom Properties）定义全局样式，所有变量都在:root选择器下声明，便于统一修改和主题定制。3.1 颜色系统主题色\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;背景色\--color-background: #ffffff; /\* 主要背景色 \*/ \--color-background-alt: #f9fafb; /\* 交替背景色 \*/ \--color-background-hover: #f3f4f6; /\* 悬停背景色 \*/ \--color-background-active: #e5e7eb; /\* 激活背景色 \*/ \--color-background-card: #ffffff; /\* 卡片背景色 \*/ \--color-background-modal: #ffffff; /\* 模态框背景色 \*/ \--color-background-overlay: rgba(0, 0, 0, 0.5); /\* 遮罩层背景色 \*/文本色\--color-text: #000000; /\* 主要文本色 \*/ \--color-text-light: #374151; /\* 浅色文本 \*/ \--color-text-lighter: #6B7280; /\* 更浅文本 \*/ \--color-text-muted: #3d3d3d; /\* 次要文本 \*/ \--color-text-disabled: #9CA3AF; /\* 禁用文本色 \*/ \--color-text-inverse: #ffffff; /\* 深色背景上的文本 \*/功能色（状态色）\--color-success: #52c41a; /\* 成功色 \*/ \--color-warning: #fa8c16; /\* 警告色 \*/ \--color-danger: #ff4d4f; /\* 危险/错误色 \*/ \--color-info: #4096ff; /\* 信息色 \*/中性色系提供从--color-neutral-50（最浅）到--color-neutral-950（最深）的完整中性色阶，满足各种场景需求。七色调全色系包含红、橙、黄、绿、青、蓝、紫七个色系，每个色系都有从 50 到 950 的色阶变化，如：/\* 红色系示例 \*/ \--color-red-50: #fff5f5; \--color-red-100: #ffe3e3; /\* ... 中间色阶省略 ... \*/ \--colo…