返回首页
Rixum | 移动优先个人作品集模板 — Free HTML5 Tailwind CSS Website Template Preview
悬停可滚动预览
Creative & Media 4.9 MB 版本: 1.0.0

Rixum — 免费Creative & Media网站模板

Rixum 是一款免费的创意与媒体类 HTML 模板,采用 HTML5、Tailwind CSS 和原生 JavaScript 构建。包体大小为 4.9 MB,包含七个页面:index、about、blog、contact、projects、rixum 和 services。CSS 手写代码与 Tailwind 工具类并存,唯一使用的外部库是 Google Fonts。模板附带二十张本地图片,并包含用于线索收集的联系方式或新闻订阅 HTML 表单。

索引页按清晰区块组织:个人简介标题、主要成就、设计师介绍、服务报价、作品集亮点、客户评价、合作企业以及最新博客预览。语义化标记与合理的留白保持结构整洁、易于浏览。不依赖任何 JavaScript 框架或第三方统计追踪器,仅提供简洁的 HTML、CSS 与轻量交互效果。

主要功能

  • 移动优先网格布局
  • 交互式项目展示
  • 嵌入式预约日历
  • 深色模式优化
技术栈 HTML5, Tailwind CSS, JavaScript
发布日期 2026-07-05
许可证 免费(须保留页脚署名链接)

适用场景

适合自由职业设计师、摄影师、插画师和创意总监,希望以简洁现代的方式展示作品集。不适合需要复杂电商功能或博客系统的网站。

包含页面区块

此模板包含一个带有英雄区域、知名成就展示、设计师服务概览、服务费用列表、创意设计作品集画廊、客户反馈评价、值得信赖的公司展示以及最新文章流的主页。额外的独立页面涵盖关于、项目、服务、博客、联系页面,以及专门的 Rixum 品牌页面。网站还配有包含社交链接的页脚,以及集成在联系板块中的新闻订阅功能。导航横跨全部七个 HTML 文件,页头标记一致,采用 Tailwind 响应式布局模式。

推荐理由

Rixum 在不强制付费升级基础功能的前提下,提供完整的多页创意作品集方案。手写 CSS 与 Tailwind 工具类的结合让开发者既能控制样式,又保持文件结构清晰可读。七页布局开箱即用地覆盖作品集、服务介绍、博客与联系方式等需求,内置表单无需后端即可快速支持线索收集。

技术规格

需配合标准构建流程使用 Tailwind CSS v3.2。通过 PostCSS 与 autoprefixer 保证浏览器兼容性。在 tailwind.config.js 中以 HEX 或 HSL 值自定义颜色与间距。支持 VS Code 搭配 Tailwind CSS 插件进行实时预览。无需 React、Vue 或任何框架构建步骤——纯静态 HTML、CSS 与 JavaScript 即可运行。

理想使用场景

独立平面设计师与小型创意工作室可将 Rixum 部署为个人作品集或机构落地页。七个页面涵盖项目展示、服务定价、客户证言与博客——非常适合需要专业线上形象却不想维护 CMS 的自由职业者。联系表单可通过 Formspree 将提交路由至任意接口,站点还可零成本静态托管于 Netlify 或 GitHub Pages。

性能评分

Performance
90
Accessibility
90
Best Practices
100
SEO
83
-- 次浏览 -- 次下载
在 GitHub 上查看源码

常见问题

运行此模板本地需要任何构建步骤吗?
不需要任何构建工具。直接在浏览器中打开 index.html 即可。模板通过 CDN 使用 Tailwind CSS,并从各自 CDN 加载 Google Fonts,无需编译或安装命令即可立即运行。
我可以用自己的项目截图替换本地图片吗?
可以。20 张本地图片均为占位图。只需将 HTML 标记和 CSS 引用中的文件路径替换为您自己的图片 URL 或本地文件即可。模板结构不强制要求任何特殊命名规范。
联系方式表单是如何构建的,位于何处?
联系表单位于 contact.html 页面,采用姓名、邮箱和留言字段的标准输入布局。它使用新闻通讯风格表单模式,语义化 HTML5 表单元素包裹在用于间距和布局的 Tailwind 工具类中。
导航是否在全部七个页面上保持一致?
是的。每个 HTML 页面共享相同的导航结构,链接到 index、about、projects、services、blog 和 contact。页头标记在所有七个页面中重复出现,锚点目标和基于类的样式完全相同。
默认字体族是什么,如何加载?
模板通过文档头部中的链接样式表加载 Google Fonts。CSS 在 Tailwind 配置中按声明的字体名称引用 font-family。除了每个页面中已存在的 CDN 链接之外,无需任何其他配置。