HTML企业官网启动器

singlePageStarter — HTML 企业官网模板

作者 zyadsherif

singlePageStarter 是一个面向单页营销网站的 HTML 启动模板,基于 Sass 组织样式,内置滚动动画 jQuery 插件、移动优先的响应式栅格系统、扁平按钮与基础表单样式。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

基于 Sass 组织样式,全局设置集中在单个 settings.scss 中修改

02

组件按类别拆分到独立 SASS 文件,可按需增删

03

内置轻量 jQuery 滚动动画插件,通过 data-id 与 data-speed 属性控制

04

移动优先的响应式栅格系统,支持四个断点、偏移、推拉与居中,并支持 RTL

05

提供扁平风格按钮与基础表单样式

模板详细介绍

singlePageStarter 是一个单页营销网站(Single Page marketing website)的启动模板,仓库以 HTML 为技术栈,样式基于 Sass 编写。它的目标不是提供完整成品站点,而是给出一个可自由裁剪的轻量骨架:所有组件按类别拆分到各自的 SASS 文件中,可以按需增删;颜色方案等全局设置集中在单个 settings.scss 文件里修改。README 说明模板不绑定具体前端框架,可以搭配 Foundation、Bootstrap、Gumby 等使用。

模板包含几个可直接复用的部分。滚动动画由一个轻量 jQuery 插件实现,通过锚点标签上的 data 属性触发:data-id 为必填,对应目标元素的 ID;data-speed 为可选,用于设置滚动到目标元素的动画速度,默认约为 2.5 秒。栅格系统为移动优先的响应式栅格,支持 RTL,提供四个断点,并包含列、偏移、推拉(source ordering)和居中能力,类名形如 col-md-6、offset-lg-6、push-sm-6、pull-sm-6 以及 col-sm-6.centered。按钮为扁平风格,主类为 button,配合 .large、.small、.expand、.radius、.round、.primary、.secondary、.alert、.success 等修饰类使用。表单部分仅有基础样式,README 明确说明当前没有额外类,后续再补充。

使用限制方面,README 自述这是一个起步骨架,表单样式较简单,更多组件属于作者的未来计划,取决于其个人时间安排,因此不应期待开箱即用的完整业务组件库。仓库的最近更新时间较早,资料中未提供依赖清单,无法据此核对具体框架或库的版本。许可方面,仓库采用 Apache-2.0,可免费使用、修改、商用和分发,分发时需随附许可证并保留相关声明;演示图片、字体、图标等第三方素材需单独核对其许可。

HTML企业官网启动器

适合你的项目吗?

适用场景

  • 制作单页产品介绍或营销落地页的初始骨架
  • 需要带锚点滚动动画的单页导航结构
  • 需要 RTL 支持或移动优先栅格布局的页面
  • 在已有栅格体系之外搭配 Bootstrap、Foundation 等框架使用

适合人群

  • 希望从轻量 HTML/Sass 骨架开始搭建单页营销网站的前端开发者
  • 需要按需裁剪组件、自行控制样式结构的项目
  • 需要 RTL 或移动优先栅格布局的页面

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    样式基于 Sass,需在修改前确认本地具备 Sass 编译环境

  2. 2

    全局颜色与设置统一在 settings.scss 中调整

  3. 3

    滚动动画依赖 jQuery,使用前需引入 jQuery

  4. 4

    表单仅有基础样式,README 说明当前没有额外类

  5. 5

    演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 Apache-2.0 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发;分发时需随附 Apache-2.0 许可证。
  • 修改过的文件需显著标明改动,并保留相关版权、专利、商标及归属声明。
  • 若原项目附有 NOTICE 文件,分发衍生作品时需保留其中适用的归属声明。
  • 许可包含适用的贡献者专利授权;发起许可所述专利诉讼会终止该专利授权,且不授予商标使用权。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 模板不绑定特定前端框架,可自行搭配 Foundation、Bootstrap、Gumby 等框架使用,但需自行引入并遵守这些框架各自的许可。
  • 表单仅有基础样式,当前没有额外类,后续补充取决于作者时间,不应期待开箱即用的完整表单组件。
  • 更多轻量组件属于作者未来计划,取决于其个人时间安排,不保证提供,不应视为已具备完整组件库。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 Apache-2.0 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

no-charge, royalty-free, irrevocable copyright license

许可证原文

you may also usr any framework you want like Foundation - Bootstrap - Gumby

README 原文

currently have no additional classes, will add some as soon as I have time.

README 原文

I may add some lightweight components in the future but that depends on how much time I will get for myself.

README 原文
https://github.com/zyadsherif/singlePageStarter/blob/master/LICENSEhttps://github.com/zyadsherif/singlePageStarter/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 70 / 100
技术栈
HTML
网站类型
企业官网 · 启动器
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2013-11-05
截图检查日期
2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 76b672e9608ce7e305c40542675734d9355f707437769e2f5e65eb4213210364

2026-10-03T16:39:02.475Z

来源文件 / 仓库
SinglePageStarter
=================

A starter template for Single Page marketing websites that will git you off and running with the scroll animations enhanced with a very customisable grid system and some nice predefined buttons, checkout the working [demo](http://zyadsherif.github.io/singlePageStarter/ "Single Page Starter Template")

Sass based, you can easily edit the color scheme and remove components as you wish, you may also usr any framework you want like Foundation - Bootstrap - Gumby

#CSS Structure

Everything in this lightweight skeleton/template can be changed from a single SASS file, settings.scss

You will also find every set of componenets organized in its own SASS file to easily plug in/out the components you need.

##Easy Scroll Animation

I've created a very lightweight cross-browser jQuery plugin that will add on page scroll functionality to any anchor tag using data attributes.

Example: 

```html
<a href="#" data-id="about" data-speed="3000">Link</a>
```

The above example shows that it uses two data attributes one is mandatory and it's the data-id and the value is equivelant to the desired elemnt ID, the other is optional if you want to set the speed of the animation until it reaches the target element, the default is slow =~ to 2.5 seconds


##Grid System

A fully responsive "MOBILE FIRST" editable grid system much like Twitter Bootstrap's but with RTL support

In a nutshell, everything you would expect from a grid system it shall serve (Four breakpoints - Source Ordering Push/Pull - Offset - Centering)

Syntax is as follows:

+ col-[sm/md/lg]-NUMBER .. for example-> col-md-6 = [Six columns in medium screens]

+ offset-[sm/md/lg]-NUMBER .. for example-> offset-lg-6 = [Six columns margin on large screens]

+ push-[sm/md/lg]-NUMBER .. for example-> push-sm-6 = [Push Six columns in small screens]

+ pull-[sm/md/lg]-NUMBER .. for example-> pull-sm-6 = [Pull Six columns in small screens, will switch places with the above element]

+ col-sm-6.centered .. this will center the block in the middle of the page

##Buttons

Very simple flat buttons that are highly customizable just to get you going

Syntax is as follows:

button is the main class
.large, .small, .expand, .radius, .round, .primary, .secondary, .alert, .success

All are self explanatory.


##Forms

Same as buttons they are just very basicly styled form items and currently have no additional classes, will add some as soon as I have time.


###Future plans

I may add some lightweight components in the future but that depends on how much time I will get for myself.




反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。