用Cursor可快速搭建作品集页面:创建index.html并自动补全HTML5结构,用Emmet生成响应式作品卡片和导航栏,添加锚点实现跳转,右键开启实时预览,最后导出静态站点。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

用Cursor快速搭建一个能展示设计稿、代码片段和项目介绍的作品集页面,不需要配置Webpack或写一堆配置文件,直接在编辑器里边写边预览。
创建基础HTML结构
新建一个名为index.html的文件,顶部写上标准HTML5文档声明和基础骨架。
输入<!doctype html>→回车→输入<html lang="zh-CN">→按Tab自动补全head/body结构。Cursor会提示你补全meta标签,选charset=utf-8和viewport这两项即可。
在<body>内第一行敲main,按Tab触发Emmet缩写,生成<main></main>容器——这是作品集内容的主区域,后续所有模块都放在这里。
插入响应式作品卡片
把鼠标光标放在<main>内部,输入.card*3→按Tab,Cursor自动生成3个带class="card"的div块。
每个<div class="card">里依次填入:一张图片占位符(用img[src="placeholder.jpg"][alt="项目截图"]→Tab)、一个h3标题(写项目名)、一段p描述(写技术栈和一句话亮点)。
注意:图片路径先用占位符,等实际上传资源后再替换;【alt属性必须写,否则无障碍访问会失败】。
Agents 正在你的整个代码库中处理越来越复杂、运行时间更长的任务。本次版本引入了新的 agent 框架改进,以实现更好的上下文管理,并在编辑器和 CLI 中带来了许多提升使用体验的修复。
添加导航栏与返回锚点
在<body>开头、<main>上方插入导航栏代码:
输入nav>ul>li*4>a[href="#"]{项目}+{关于}+{博客}+{联系}→按Tab,Cursor展开为带链接的无序列表。
把第1个a的href改成#work,并在<main>开头加上id="work"——这样点击“项目”就能跳转到作品区。
这一步操作起来很简单,直接把文件拖进去就行。但若漏掉id匹配,点击导航不会滚动,得手动检查href和id是否完全一致(包括大小写和符号)。
启用实时预览并导出静态页
右键点击index.html文件 → 选择「Open Preview」,Cursor会在右侧弹出实时渲染窗口。
修改任意HTML或CSS时,预览窗自动刷新,不用手动F5。
确认效果满意后,在命令面板(Ctrl+Shift+P)输入「Export Static Site」→回车,选择输出目录,Cursor会生成含HTML、CSS、JS和资源文件的完整文件夹。

















