【读书笔记《Bootstrap 实战》】6.单页营销网站

我们已经掌握了很多实用 Bootstrap  的重要技能。现在，是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了。此次将带领大家做一个漂亮的单页高端营销网站。

主要任务如下：

□ 一个大型介绍性传送带图片展示区，配有自定义的响应式欢迎信息；

□ 一个客户留言区，显示为带标题的图片墙，就像砖垒的一样；

□ 一个功能清单，使用大号 Font Awesome 图标；

□ 一个带有自定义价目表的注册区；

□ 一个带动态滚动的 ScrollSpy 导航条。

1.概况

有一位潜在客户联系我们，她深深爱上了一种漂亮的网站，就是那种可以垂直滚动，以强烈的视觉冲击力展示商品，最后还有一个突出的行动召唤按钮的单页网站。她想让你做一个。

这位客户知识渊博、目光如炬。她经常光顾 https://onepagelove.com/，并且收集了一堆最喜欢的功能，包括：

□ 一个清新，具有现代美的网站；

□ 一条介绍性的欢迎语，打在吸引人的背景图片上；

□ 一个高效的商品展示区，用醒目的图标来突出；

□ 精致的客户留言板，深具视觉冲击力；

□ 三个能让客户一目了然的价目表，方便选择，快捷注册；

□ 不断沟通！一切都在吸引用户一步一步向下看，让人几乎无法拒绝点击最后的注册按钮。

为了保持她未来产品的神秘感，我们的客户没有为我们提供实际的商品和服务图。她给了我们一个设计图，设计图中使用了占位图片。

第一部分将是一张横贯全屏的高清图片，上面有一条大大的欢迎语，以及一个邀请向下滚动阅读的按钮，如下图所示：

第二部分将列出商品的六个重要功能，分成三栏，并配备了相应的图标，如下图所示：

第三部分展示客户的赞誉，有图片，有文字，以图片墙形式呈现：

第四部分也是最后一部分，提供了三个可以选的方案，每个方案对应相对的报价，同时在视觉上突出中间的报价方案，如下图所示：

 真是一位与时俱进的客户，所以她最后还要求我们的方案必须完美地适应平板电脑和智能手机。

2.初始文件

跟前面几篇文章一样，文件的核心是 Bootstrap 3 LESS、JavaScript和按照要求组织的标记，搭配了 HTML5  Boilerplate 和 Font Awesome 图标字体。

项目的文件夹和上一章的项目保持一致。下面我们简单回顾下 LESS 文件。

□ 默认的 Bootstrap 文件位于 /less/bootstrap/文件夹。

□ Font Awesome 图标字体的 LESS 文件位于 /less/font-awesome/ 。

□ 我们自定义的 LESS 文件就在less 文件夹中，以下划线开头，一眼就能看出来。自定义的 LESS 文件如下：

  ■ __main.less：这是导入所有其他文件的主文件，应该把它编译为 css/main.css；

  ■ _variables.less：这个文件基于 Bootstrap 定义的变量新增了一些变量；

  ■ _navbar.less：这个文件包含导航条的自定义样式；

  ■ _page-content.less：这个文件包含页面内容区的自定义样式；

  ■ _footer.less：这个文件包含页脚的自定义样式。

3.了解页面内容

根据需求，我们可以把页面分为六部分：

□ 固定在顶部的导航条；

□ 带一句大号欢迎语的高清图；

□ 功能介绍，包括图标、标题、文字，分为三栏；

□ Impact 部分是成功用户的照片，占位文本代表他们的赞誉；

□ Sign up Now!部分是三张价目表，包括Basic Plan、 Premium Plan 和 Pro Plan，每个下面都有一个 Sign up Now! 按钮；

□ 页脚的 Logo。

<header role="banner"></header><div role="main">  <!-- INTRO SECTION --> <section id="welcome" ></section> <!-- FEATURES SECTION --> <section id="features"></section> <!-- IMPACT SECTION --> <section id="impact" ></section> <!-- SIGNUP SECTION --> <section id="signup" ></section></div><footer role="contentinfo"></footer>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：【读书笔记《Bootstrap 实战》】6.单页营销网站

关键词：