响应式-Web-设计指南-全-
响应式 Web 设计指南(全)
原文:
zh.annas-archive.org/md5/50CFC4166B37BD720D7E83B7A7DE4DFD
译者:飞龙
前言
响应式网页设计已经席卷了网页设计行业。这不是一个潮流,而是一种规范;现在人们通常期望网站是响应式的。你可能已经在博客、论坛、Facebook 和 Twitter 上读到并参与了很多关于响应式网页设计的讨论。同样,你希望你的网站也是响应式的,以便在任何屏幕尺寸上都能呈现出色。因此,这就是你要找的书。
本书教你如何通过示例、技巧和最佳实践来构建出色的响应式网站,并且教你如何编写代码和组织项目。此外,你还将学习如何使用 CSS 预处理器 LESS 和 Sass,这可以让你编写更精简的样式规则。
本书涵盖内容
第一章, 响应式网页设计,探讨了响应式网页设计背后的基本原则,解释了构建响应式网站的基本技术,并介绍了一些响应式框架以及使用它们的优势。
第二章, 网页开发工具,帮助你准备、安装和设置软件来运行项目和构建响应式网站。
第三章, 使用 Responsive.gs 构建简单响应式博客,介绍了 Responsive.gs 框架,并使用多个 HTML5 元素和 Responsive.gs 网格系统构建了博客的 HTML 结构。
第四章, 增强博客外观,编写 CSS 样式规则来增强博客的外观和感觉。你还将学习如何使用部分样式表模块化管理博客样式,并将它们编译到一个单一样式表中。
第五章, 使用 Bootstrap 开发作品集网站,使用 Bootstrap 框架组件构建作品集网站,包括网格系统、按钮和表单。我们还将学习如何使用 Bower 来管理项目库。
第六章, 使用 LESS 打磨响应式作品集网站,探讨并教授了使用多个 LESS 特性,比如嵌套、变量和混合,来编写更精简和可重用的样式规则,最终打磨出响应式作品集网站。
第七章, 使用 Foundation 构建响应式商务网站,使用 Foundation 框架的网格系统和组件为创业企业构建一个响应式网站。
第八章, 扩展 Foundation,教你如何使用 Sass 和 SCSS 语法,比如变量、混合和函数,来编写可维护和可重用的响应式创业网站的样式。
附录, 测验答案,包含了本书中多项选择测验的答案。
你需要准备什么
你需要对 HTML 和 CSS 有基本的了解;至少,你应该知道什么是 HTML 元素,以及如何用 CSS 对 HTML 元素进行基本的样式设置。对 HTML5、CSS3 和命令行有一定的熟悉和经验,虽然不是必需的,但会对本书的最大收益有很大帮助。我们将详细解释每一步和所有的技巧,以及一些实用的提示和参考资料。
此外,你还需要一台运行 Windows、OS X 或 Ubuntu 的计算机;一个互联网浏览器(最好是 Google Chrome 或 Mozilla Firefox);以及一个代码编辑器(在本书中,我们将使用 Sublime Text)。
本书适合谁
通过实例学习响应式网页设计初学者指南第二版通过实际示例教读者如何构建出色的响应式网站,并通过深入的解释逐步引导读者完成整个过程。这是一本完美的书,适合任何想要快速学习和构建响应式网站的人,无论读者的熟练程度如何,即新手或经验丰富的网页设计师。
部分
在本书中,您会经常看到几个标题(行动时间,刚刚发生了什么?,快速测验和尝试)。
为了清晰地说明如何完成一个过程或任务,我们使用以下部分:
行动时间 - 标题
-
行动 1
-
行动 2
-
行动 3
指示通常需要一些额外的解释,以确保它们有意义,因此它们后面跟着这些部分:
刚刚发生了什么?
本节解释了您刚刚完成的任务或指示的工作方式。
您还会在书中找到一些其他学习辅助工具,例如:
快速测验 - 标题
这些是旨在帮助您测试自己理解的简短的多项选择题。
尝试一下英雄 - 标题
这些是实际的挑战,给您提供了实验您所学内容的想法。
约定
您还会发现一些文本样式,用于区分不同类型的信息。以下是这些样式的一些示例及其含义的解释。
文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄显示如下:“Responsive.gs 附带的boxsizing.htc
文件将应用与 CSS3box-sizing
属性相似的功能。”
代码块设置如下:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/scripts/boxsizing.htc);
}
当我们希望引起您对代码块的特定部分的注意时,相关行或项目会以粗体显示:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/scripts/boxsizing.htc);
}
任何命令行输入或输出都以以下方式编写:
cd \xampp\htdocs\portfolio
bower init
新 术语和重要 单词以粗体显示。例如,屏幕上看到的单词,例如菜单或对话框中的单词,会出现在文本中,如下所示:“检查Source Map选项,以生成样式表的源映射文件,在调试时会对我们有所帮助。”
注意
警告或重要说明会出现在这样的框中。
提示
提示和技巧会出现在这样的样式中。
第一章:响应式网页设计
我仍然记得,小时候,手机只有一个微小的单色屏幕。那时我们能做的只是打电话、发短信和玩简单的游戏。如今,移动设备在许多方面都有了巨大的进步。
新的移动设备具有不同的屏幕尺寸;一些甚至具有更高的 DPI 或分辨率。大多数新的移动设备现在配备了触摸屏,使我们可以方便地使用手指轻触或滑动与设备进行交互。屏幕方向可以在纵向和横向之间切换。与旧设备相比,软件也更加强大。特别是移动浏览器现在能够呈现和显示与桌面电脑浏览器一样好的网页。
此外,过去几年移动用户的数量激增。现在我们可以看到周围有很多人花费数小时使用他们的移动设备,手机或平板电脑,进行诸如在外出时经营业务或简单的互联网浏览等活动。移动用户的数量未来可能会继续增长,甚至可能超过桌面用户的总数。
也就是说,移动设备改变了网络,改变了人们使用互联网和享受网站的方式。移动设备的这些进步和不断增长的移动互联网使用量引发了一个新的构建网站的范式的问题,即如何在不同情况下构建可访问且功能良好的网站。这就是响应式网页设计的用武之地。
在本章中,我们将涵盖以下主题:
-
简要了解响应式网页设计、视口 meta 标签和 CSS3 媒体查询的基础知识
-
在接下来的章节中,我们将使用响应式框架来构建响应式网站
简而言之,响应式网页设计
响应式网页设计是网页设计和开发社区中讨论最多的话题之一。因此,我相信你们很多人对它有一定程度的了解。
伊桑·马科特是首次提出“响应式网页设计”这个术语的人。他在他的文章响应式网页设计(alistapart.com/article/responsive-web-design/
)中建议,网页应该无缝地调整和适应用户查看网站的环境,而不是专门针对特定平台进行处理。换句话说,网站应该是响应式的,无论在哪种屏幕尺寸上查看,都应该能够呈现。
以时代网站(time.com/
)为例。网页在桌面浏览器上的大屏幕上和移动浏览器上的有限可视区域上都能很好地适应。布局会随着视口大小的变化而变化和适应。如下截图所示,在移动浏览器上,标题的背景颜色是深灰色,图片按比例缩小,并且出现了一个“点击”栏,时代隐藏了最新新闻、杂志和视频栏目:
构建响应式网站有两个组成部分,即视口 meta 标签和媒体查询。
视口 meta 标签
在智能手机如 iPhone 成为主流之前,每个网站都是建立在大约 1000 像素宽或 980 像素宽的基础上,然后缩小以适应手机屏幕,最终导致网站无法阅读。因此,<meta name="viewport">
被创建出来。
简而言之,视口meta
标签用于定义浏览器中网页的比例和可见区域(视口)。以下代码是视口 meta 标签的示例:
<meta name="viewport" content="width=device-width, initial-scale=1">
上述视口meta
标签规范将网页视口宽度定义为跟随设备。它还定义了在首次打开网页时网页缩放为 1:1,使得网页内容的大小和尺寸保持不变;它们不应该被放大或缩小。
为了更好地理解视口 meta 标签对网页布局的影响,我创建了两个网页进行比较;一个添加了视口 meta 标签,另一个没有。您可以在以下截图中看到差异:
在上图中显示的第一个网站使用了与我们之前代码示例中完全相同的视口 meta 标签规范。由于我们指定了width=device-width
,浏览器会认识到网站视口与设备屏幕大小相同,因此不会压缩网页以适应整个屏幕。initial-scale=1
将保持标题和段落的原始大小。
在第二个网站的示例中,由于我们没有添加视口meta
标签,浏览器假定网页应该完全显示。因此,浏览器强制整个网站适应整个屏幕区域,使得标题和文本完全不可读。
关于屏幕大小和视口的说明
您可能在许多网页设计论坛或博客上发现视口和屏幕大小经常可以互换地提到。但实际上,它们是两个不同的东西。
屏幕大小指的是设备的实际屏幕大小。例如,13 英寸的笔记本电脑通常具有 1280*800 像素的屏幕大小。而视口描述的是浏览器中显示网站的可视区域。以下图示说明了这一点:
媒体查询
CSS 中的媒体类型模块使我们能够将样式规则定位到特定的媒体上。如果您以前创建过打印样式表,那么您肯定熟悉媒体类型的概念。CSS3 引入了一个称为媒体查询的新媒体类型,它允许我们在指定的视口宽度范围内应用样式,也被称为断点。
以下是一个简单的例子;当网站的视口大小为480px
或更小时,我们将网站的p
字体大小从16px
减小到14px
。
p {
font-size: 16px;
}
@media screen and (max-width: 480px) {
p {
font-size: 14px;
}
}
以下图示说明了上述代码:
我们还可以使用and
运算符结合多个视口宽度范围。根据我们之前的例子,我们可以将p
字体大小设置为14px
,当视口大小在480px
和320px
之间时,如下所示:
@media screen and (min-width: 320px) and (max-width: 480px) {
p {
font-size: 11px;
}
}
注意
视口和媒体查询参考
在构建响应式网站时,我们将处理视口 meta 标签和媒体查询。Packt Publishing 出版了一本专门的书籍,使用 HTML5 和 CSS3 构建响应式网页设计,Ben Frein,Packt Publishing,其中更详细地介绍了这两个方面。我建议将其作为本书的伴读书籍。
对响应式框架的一瞥
构建响应式网站可能是非常繁琐的工作。在构建响应式网站时需要考虑许多测量标准,其中之一就是创建响应式网格。
网格帮助我们构建具有正确对齐的网站。如果您以前使用过 960.gs(960.gs/
),这是一个流行的 CSS 框架之一,您可能已经体验过通过在元素中添加预设类(如grid_1
或push_1
)来组织网页布局是多么容易。
然而,960.gs 网格是以固定单位像素(px
)设置的,这在构建响应式网站时是不适用的。我们需要一个以百分比(%
)单位设置网格的框架来构建响应式网站;我们需要一个响应式框架。
响应式框架提供了构建响应式网站的基本组件。通常,它包括用于组装响应式网格的类、用于排版和表单输入的基本样式,以及一些样式来解决各种浏览器的怪癖。一些框架甚至通过一系列样式进一步创建常见的设计模式和网页用户界面,如按钮、导航栏和图像滑块。这些预定义的样式使我们能够更快地开发响应式网站,减少麻烦。以下是使用响应式框架构建响应式网站的几个其他原因:
-
浏览器兼容性: 确保网页在不同浏览器上的一致性真的比开发网站本身更令人痛苦和苦恼。然而,有了框架,我们可以最小化处理浏览器兼容性问题的工作。框架开发人员很可能在公开发布之前在各种桌面浏览器和移动浏览器上测试了框架,这些浏览器环境最受限制。
-
文档: 一般来说,框架还附带有全面的文档,记录了使用框架的方方面面。文档对于初学者开始学习框架非常有帮助。当我们与团队合作时,文档也是一个很大的优势。我们可以参考文档让每个人都在同一页面上,并遵循标准的编码规范。
-
社区和扩展: 一些流行的框架,如 Bootstrap 和 Foundation,有一个活跃的社区,帮助解决框架中的错误并扩展功能。jQuery UI Bootstrap (
jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/
)可能是一个很好的例子。jQuery UI Bootstrap 是一组 jQuery UI 小部件的样式,以匹配 Bootstrap 原始主题的外观和感觉。现在很常见的是找到基于这些框架的免费 WordPress 和 Joomla 主题。
在本书的过程中,我们将使用三种不同的响应式框架 Responsive.gs、Bootstrap 和 Foundation 构建三个响应式网站。
响应式.gs 框架
Responsive.gs (responsive.gs/
)是一个轻量级的响应式框架,压缩后仅为 1KB。Responsive.gs 基于宽度为 940px,并以 12、16 和 24 列的三种变体构建。此外,Responsive.gs 还附带了 box-sizing polyfill,它在 Internet Explorer 6、7 和 8 中启用了 CSS3 的 box-sizing,并使其在这些浏览器中表现得体面。
注意
Polyfill 是一段代码,它使某些 Web 功能和能力在浏览器中不是原生内置的情况下能够使用。通常,它解决了旧版本的 Internet Explorer 的问题。例如,您可以使用 HTML5Shiv (github.com/aFarkas/html5shiv
),以便在 Internet Explorer 6、7 和 8 中识别新的 HTML5 元素,如<header>
、<footer>
和<nav>
。
关于 CSS 框模型的说明
被归类为块级元素的 HTML 元素本质上是通过 CSS 绘制的具有内容宽度、高度、边距、填充和边框的框。在 CSS3 之前,我们在指定框时面临着一些限制。例如,当我们指定一个<div>
标签的宽度和高度为100px
时,如下所示:
div {
width: 100px;
height: 100px;
}
浏览器将div
呈现为100px
的正方形框,如下图所示:
然而,只有在没有添加填充和边框的情况下才会成立。由于框有四个边,填充为 10px(padding: 10px;
)实际上会为宽度和高度增加 20px——每个边增加 10px,如下图所示:
虽然它占据页面上的空间,但元素的边距空间是在元素外部保留的,而不是作为元素本身的一部分;因此,如果我们给元素设置背景颜色,边距区域将不会采用该颜色。
CSS3 盒模型
CSS3 引入了一个名为box-sizing
的新属性,它允许我们指定浏览器应如何计算 CSS 盒模型。我们可以在box-sizing
属性中应用几个值。
值 | 描述 |
---|---|
content-box |
这是盒模型的默认值。此值指定填充和边框框的厚度在指定的宽度和高度之外,正如我们在前面的部分中所演示的那样。 |
border-box |
此值将执行与content-box 相反的操作;它将包括填充和边框框作为盒子的宽度和高度。 |
padding-box |
在撰写本书时,此值是实验性的,并且最近才被添加。此值指定了盒子的尺寸。 |
在本书的每个项目中,我们将使用border-box
值,以便我们可以轻松确定网站的盒子尺寸。让我们以前面的例子来理解这一点,但这次我们将box-sizing
模型设置为border-box
。如前表所述,border-box
值将保留盒子的宽度和高度为100px
,而不管填充和边框的添加。下图显示了两种不同值的输出之间的比较,content-box
(默认值)和border-box
:
在本书中,我们将使用 Responsive.gs,并在接下来的两章中更多地探索它,以构建一个简单的响应式博客。
Bootstrap 框架
Bootstrap(getbootstrap.com/
)最初是由 Mark Otto(markdotto.com/
)开发,并最初仅用于 Twitter 内部使用。简而言之,Bootstrap 随后免费向公众发布。
注意
Bootstrap 长期以来一直与 Twitter 相关联,但自作者离开 Twitter 并且 Bootstrap 本身已经超出了他的预期,Bootstrap 现在成为了自己的品牌(blog.getbootstrap.com/2012/09/29/onward/
)。
如果参考最初的开发,响应式功能尚未添加。由于对创建响应式网站的需求不断增加,它在版本 2 中被添加。
Bootstrap 相比 Responsive.gs 还带有许多其他功能。它内置了预设的用户界面样式,包括网站上常用的按钮、导航栏、分页和表单等常见用户界面,因此在启动新项目时无需从头开始创建它们。此外,Bootstrap 还配备了一些自定义的 jQuery 插件,如图像滑块、轮播、弹出框和模态框。
您可以以多种方式使用和自定义 Bootstrap。您可以直接通过 CSS 样式表自定义 Bootstrap 主题及其组件,通过 Bootstrap 自定义和下载页面(getbootstrap.com/customize/
),或者使用 Bootstrap LESS 变量和混合,用于生成样式表。
在本书中,我们将在第五章中深入了解 Bootstrap,使用 Bootstrap 开发投资组合网站,以及第六章中,使用 LESS 打磨响应式投资组合网站,来构建一个响应式投资组合网站。
Foundation 框架
Foundation(foundation.zurb.com/
)是由总部位于加利福尼亚的设计机构 ZURB 创建的框架。与 Bootstrap 类似,Foundation 不仅是一个响应式 CSS 框架;它还附带了预设的网格、组件和许多 jQuery 插件,以呈现交互式功能。
一些知名品牌,如 McAfee(www.mcafee.com/common/privacy/english/slide.html
),这是最受尊敬的计算机防病毒品牌之一,已经使用 Foundation 构建了他们的网站。
Foundation 样式表由 Sass 提供支持,Sass 是基于 Ruby 的 CSS 预处理器。我们将在本书的最后两章中更多地讨论 Sass 以及 Foundation 的特性;在那里,我们将为一家初创公司开发一个响应式网站。
提示
有许多人抱怨响应式框架中的代码过多;由于 Bootstrap 等框架被广泛使用,它必须涵盖每种设计场景,因此会带有一些您网站可能不需要的额外样式。幸运的是,我们可以通过使用正确的工具(如 CSS 预处理器)和遵循适当的工作流程来轻松解决这个问题。
坦率地说,并没有完美的解决方案;使用框架并不适合每个人。一切都取决于您的需求、您网站的需求,特别是您客户的需求和预算。实际上,您将不得不权衡这些因素,以决定是否使用响应式框架。Jem Kremer 在她的文章Responsive Design Frameworks: Just Because You Can, Should You?(www.smashingmagazine.com/2014/02/19/responsive-design-frameworks-just-because-you-can-should-you/
)中对此进行了广泛讨论。
CSS 预处理器简介
Bootstrap 和 Foundation 都使用 CSS 预处理器来生成它们的样式表。Bootstrap 使用 LESS(lesscss.org/
)——尽管官方最近才发布了对 Sass 的支持。相反,Foundation 只使用 Sass 来生成其样式表(sass-lang.com/
)。
CSS 预处理器并不是一种全新的语言。如果您了解 CSS,您应该立即适应 CSS 预处理器。CSS 预处理器通过允许使用变量、函数和操作等编程功能来简单地扩展 CSS。
以下是我们使用 LESS 语法编写 CSS 的示例:
@color: #f3f3f3;
body {
background-color: @color;
}
p {
color: darken(@color, 50%);
}
提示
下载示例代码
您可以从您在www.packtpub.com
的帐户中下载您购买的所有 Packt Publishing 图书的示例代码文件。如果您在其他地方购买了本书,您可以访问www.packtpub.com/support
并注册,以便直接通过电子邮件接收文件。
当编译前面的代码时,它会取出我们定义的@color
变量并将其值放入输出中,如下所示:
body {
background-color: #f3f3f3;
}
p {
color: #737373;
}
该变量可在整个样式表中重复使用,这使我们能够保持样式一致性并使样式表更易于维护。
在构建响应式网站的过程中,我们将进一步使用和探索 CSS 预处理器 LESS 和 Sass,以及 Bootstrap(第五章, 使用 Bootstrap 开发作品集网站和第六章, 使用 LESS 打磨作品集网站)和 Foundation(第七章, 使用 Foundation 创建企业响应式网站和第八章, 扩展 Foundation)。
尝试一下——深入了解响应式网页设计
我们在这里对响应式网页设计的讨论虽然重要,但只是冰山一角。关于响应式网页设计,有很多内容超出了我们最近在前几节中涵盖的内容。我建议你花些时间更深入地了解响应式网页设计,包括概念、技术细节和一些限制,以消除任何疑虑。
以下是一些最佳参考资料的推荐:
-
Ethan Martcotte 的《Responsive Web Design》(
alistapart.com/article/responsive-web-design
),这是一切的开始 -
另一个好的起点是 Rachel Shillcock 的《Responsive Web Design》(
webdesign.tutsplus.com/articles/responsive-web-design--webdesign-15155
) -
Ian Yates 的《Don't Forget the Viewport Meta Tag》(
webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
) -
Rachel Andrew 的《How To Use CSS3 Media Queries To Create a Mobile Version of Your Website》(
www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
) -
阅读有关使用 HTML5 图片元素的响应式图片的未来标准的文章《Responsive Images Done Right: A Guide To
And srcset》作者是 Eric Portis ( www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
) -
一些使数据表响应式的方法的总结 (
css-tricks.com/responsive-data-table-roundup/
)
快速测验——响应式网页设计的主要组件
Q1. 在他的文章中,我们在本章中已经提到了两次,Ethan Marcotte 提到了构成响应式网站的主要技术要素。这些主要组件是什么?
-
视口元标记和 CSS3 媒体查询。
-
流体网格、灵活图片和媒体查询。
-
响应式图片、断点和 polyfills。
Q2. 什么是视口?
-
设备的屏幕尺寸。
-
网页呈现的区域。
-
设置网页视口大小的元标记。
Q3. 以下哪一种是声明 CSS3 媒体查询的正确方式?
-
@media (max-width: 320px) { p{ font-size:11px; }}
-
@media screen and (max-device-ratio: 320px) { div{ color:white; }}
-
<link rel="stylesheet" media="(max-width: 320px)" href="core.css" />
响应式网页设计的灵感来源
现在,在我们跳入下一章并开始构建响应式网站之前,花些时间寻找响应式网站的想法和灵感可能是个好主意;看看它们是如何构建的,以及在桌面浏览器和移动浏览器上布局是如何组织的。
网站经常重新设计以保持新鲜是很常见的事情。因此,我们最好直接去策划网站的网站,而不是制作一堆网站截图,因为由于重新设计,这些截图可能在接下来的几个月内就不再相关了,以下是去的地方:
-
MediaQueries (
mediaqueri.es/
) -
Awwwards (
www.awwwards.com/websites/responsive-design/
) -
CSS Awards (
www.cssawards.net/structure/responsive/
) -
WebDesignServed (
www.webdesignserved.com/
) -
Bootstrap Expo (
expo.getbootstrap.com/
) -
Zurb Responsive (
zurb.com/responsive
)
摘要
在本章中,我们简要介绍了响应式网页设计背后的故事,以及视口元标签和 CSS3 媒体查询,这些构成了响应式网站。本章还总结了我们将使用以下框架来进行三个项目的工作:Responsive.gs,Bootstrap 和 Foundation。
使用框架是快速建立响应式网站的更简单的方法,而不是从头开始构建所有内容。然而,正如前面提到的,使用框架也有一些负面影响。如果做得不好,最终结果可能会出现问题。网站可能会被填充并卡在不必要的样式和 JavaScript 中,最终导致网站加载缓慢且难以维护。
我们需要设置合适的工具;它们不仅会促进项目的进行,还将帮助我们使网站更易于维护,这就是我们将在下一章中要做的事情。
第二章:Web 开发工具
每个专业人士都有一套工具,可以简化他们的工作并完成任务。同样,我们也需要我们自己的工具来构建响应式网站。因此,在我们开始本书中的项目之前,我们需要准备以下工具。
我们需要准备的工具包括:
-
用于编写代码的代码编辑器
-
一个编译器,将编译 CSS 预处理器语法为纯 CSS
-
在开发阶段本地托管网站的本地服务器
-
一个 Bower 来管理网站库
选择一个代码编辑器
一旦我们开始编写 HTML、CSS 和 JavaScript 代码,我们就需要一个代码编辑器。代码编辑器是开发网站的必不可少的工具。从技术上讲,你只需要文本编辑器,比如 OS X 中的 TextEdit 或 Windows 中的记事本来编写和编辑代码。然而,使用代码编辑器可以减少眼睛的刺激。
类似于 Microsoft Word,专门设计用于使单词和段落格式更直观,代码编辑器设计有一组特殊功能,可以改善代码编写体验,如语法高亮、自动补全、代码片段、多行选择,并支持大量语言。语法高亮将以不同的颜色显示代码,增强代码的可读性,并使查找代码中的错误变得容易。
我的个人偏好是 Sublime Text(www.sublimetext.com/
),这也是我在这本书中将要使用的。Sublime Text 是一个跨平台的代码编辑器,适用于 Windows、OS X 和 Linux。可以免费下载进行无限期评估。
注意
请记住,虽然 Sublime Text 允许我们无限期免费评估,但有时可能会提示您购买许可证。如果你开始感到烦恼,请考虑购买许可证。
Sublime Text Package Control
我最喜欢 Sublime Text 的一件事是 Package Control,我们可以方便地从 Sublime Text 中搜索、安装、列出和删除扩展。但是,Package Control 并不是 Sublime Text 的预装软件。因此,假设你已经安装了 Sublime Text(我认为你应该已经安装了),我们将在 Sublime Text 中安装 Package Control。
行动时间-安装 Sublime Text Package Control
执行以下步骤安装 Sublime Text Package Control;这将允许我们轻松安装 Sublime Text 扩展:
-
在 Sublime Text 中通过 Sublime Text 控制台是安装 Package Control 的最简单方法。在 Sublime Text 中导航到View | Console菜单以打开控制台。现在你应该看到一个新的输入字段出现在底部,如下面的截图所示:
-
由于 Sublime Text 3 进行了大规模的改动,几乎改变了整个 API,Package Control 现在分为两个版本,一个是 Sublime Text 2,另一个是 Sublime Text 3。每个版本都需要不同的代码来安装 Package Control。如果你使用的是 Sublime Text 2,复制代码从
sublime.wbond.net/installation#st2
。如果你使用的是 Sublime Text 3,复制代码从sublime.wbond.net/installation#st3
。 -
将你从第 2 步复制的代码粘贴到控制台输入字段中,如下面的截图所示:
-
按下Enter运行代码,最终安装 Package Control。请记住,这个过程可能需要一段时间,具体取决于您的互联网连接速度。
刚刚发生了什么?
我们刚刚安装了 Package Control,可以轻松搜索、安装、列出和删除 Sublime Text 中的扩展。您可以通过命令面板…访问 Package Control,方法是导航到工具 | 命令面板…菜单。或者,您可以按键快捷方式更快地访问它。Windows 和 Linux 用户可以按Ctrl + Shift + P,而 OS X 用户可以按Command + Shift + P。然后,搜索命令面板…以列出 Package Control 的所有可用命令。
尝试一下-安装 LESS 和 Sass 语法高亮包
如第一章所述,我们将在本书的两个项目中使用这些 CSS 预处理器来编写样式。已经安装了 Sublime Text 和 Package Control,现在可以轻松安装 Sublime Text 包,以便为 LESS 和 Sass/SCSS 语法启用颜色高亮。继续并按照我们刚刚展示的说明安装 LESS 和 Sass/SCSS 包,它们的语法可以在以下位置找到:
-
Sublime Text 的 LESS 语法(
github.com/danro/LESS-sublime
) -
Sass 和 SCSS 的语法高亮(
github.com/P233/Syntax-highlighting-for-Sass
)
设置本地服务器
在开发网站时,有一个本地服务器在我们的计算机上设置并运行是必要的。当我们使用本地服务器存储我们的网站时,我们可以通过浏览器在http://localhost/
上访问它,并且我们也可以在手机浏览器和平板电脑上访问它,在file:///
协议下运行网站时是不可能的。此外,一些脚本可能只能在 HTTP 协议(http://
)下运行。
有许多应用程序可以通过几次点击轻松设置本地服务器,XAMPP(www.apachefriends.org/
)是本书中将要使用的应用程序。
操作时间-安装 XAMPP
XAMPP 适用于 Windows、OS X 和 Linux。从www.apachefriends.org/download.html
下载安装程序;根据您当前使用的平台选择安装程序。每个平台都有不同的安装程序和不同的扩展名;Windows 用户将获得.exe
,OSX 用户将获得.dmg
,而 Linux 用户将获得.run
。按照以下步骤在 Windows 中安装 XAMPP:
-
启动 XAMPP
.exe
安装程序。 -
如果 Windows 用户帐户控制提示是否允许以下程序更改此计算机?,请单击是。
-
当XAMPP 设置向导窗口出现时,单击下一步开始设置。
-
XAMPP 允许我们选择要安装的组件。在这种情况下,我们的 Web 服务器要求是最低限度的。我们只需要 Apache 来运行服务器,因此我们取消其他选项。(注意:PHP选项是灰色的;它无法取消选中):
-
确认要安装的组件后,单击下一步按钮继续。
-
将提示您安装 XAMPP 的位置。让我们将其保留在默认位置
C:\xampp
,然后单击下一步。 -
然后,简单地点击下一步,直到安装 XAMPP 的过程完成。等待过程完成。
-
安装完成后,您应该会看到窗口上显示安装 XAMPP 的设置已经完成。单击完成按钮以完成流程并关闭窗口。
按照以下步骤在 OS X 中安装 XAMPP:
-
对于 OS X 用户,打开 XAMPP
.dmg
文件。一个新的Finder窗口应该出现,其中包含实际的安装程序文件,通常命名为xampp-osx-*-installer
(星号(*
)代表 XAMPP 版本),如下图所示: -
双击安装程序文件开始安装。XAMPP 需要您的计算机凭据来运行安装程序。因此,请输入您的计算机名称和密码,然后单击确定以授予访问权限。
-
然后会出现XAMPP 设置向导窗口;单击下一步开始设置。
-
与 Windows 列出每个项目的组件不同,OS X 版本只显示两个组件,即XAMPP 核心文件和XAMPP 开发人员文件。在这里,我们只需要XAMPP 核心文件,其中包括我们需要运行服务器的 Apache、MySQL 和 PHP。因此,取消选择XAMPP 开发人员选项,然后单击下一步按钮继续。
-
您将收到提示,XAMPP 将安装在
Applications
文件夹中。与 Windows 不同,此目录无法编辑。因此,单击下一步继续。 -
然后,只需单击下一步按钮,继续下两个对话框以开始安装 XAMPP。等待直到完成。
-
安装完成后,您将看到安装 XAMPP 的设置已完成显示在窗口中。单击完成按钮完成流程并关闭窗口。
执行以下步骤在 Ubuntu 中安装 XAMPP:
-
下载 Linux 版 XAMPP 安装程序。安装程序以
.run
扩展名提供,适用于 32 位和 64 位系统。 -
打开终端并导航到安装程序下载的文件夹。假设它在
Downloads
文件夹中,输入:
cd ~/Downloads
- 使用
chmod u+x
使.run
安装程序文件可执行,然后输入.run
安装程序文件名:
chmod u+x xampp-linux-*-installer.run
- 使用
sudo
命令执行文件,后跟.run
安装程序文件位置,如下所示:
sudo ./xampp-linux-x64-1.8.3-4-installer.run
-
第 4 步的命令将弹出XAMPP 设置向导窗口。单击下一步继续,如下图所示:
-
安装程序允许您选择要在计算机上安装的组件。与 OS X 版本类似,选项中显示了两个组件:XAMPP 核心文件(包含 Apache、MySQL、PHP 和一堆其他运行服务器的东西)和XAMPP 开发人员文件。由于我们不需要XAMPP 开发人员文件,因此我们可以取消选择它,然后单击下一步按钮。
-
安装程序将向您显示将在
/opt/lampp
中安装 XAMPP。文件夹位置无法自定义。只需单击下一步按钮继续。 -
单击下一步按钮,继续下两个对话框屏幕以安装 XAMPP。
刚刚发生了什么?
我们刚刚在计算机上使用 MAMP 设置了本地服务器。您现在可以通过浏览器访问http://localhost/
地址访问本地服务器。但是,对于 OS X 用户,地址是您的计算机用户名后跟.local
。假设您的用户名是 john,本地服务器可以通过john.local
访问。每个平台的本地服务器目录路径都不同。
-
在 Windows:
C:\xampp\htdocs
-
在 OSX:
/Applications/XAMPP/htdocs
-
在 Ubuntu:
/opt/lampp/htdocs
提示
Ubuntu 用户可能希望更改权限并在桌面上创建一个symlink
文件夹以便方便地访问htdocs
文件夹。为此,您可以通过终端从桌面位置运行sudo chown username:groupname /opt/lampp/htdocs
命令。将username
和groupname
替换为您自己的。
ln -s /opt/lamp/htdocs
文件夹是我们必须放置项目文件夹和文件的位置。从现在开始,我们将简称这个文件夹为htdocs
。XAMPP 还配备了一个图形应用程序,您可以在其中打开和关闭服务器,如下图所示:
注意
Ubuntu 用户,您需要运行sudo /opt/lampp/manager-linux.run
或manager-linux-x64.run
。
选择 CSS 预处理器编译器
由于我们将使用 LESS 和 Sass 来生成响应式网站的样式表,我们将需要一个工具来将它们编译或转换成普通的 CSS 格式。
在 CSS 预处理器刚刚开始流行的时候,编译它们的唯一方法是通过命令行,这可能是当时许多人甚至不愿尝试 CSS 预处理器的绊脚石。幸运的是,现在我们有很多应用程序具有良好的图形界面来编译 CSS 预处理器;以下是供您参考的列表:
工具 | 语言 | 平台 | 价格 |
---|---|---|---|
--- | --- | --- | --- |
WinLESS(winless.org/ ) |
LESS | Windows | 免费 |
SimpLESS(wearekiss.com/simpless ) |
LESS | Windows,OSX | 免费 |
ChrunchApp(crunchapp.net ) |
LESS | Windows,OSX | 免费 |
CompassApp(compass.handlino.com ) |
Sass | Windows,OSX,Linux | $10 |
Prepros(alphapixels.com/prepros/ ) |
LESS,Sass 等 | Windows,OSX | Freemium($24) |
Codekit(incident57.com/codekit/ ) |
LESS,Sass 等 | OSX | $29 |
Koala(koala-app.com/ ) |
LESS,Sass 等 | Windows,OSX,Linux | 免费 |
我将尽可能涵盖多个平台。无论您使用哪个平台,您都可以跟随本书中的所有项目。因此,我们将使用 Koala。它是免费的,并且可以在 Windows,OSX 和 Linux 这三个主要平台上使用。
在每个平台上安装 Koala 非常简单。
开发浏览器
理想情况下,我们必须在尽可能多的浏览器中测试我们的响应式网站,包括 Firefox Nightly(nightly.mozilla.org/
)和 Chrome Canary(www.google.com/intl/en/chrome/browser/canary.html
)等测试版浏览器。这是为了确保我们的网站在不同环境中运行良好。然而,在开发过程中,我们可能会选择一个主要的浏览器进行开发,并作为网站应该如何展示的参考点。
在这本书中,我们将使用 Chrome(www.google.com/intl/en/chrome/browser/
)。我认为 Chrome 不仅运行速度快,而且也是一个非常强大的网页开发工具。Chrome 带有一套领先于其他浏览器的工具。以下是我在开发响应式网站时 Chrome 中两个我最喜欢的工具。
源映射
使用 CSS 预处理器的一个缺点是在调试样式表时。由于样式表是生成的,浏览器引用 CSS 样式表时,我们会发现很难发现代码在 CSS 预处理器样式表中的确切位置。
我们可以告诉编译器生成包含代码实际编写位置的注释,但源映射更优雅地解决了这个问题。与其生成一堆最终污染样式表的注释,我们可以在编译 CSS 预处理器时生成一个.map
文件。通过这个.map
文件,启用源映射的浏览器(如 Chrome)在检查元素时将能够直接指向源代码,如下面的截图所示:
正如您从前面的屏幕截图中所看到的,左侧显示的 Chrome DevTools 启用了源映射,直接指向了允许我们轻松调试网站的.less
文件。而右侧显示的源映射被禁用,因此它指向.css
,调试网站将需要一些努力。
源映射功能在最新版本的 Chrome 中默认启用。因此,请确保您的 Chrome 是最新的。
移动模拟器
在真实设备上测试响应式网站,如手机或平板电脑,是无法替代的。每个设备都有其自身的优点;一些因素,如屏幕尺寸、屏幕分辨率和移动浏览器的版本,都会影响网站在设备上的显示。然而,如果不可能的话,我们可以使用移动模拟器作为替代方案。
Chrome 还附带了一个开箱即用的移动模拟器。该功能包含许多移动设备的预设值,包括 iPhone、Nexus 和 Blackberry。此功能不仅模拟设备的用户代理,还打开了许多设备规格,包括屏幕分辨率、像素比、视口大小和触摸屏。这个功能对于在开发早期调试我们的响应式网站非常有用,而不需要实际的移动设备。
移动模拟器可以通过 Chrome DevTool 的控制台抽屉中的模拟选项卡访问,如下面的屏幕截图所示:
在 Chrome 内置的移动模拟器中,我们不需要再从第三方应用程序或 Chrome 扩展中设置另一个模拟器。在这里,我们将使用它来测试我们的响应式网站。
提示
Firefox 也有类似于 Chrome 移动模拟器的功能,尽管它只有很少的功能。您可以通过导航到工具 | Web 开发人员 | 响应式设计视图菜单来启用此功能。
使用 Bower 管理项目依赖
我们将需要一些库来管理 Bower 的项目依赖关系。在 Web 开发环境中,我们将库称为一组代码,通常是 CSS 和 JavaScript,用于在网站上添加功能。通常,网站依赖于特定的库来实现其主要功能。例如,如果我建立一个用于转换货币的网站,该网站将需要 Account.js(josscrowcroft.github.io/accounting.js/
);这是一个方便的 JavaScript 库,用于将常规数字转换为带有货币符号的货币格式。
通常,我们可能在单个网站上添加大约五个或更多的库,但是维护网站中使用的所有库,并确保它们都是最新的可能会变得繁琐。这就是 Bower 有用的地方。
Bower(bower.io/
)是一个前端包管理器。它是一个方便的工具,可以简化我们在项目中添加、更新和删除库或依赖项(项目所需的库)的方式。Bower 是一个 Node.js 模块,因此我们首先必须在计算机上安装 Node.js(nodejs.org/
)才能使用 Bower。
执行以下操作-安装 Node.js
执行以下步骤在 Windows、OS X 和 Ubuntu(Linux)中安装 Node.js。您可以直接跳转到您正在使用的平台的部分。
执行以下步骤在 Windows 中安装 Node.js:
- 从 Node.js 下载页面(
nodejs.org/download/
)下载 Node.js Windows 安装程序。选择适合您 Windows 系统的 32 位或 64 位版本,以及.msi
或.exe
安装程序。
提示
32 位或 64 位
请按照此页面查看您的 Windows 计算机是运行在 32 位还是 64 位系统上windows.microsoft.com/en-us/windows/32-bit-and-64-bit-windows
。
-
运行安装程序(
.exe
或.msi
文件)。 -
单击 Node.js 欢迎消息的下一步按钮。
-
通常情况下,当您安装软件或应用程序时,您将首先收到应用程序的许可协议提示。阅读完许可协议后,单击我接受许可协议中的条款,然后单击下一步按钮继续。
-
然后,系统会提示您选择 Node.js 应安装的文件夹。将其保留为默认文件夹,即
C:\Program Files\nodejs\
。 -
如下截图所示,安装程序然后会提示您是否要自定义要安装的项目。将其保留原样,然后单击下一步按钮继续,如下截图所示:
-
然后,单击安装按钮开始安装 Node.js。
-
安装过程非常快速;只需几秒钟。如果看到通知显示Node.js 已成功安装,则可以单击完成按钮关闭安装窗口。
执行以下步骤在 OS X 中安装 Node.js:
-
下载 OS X 的 Node.js 安装程序,其扩展名为
.pkg
。 -
安装程序将向您显示欢迎消息,并显示将安装 Node.js 的位置(
/usr/local/bin
),如下截图所示: -
然后,安装程序会显示用户许可协议。如果您已阅读并同意许可协议,请单击同意按钮,然后单击下一步按钮。
-
OS X 的 Node.js 安装程序允许您在安装到计算机之前选择要安装的 Node.js 功能。在这里,我们将安装所有功能;只需单击安装按钮即可开始安装 Node.js,如下截图所示:
注意
如果要自定义 Node.js 安装,请单击左下角的自定义按钮,如前面的截图所示。
执行以下步骤在 Ubuntu 中安装 Node.js:
在 Ubuntu 中安装 Node.js 非常简单。Node.js 可以通过 Ubuntu 的高级打包工具(APT)或apt-get
安装。如果您使用的是 Ubuntu 13.10 版本或更高版本,可以启动终端并依次运行以下两个命令:
sudo apt-get install nodejs
sudo apt-get install npm
如果您使用的是 Ubuntu 13.04 或更早版本,请改为运行以下命令:
sudo apt-get install -y python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
刚刚发生了什么?
我们刚刚安装了 Node.js 和npm
命令,这使我们能够稍后通过Node.js 软件包管理器(NPM)使用 Bower。npm
命令行现在应该可以通过 Windows 命令提示符或 OS X 和 Ubuntu 终端访问。运行以下命令测试npm
命令是否有效:
npm -v
此命令返回计算机中安装的 NPM 版本,如下截图所示:
此外,对于 Windows 用户,您可能会在命令提示符窗口顶部看到一条消息,显示您的环境已设置为使用 Node.js 和 npm,如下截图所示:
这表明您可以在命令提示符中执行node
和npm
命令。由于我们已经设置了 Node.js 和npm
正在运行,现在我们将安装 Bower。
英雄试试看-熟悉命令行
在本书中,我们将使用许多命令行来安装 Bower 以及 Bower 包。然而,如果您像我一样来自图形设计背景,在那里我们主要使用图形应用程序,第一次操作命令行可能会感到非常尴尬和令人生畏。因此,我建议您花时间熟悉基本的命令行。以下是一些值得参考的参考资料:
-
设计师的命令行介绍 由 Jonathan Cutrell 撰写(
webdesign.tutsplus.com/articles/a-designers-introduction-to-the-command-line--webdesign-6358
) -
《终端导航:温和介绍》由 Marius Masalar 撰写(
computers.tutsplus.com/tutorials/navigating-the-terminal-a-gentle-introduction--mac-3855
) -
Windows 命令提示符介绍 由 Lawrence Abrams 撰写(
www.bleepingcomputer.com/tutorials/windows-command-prompt-introduction/
) -
Linux 命令介绍 由 Paul Tero 撰写(
www.smashingmagazine.com/2012/01/23/introduction-to-linux-commands/
)
行动时间 - 安装 Bower
执行以下步骤安装 Bower:
-
如果使用 Windows,请打开命令提示符。如果使用 OS X 或 Ubuntu,请打开终端。
-
运行以下命令:
npm install -g bower
注
如果在 Ubuntu 中安装 Bower 遇到问题,请使用 sudo
运行命令。
刚刚发生了什么?
我们刚刚在计算机上安装了 Bower,这使得 bower
命令可用。我们在前面的命令中包含的 -g
参数是为了全局安装 Bower,这样我们就能在计算机的任何目录中执行 bower
命令。
Bower 命令
安装了 Bower 之后,我们可以访问一组命令行来操作 Bower 的功能。我们将在终端中运行这些命令,或者在 Windows 中使用命令提示符,就像我们用 npm
命令安装 Bower 一样。所有命令都以 bower
开头,后面跟着命令关键字。以下是我们可能经常使用的命令列表:
命令 | 功能 |
---|---|
bower install <library-name> |
将库安装到项目中。当我们执行此功能时,Bower 会创建一个名为 bower_components 的新文件夹来保存所有库文件。 |
bower list |
列出项目中所有已安装的包名称。该命令还会显示新版本(如果有的话)。 |
bower init |
将项目设置为 Bower 项目。该命令还会创建 bower.json 。 |
bower uninstall <library-name> |
从项目中移除库名称。 |
bower version <library-name> |
检索已安装的库版本。 |
注
你可以运行 bower --help
来获取完整的命令列表。
快速测验 - 网站开发工具和命令行
Q1. 我们刚刚安装了 Sublime Text 和 Package Control。Package Control 用于什么?
-
用于轻松安装和移除 Sublime Text 包。
-
用于安装 LESS 和 Sass/SCSS 包。
-
用于在 Sublime Text 中管理包。
Q2. 我们还安装了 XAMPP。我们为什么需要安装 XAMPP?
-
用于本地托管网站。
-
用于本地开发网站。
-
用于本地项目管理。
总结
在本章中,我们安装了 Sublime Text、XAMPP、Koala 和 Bower。所有这些工具将有助于我们构建网站。现在我们已经准备好了工具,我们可以开始着手项目了。所以,让我们继续下一章,开始第一个项目。
第三章:使用 Responsive.gs 构建一个简单的响应式博客
在上一章中,我们安装了一些软件,这些软件将为我们的项目提供便利。在这里,我们将开始我们的第一个项目。在这个项目中,我们将构建一个响应式博客。
拥有博客对于一家公司来说是必不可少的。甚至一些财富 500 强公司,如联邦快递(outofoffice.van.fedex.com/
),微软(blogs.windows.com/
)和通用汽车(fastlane.gm.com/
)都有官方企业博客。博客是公司发布官方新闻以及与客户和大众联系的重要渠道。使博客具有响应式设计是使博客更易于读者访问的途径,这些读者可能通过手机或平板等移动设备访问网站。
由于我们在这个第一个项目中要构建的博客不会那么复杂,所以这一章对于刚接触响应式网页设计的人来说是一个理想的章节。
那么让我们开始吧。
总之,在本章中,我们将涵盖以下主题:
-
深入了解 Responsive.gs 组件
-
审查博客蓝图和设计
-
整理网站文件和文件夹
-
查看 HTML5 元素以进行语义标记
-
构建博客标记
Responsive.gs 组件
正如我们在第一章中提到的,响应式网页设计,Responsive.gs 是一个轻量级的 CSS 框架。它只包含构建响应式网站的最基本要求。在本节中,我们将看到 Responsive.gs 包含了什么。
类
Responsive.gs 附带了一系列可重复使用的类,用于形成响应式网格,使网页设计师更容易更快地构建网页布局。这些类包含经过精心校准和测试的预设样式规则。因此,我们可以简单地将这些类放入 HTML 元素中以构建响应式网格。以下是 Responsive.gs 中的类列表:
类名 | 用法 |
---|---|
container |
我们使用这个类来设置网页容器并将其对齐到浏览器窗口的中心。然而,这个类并不给出元素的宽度。Responsive.gs 给了我们根据需要设置宽度的灵活性。 |
| row
,group
| 我们使用这两个类来包装一组列。这两个类都设置了所谓的自清除浮动,以解决由 CSS float
属性引起的一些布局问题。查看以下参考资料,了解有关 CSS float
属性以及它可能对网页布局造成的问题的更多信息:
-
Louis Lazaris 的CSS 浮动属性之谜(
www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
) -
Chris Coyier 的关于浮动的一切(
css-tricks.com/all-about-floats/
)
|
col |
我们使用这个类来定义网页的列。这个类设置了 CSS float 属性。因此,任何设置了这个类的元素都必须包含在设置了row 或group 类的元素中,以避免 CSS float 属性引起的问题。 |
---|---|
gutters |
我们使用这个类来在前面设置了col 类的列之间添加空间。 |
span_{x} |
这个类定义了列宽。因此,我们与col 类一起使用这个类。Responsive.gs 有三种网格变体,这使我们在组织网页布局时更加灵活。Responsive.gs 有 12、16 和 24 列格式。这些变体设置在三个单独的样式表中。如果你下载了 Responsive.gs 包,然后解压缩,你会发现三个名为responsive.gs.12col.css 、responsive.gs.16col.css 和responsive.gs.24col.css 的样式表。这些样式表之间唯一的区别是其中定义的span_ 类的数量。显然,24 列格式的样式表有最多的span_{x} 类;该类从span_1 到span_24 。如果你需要更大的灵活性来划分你的页面,那么使用 Responsive.gs 的 24 列格式是一个好选择。尽管每列可能太窄。 |
clr |
此类用于解决浮动问题。我们在使用行类不合适的情况下使用此类。 |
现在,让我们看看如何在示例中应用它们,以发现它们真正的作用。很多时候,你会看到一个网页被分成多列结构。以我们的示例为例;我们可以这样构建一个包含两列内容的网页:
<div class="container">
<div class="row gutters">
<div class="col span_6">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Veniam, enim.</p>
</div>
<div class="col span_6">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Reiciendis, optio.</p>
</div>
</div>
</div>
从上面的代码片段中可以看出,我们首先添加了包裹所有内容的container
。然后,紧随其后的是带有row
类的div
,用于包裹列。同时,我们还添加了gutters
类,以便在两列之间留出空白空间。在这个例子中,我们使用了 12 列格式。因此,为了将页面分成两个相等的列,我们为每个列添加了span_6
类。这意味着span_{x}
类的数量应该等于 12、16 或 24,以便根据我们使用的变体使列覆盖整个容器。因此,如果我们使用了 16 列格式,我们可以添加span_8
。
在浏览器中,我们将看到以下输出:
使用 HTML5 元素进行语义标记
保罗·博格在他的文章《语义代码:什么?为什么?怎么?》中写道:(boagworld.com/dev/semantic-code-what-why-how/
)
HTML 最初是用来描述文档内容的手段,而不是为了使其外观上令人愉悦。
与传统的报纸或杂志等明显是为人类而设计的内容发布不同,网络既被人类阅读,也被搜索引擎和屏幕阅读器等机器阅读,这些机器帮助视觉受损的人浏览网站。因此,使我们的网站结构具有语义是非常鼓励的。语义标记使这些机器更好地理解内容,也使内容在不同格式下更易访问。
因此,HTML5 在使网络更具语义的使命中引入了一堆新元素。以下是我们将用于博客的元素列表:
元素 | 描述 |
---|---|
<header> |
<header> 元素用于指定一个部分的头部。虽然这个元素通常用于指定网站的头部,但也适合用于指定文章头部,例如我们放置标题和其他支持文章的部分。我们可以在单个页面中多次使用<header> 。 |
<nav> |
<nav> 元素用于表示网站的主要导航或页面部分的一组链接。 |
<article> |
<article> 元素相当不言自明。该元素指定网站的文章,如博客条目或主页内容。 |
<main> |
<main> 元素定义了部分的主要部分。这个元素可以用来做一些事情,比如包装文章内容。 |
<figure> |
<figure> 元素用于指定文档中的图表、插图和图片。<figure> 元素可以与<figcaption> 一起使用,以添加图表的标题(如果需要的话)。 |
<figcaption> |
如前所述,<figcaption> 表示文档图表的标题。因此,它必须与<figure> 元素一起使用。 |
<footer> |
与<header> 元素类似,<footer> 元素通常用于指定网站页脚。但它也可以用来表示部分的结束或最低部分。 |
提示
参考这个速查表websitesetup.org/html5-cheat-sheet/
,了解 HTML5 中的更多新元素。
HTML5 搜索输入类型
除了新元素,我们还将在博客中添加一种特定的新输入类型,搜索。顾名思义,搜索输入类型用于指定搜索输入。在桌面浏览器中,您可能看不到明显的区别。您可能也不会立即看到搜索输入类型如何为网站和用户带来优势。
搜索输入类型将提升移动用户的体验。iOS、Android 和 Windows Phone 等移动平台已经配备了上下文屏幕键盘。键盘会根据输入类型而改变。您可以在下面的屏幕截图中看到,键盘显示了搜索按钮,让用户更方便地进行搜索:
HTML5 placeholder 属性
HTML5 引入了一个名为placeholder
的新属性。规范描述了这个属性作为一个短提示(一个词或短语),旨在在控件没有值时帮助用户进行数据输入,如下面的例子所示:
<input type="search" name="search_form " placeholder="Search here…">
您会看到placeholder
属性中的在这里搜索…显示在输入字段中,如下面的屏幕截图所示:
过去,我们依赖 JavaScript 来实现类似的效果。如今,有了placeholder
属性,应用程序变得简单得多。
HTML5 在 Internet Explorer 中
这些新的 HTML 元素使我们的文档标记更具描述性和意义。不幸的是,Internet Explorer 6、7 和 8 将无法识别它们。因此,无法应用到这些元素的选择器和样式规则;就好像这些新元素没有包含在 Internet Explorer 字典中一样。
这就是一个名为 HTML5Shiv 的 polyfill 发挥作用的地方。我们将包括 HTML5Shiv(github.com/aFarkas/html5shiv
)来使 Internet Explorer 8 及更低版本认识这些新元素。阅读 Paul Irish 的以下帖子(paulirish.com/2011/the-history-of-the-html5-shiv/
)了解 HTML5Shiv 背后的历史;它是如何发明和发展的。
此外,旧版的 Internet Explorer 无法渲染 HTML5 中的placeholder
属性中的内容。幸运的是,我们可以使用一个 polyfill(github.com/UmbraEngineering/Placeholder
)来模拟旧版 Internet Explorer 中placeholder
属性的功能。我们以后也会在博客中使用它。
在 Responsive.gs 包中查看 polyfills
Responsive.gs 还附带了两个 polyfills,以启用 Internet Explorer 6、7 和 8 中不支持的某些功能。从现在开始,让我们把这些浏览器版本称为“旧版 Internet Explorer”,好吗?
盒模型 polyfills
第一个 polyfill 是通过名为boxsizing.htc
的HTML 组件(HTC)文件提供的。
HTC 文件与 JavaScript 非常相似,通常与 Internet Explorer 专有的 CSS 属性behavior
一起使用,以为 Internet Explorer 添加特定功能。Responsive.gs 附带的boxsizing.htc
文件将应用与 CSS3 box-sizing
属性类似的功能。
Responsive.gs 在样式表中包含了boxsizing.htc
文件,如下所示:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/scripts/boxsizing.htc);
}
如上面的代码片段所示,Responsive.gs 应用了box-sizing
属性,并在通配符选择器中包含了boxsizing.htc
文件。这个通配符选择器也被称为通配符选择器;它选择文档中的所有元素,也就是说,在这种情况下,box-sizing
将影响文档中的所有元素。
注意
boxsizing.htc
文件路径必须是绝对路径或相对于 HTML 文档的路径,以使填充脚本起作用。这是一个技巧。这是我们强制使用的东西,以使旧版 Internet Explorer 表现得像现代浏览器一样。像上面的 HTC 文件一样使用并不符合 W3C 标准。
请参考微软关于 HTC 文件的页面(msdn.microsoft.com/en-us/library/ms531018(v=vs.85).aspx
)。
CSS3 媒体查询填充
Responsive.gs 附带的第二个填充脚本是respond.js
(github.com/scottjehl/Respond
),它将"神奇地启用"CSS3 respond.js
以使其立即可用。无需配置;我们可以简单地在head
标签中链接脚本,如下所示:
<!--[if lt IE 9]>
<script src="img/respond.js"></script>
<![endif]-->
在上面的代码中,我们将脚本封装在<!--[if lt IE 9]>
中,以便脚本只在旧版 Internet Explorer 中加载。
检查博客的线框图
建立网站与建造房子很相似;我们需要在堆砌所有砖块之前检查每个角落的规格。因此,在我们着手建立博客之前,我们将检查博客的线框图,看看博客的布局是如何排列的,以及将在博客上显示的内容。
让我们来看一下下面的线框图。这个线框图展示了在桌面屏幕上查看博客布局时的情况:
正如在上面的截图中所示,博客将是简单明了的。在页眉中,博客将有一个标志和一个搜索表单。在页眉下方,依次放置菜单导航、博客文章、用于导航到下一个或上一个文章列表的分页和页脚。
博客文章通常包括标题、发布日期、文章的特色图片和文章摘要。这个线框图是博客布局的抽象。我们将用它作为博客布局将如何排列的视觉参考。因此,尽管我们在前面的线框图中只显示了一篇文章,但实际上我们稍后会在实际博客中添加更多的文章。
当视口宽度被挤压时,以下是博客布局:
检查博客的线框图
当视口宽度变窄时,博客布局会自适应。值得注意的是,当我们改变布局时,我们不应该改变内容流和 UI 层次结构。确保桌面版和移动版之间的布局一致性将帮助用户快速熟悉网站,无论他们在哪里查看网站。如上面的线框图所示,我们仍然按照相同的顺序设置了 UI,尽管它们现在是垂直堆叠以适应有限的区域。
这个线框图值得一提的是,导航变成了一个 HTML 下拉选择。在建立博客的过程中,我们将讨论如何做到这一点。
现在,我们已经准备好工具并检查了博客布局,我们准备开始项目。我们将从创建和组织项目目录和资产开始。
组织项目目录和文件
通常,我们将不得不链接到某些文件,比如样式表和图片。不幸的是,网站并不聪明;它们无法自行找到这些文件。因此,我们必须正确设置文件路径,以避免链接错误。
这就是为什么在构建网站时拥有有组织的目录和文件是至关重要的。当我们在一个由许多人组成的团队中进行非常大型的项目,并且需要处理数十到数百个文件时,这将变得非常重要。管理不善的目录可能会让团队中的任何人都发疯。
有组织良好的目录将帮助我们最小化潜在的链接错误。这也将使项目在未来更易于维护和扩展。
创建和组织项目目录和资产的行动时间
执行以下步骤来设置项目的工作目录:
- 转到
htdocs
文件夹。作为提醒,这个文件夹是位于本地服务器中的文件夹:
-
在 Windows 中的
C:\xampp\htdocs
-
在 OSX 中的
/Applications/XAMPP/htdocs
-
在 Ubuntu 中的
/opt/lampp/htdocs
-
创建一个名为
blog
的新文件夹。从现在开始,我们将把这个文件夹称为项目目录。 -
创建一个名为
css
的新文件夹来存储样式表。 -
创建一个名为
image
的新文件夹来存储图片。 -
创建一个名为
scripts
的新文件夹来存储 JavaScript 文件。 -
创建一个名为
index.html
的新文件;这个 HTML 文件将是博客的主页。从responsive.gs/
下载 Responsive.gs 软件包。该软件包以.zip
格式提供。解压缩软件包以释放其中的文件。在那里,你会发现许多文件,包括样式表和 JavaScript 文件,正如你从以下截图中所看到的:
Responsive.gs 中的文件
-
将
responsive.gs.12col.css
移动到项目目录的css
文件夹中;这是我们需要的 Responsive.gs 唯一的样式表。 -
将
boxsizing.htc
移动到项目目录的scripts
文件夹中。 -
Responsive.gs 软件包中的
respond.js
文件已过时。让我们从 GitHub 存储库(github.com/scottjehl/Respond/blob/master/src/respond.js
)下载最新版本的 Respond.js,并将其放在项目目录的scripts
文件夹中。 -
从
github.com/aFarkas/html5shiv
下载 HTML5Shiv。将 JavaScript 文件html5shiv.js
放在scripts
文件夹中。 -
我们还将使用由 James Brumond 开发的占位符填充(
github.com/UmbraEngineering/Placeholder
)。James Brumond 为不同的场景开发了四种不同的 JavaScript 文件。 -
我们将在这里使用的脚本是
ie-behavior.js
,因为这个脚本专门针对 Internet Explorer。下载脚本(raw.githubusercontent.com/UmbraEngineering/Placeholder/master/src/ie-behavior.js
)并将其重命名为placeholder.js
,以使其更明显地表明这个脚本是一个占位符填充。将其放在项目目录的scripts
文件夹中。 -
博客将需要一些图像作为帖子的特色图像。在本书中,我们将使用以下屏幕截图中显示的图像,这些图像是由 Levecque Charles(
twitter.com/Charleslevecque
)和 Jennifer Langley(jennifer-langley.squarespace.com/photography/
)连续拍摄的:
提示
在 Unsplash(unsplash.com/
)上找到更多免费的高清图像。
- 我们将为博客添加一个网站图标。网站图标是一个小图标,出现在浏览器标签旁边的标题旁边,这对于读者快速识别博客将会很有帮助。以下是一个屏幕截图,显示了 Chrome 中的一些固定标签。我敢打赌,你仍然能够通过查看网站图标来识别这些标签中的网站:
Google Chrome 固定标签
- 此外,我们还将添加 iOS 图标。在 iPhone 和 iPad 等苹果设备上,我们可以将网站固定在主屏幕上,以便快速访问网站。这就是苹果图标派上用场的地方。iOS(iPhone/iPad 操作系统)将显示我们提供的图标,如下面的屏幕截图所示,就像是一个本地应用程序:
将网站添加到 iOS 主屏幕
- 这些图标包含在随本书提供的源文件中。将这些图标复制并粘贴到我们刚刚在步骤 5 中创建的图像文件夹中,如下面的屏幕截图所示:
提示
使用 AppIconTemplate 快速轻松地创建网站图标和 iOS 图标。
AppIconTemplate(appicontemplate.com/
)是一个 Photoshop 模板,可以让我们轻松设计图标。该模板还附带了 Photoshop 操作,可以通过几次点击生成图标。
刚刚发生了什么?
我们刚刚为这个项目创建了一个目录,并将一些文件放入了该目录。这些文件包括 Responsive.gs 样式表和 JavaScript 文件、图像和图标,以及一些 polyfill。我们还创建了一个index.html
文件,这将是博客的主页。此时,项目目录应包含如下屏幕截图中显示的文件:
当前的工作目录中的文件和文件夹
尝试使目录结构更有组织性
许多人对如何组织他们项目的目录结构有自己的偏好。在上一节中显示的只是一个例子,是我个人管理该项目目录的方式。
尝试进一步使目录更有组织,并满足您对组织的个人偏好。一些常见的想法如下:
-
缩短文件夹名称,即
js
和img
,而不是 JavaScript 和 Image -
将
js
、img
和css
文件夹全部放在一个名为assets
的新文件夹中
小测验-使用 polyfill
在本书的早些时候,我们讨论了 polyfill,并提到了一些我们将在博客中实现的 polyfill 脚本。
Q1.你认为何时使用 polyfill 会更合适?
-
当博客在 Internet Explorer 6 中查看时。
-
当浏览器不支持该功能时。
-
当我们需要在网站上添加新功能时。
-
我们可以随时使用它。
博客 HTML 结构
我们在上一节中已经介绍了项目目录和文件的结构。现在让我们开始构建博客标记。正如我们提到的,我们将使用一些 HTML5 元素来形成更有意义的 HTML 结构。
行动时间-构建博客
执行以下步骤来构建博客:
- 打开我们在上一节行动时间-创建和组织项目目录和资产的第 6 步中创建的
index.html
文件。让我们从添加最基本的 HTML5 结构开始,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
</body>
</html>
在这里,设置DOCTYPE
,它已经被简化到最低形式。HTML5 中的DOCTYPE
格式现在比其 HTML4 对应格式更短更干净。然后,我们设置页面的语言,这里设置为en
(英语)。您可以根据自己的语言更改它;在en.wikipedia.org/wiki/List_of_ISO_639-1_codes
上找到您本地语言的代码。
我们还将字符编码设置为UTF-8
,以使浏览器能够将 Unicode 字符(如U+20AC
)呈现为可读格式€
。
- 在
head
标签中的charset
元标签下方,添加以下 meta:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Internet Explorer 有时会表现得很奇怪,突然切换到兼容模式,并以 Internet Explorer 8 和 7 中查看的方式呈现页面。这个 meta 标签的添加将阻止这种情况发生。它将强制 Internet Explorer 以最新标准的最高支持度呈现页面。
- 在
http-equiv
元标签下方,添加以下 meta 视口标签:
<meta name="viewport" content="width=device-width, initial-scale=1">
正如我们在第一章中提到的响应式网页设计,前面的视口 meta 标签规范定义了网页视口宽度,以跟随设备视口大小。它还定义了在首次打开网页时的网页比例为 1:1。
- 使用
link
标签将苹果图标链接如下:
<link rel="apple-touch-icon" href="image/icon.png">
根据苹果的官方说明,通常需要包含多个图标源,以满足 iPhone、iPad 和具有 Retina 屏幕的设备。这对我们的博客实际上并不是必要的。诀窍在于,我们通过单一来源提供所需的最大尺寸,即 512 像素,如前面的屏幕截图所示。
注意
前往苹果文档,为 Web Clip 指定网页图标(developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
),以供进一步参考。
- 在标题下方添加描述 meta 标签,如下所示:
<meta name="description" content="A simple blog built using Responsive.gs">
- 博客的描述将显示在搜索引擎结果页面(SERP)中。在这一步中,我们将构建博客标题。首先,让我们添加 HTML5 的
<header>
元素以及用于样式的类,以包装标题内容。在body
标签中添加以下内容:
<header class="blog-header row">
</header>
- 在我们在第 9 步中添加的
<header>
元素中,添加一个新的<div>
元素,带有container
和gutters
类,如下所示:
<header class="blog-header row">
<div class="container gutters">
</div>
</header>
参考本章前面显示的表格,container
类将使博客标题内容居中于浏览器窗口,而gutters
类将在下一步中添加的列之间添加间距。
- 在新的列中创建一个包含博客标志/名称的
<div>
元素,以及 Responsive.gs 的col
和span_9
类,将<div>
元素设置为列并指定宽度。不要忘记添加类以添加自定义样式:
<header class="blog-header row">
<div class="container gutters">
<div class="blog-name col span_9">
<a href="/">Blog</a>
</div>
</div>
</header>
- 参考博客线框图,我们将在博客标志/名称旁边放置一个搜索表单。因此,使用 Responsive.gs 的
col
和span_3
类以及输入搜索类型创建另一个新的列。在标志标记下方添加以下<div>
元素:
<header class="blog-header row">
<div class="container gutters">
<div class="blog-name col span_9">
<a href="/">Blog</a>
</div>
<div class="blog-search col span_3">
<div class="search-form">
<form action="">
<input class="input_full" type="search" placeholder="Search here...">
</form>
</div>
</div>
</div>
</header>
正如我们在本章前面提到的,我们使用了一个输入搜索类型来提供更好的用户体验。这个输入将显示移动屏幕键盘,带有一个特殊的键,允许用户点击搜索按钮并立即运行搜索。我们还使用 HTML5 的placeholder
属性添加占位文本,向用户显示他们可以通过输入框在博客中进行搜索。
- 构建完头部博客后,我们将构建博客导航。在这里,我们将使用 HTML5 的
nav
元素来定义一个新的导航部分。创建一个带有支持样式的nav
元素。在头部构建下方添加nav
元素如下:
...
</div>
</header>
<nav class="blog-menu row">
</nav>
- 在
nav
元素内,创建一个带有container
类的div
元素,将导航内容对齐到浏览器窗口的中心:
<nav class="blog-menu">
<div class="container">
</div>
</nav>
- 根据线框图,博客将在链接菜单上有五个项目。我们将使用
ul
元素布置这些链接。在容器内添加链接,如下所示的代码片段:
<nav class="blog-menu row">
<div class="container">
<ul class="link-menu">
<li><a href="/">Home</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
- 完成导航构建后,我们将构建博客内容部分。根据线框图,内容将包括一系列文章。首先,让我们添加 HTML5 的
<main>
元素,将内容包裹在导航下方如下:
...
</ul>
</nav>
<main class="blog-content row">
</main>
我们使用<main>
元素,因为我们认为文章是博客的主要部分。
- 与其他博客部分一样——头部和导航——我们添加一个容器
<div>
将博客文章对齐到中心。在<main>
元素内添加这个<div>
元素:
<main class="blog-content row">
<div class="container">
</div>
</main>
- 现在我们将创建博客文章的标记。把博客文章想象成一篇文章。因此,在这里我们将使用
<article>
元素。在第 17 步中添加的容器<div>
内添加<article>
元素如下:
<main class="blog-content row">
<div class="container">
<article class="post row">
</article>
</div>
</main>
-
如前所述,
<header>
元素不仅限于定义头部。博客也可以用来定义一个部分的头部。在这种情况下,除了博客头部,我们将使用<header>
元素来定义包含文章标题和发布日期的文章头部部分。 -
在文章元素内添加
<header>
元素:
<article class="post row">
<header class="post-header">
<h1 class="post-title">
<a href="#">Useful Talks & Videos for Mastering CSS</a>
</h1>
<div class="post-meta">
<ul>
<li class="post-author">By John Doe</li>
<li class="post-date">on January, 10 2014</li>
</ul>
</div>
</header>
</article>
- 一图胜千言。因此,使用图片来支持文章是常态。在这里,我们将在文章头部下方显示图片。我们将特色图片与文章摘要一起分组,作为文章摘要,如下所示:
...
</header>
<div class="post-summary">
<figure class="post-thumbnail">
<img src="img/village.jpg" height="1508" width="2800" alt="">
</figure>
<p class="post-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, voluptatibus, consequuntur vero iste autem aliquid qui et rerum vel ducimus ex enim quas!...<a href="#">Read More...</a></p>
</div>
</article>
随后添加几篇文章。可选地,你可以在其他文章中排除特色图片。
- 添加了一堆文章后,我们现在将添加文章分页。分页是一种常见的页面导航形式,允许我们跳转到下一个或上一个文章列表。通常,分页位于最后一篇文章项之后的页面底部。
博客的分页包括两个链接,用于导航到下一页和上一页,以及一个小节用于放置页面数字,显示用户当前所在的页面。
- 在最后一篇文章后添加以下代码:
...
</article>
<div class="blog-pagination">
<ul>
<li class="prev"><a href="#">Prev. Posts</a></li>
<li class="pageof">Page 2 of 5</li>
<li class="next"><a href="#">Next Posts</a></li>
</ul>
</div>
- 最后,我们将构建博客页脚。我们可以使用 HTML5 的
<footer>
元素来定义博客页脚。页脚结构与头部相同。页脚将有两列;分别包含博客页脚链接(或者,我们称之为次要导航)和版权声明。这些列将被包裹在一个<div>
容器内。在主要部分添加以下页脚,如下所示:
…
</main>
<footer class="blog-footer row">
<div class="container gutters">
<div class="col span_6">
<nav id="secondary-navigation" class="social- media">
<ul>
<li class="facebook">
<a href="#">Facebook</a>
</li>
<li class="twitter">
<a href="#">Twitter</a></li>
<li class="google">
<a href="#">Google+</a>
</li>
</ul>
</nav>
</div>
<div class="col span_6">
<p class="copyright">© 2014\. Responsive Blog.</p>
</div>
</div>
</footer>
刚刚发生了什么?
我们刚刚完成了博客的 HTML 结构——头部、导航、内容和页脚。假设你一直在密切关注我们的指示,你可以在http://localhost/blog/
或http://{coputer-username}.local/blog/
中访问博客。
然而,由于我们还没有应用任何样式,你会发现博客看起来很简单,布局还没有组织好:
当前阶段的博客外观
我们将在下一章中为博客添加样式。
英雄试试看-创建更多博客页面
在本书中,我们只构建了博客的主页。但是,您可以通过创建更多页面来扩展博客,例如添加关于页面、单篇文章内容页面和带有联系表单的页面。您可以重用本章中构建的 HTML 结构。删除<main>
元素内的任何内容,并根据需要替换为内容。
快速测验-HTML5 元素
让我们以有关 HTML5 的简单问题结束本章:
Q1. <header>
元素用于什么?
-
它用于表示网站页眉。
-
它用于表示一组介绍和导航辅助。
Q2. <footer>
元素用于什么?
-
它用于表示网站页脚。
-
它用于表示部分的结束或最低部分。
Q3. 在单个页面内允许多次使用<header>
和<footer>
元素吗?
-
是的,只要语义上合乎逻辑。
-
不,这被认为是多余的。
总结
在本章中,我们开始了我们的第一个项目。在本章的早些时候,我们探讨了 Responsive.gs 组件,了解了 Responsive.gs 如何构建响应式网格,以及用于塑造网格的类。
我们还讨论了 HTML5,包括新元素,即在不支持特定功能的浏览器中模仿 HTML5 功能的 polyfills。然后,我们使用 HTML5 构建博客标记。
在下一章中,我们将更多关注使用 CSS3 标记博客,并添加一些 JavaScript。我们还将调试博客,以解决在旧版 Internet Explorer 中出现的错误。
第四章:增强博客外观
在前一章中,我们使用 HTML5 元素从标题部分到页脚部分构建了博客标记。然而,博客目前还是没有样式的。如果你在浏览器中打开博客,你只会看到它是空的;我们还没有编写样式来完善它的外观。
在本章的过程中,我们将专注于使用 CSS 和 JavaScript 装饰博客。我们将使用 CSS3 来添加博客样式。CSS3 带来了许多新的 CSS 属性,如border-radius
、box-shadow
和box-sizing
,使我们能够装饰网站而无需添加图片和额外的标记。
然而,如前所述,CSS 属性仅适用于最新的浏览器版本。Internet Explorer 6 到 8 无法识别这些 CSS 属性,并且无法在浏览器中输出结果。因此,作为补充,我们还将利用一些 polyfill 来使我们的博客在旧版 Internet Explorer 中呈现出色。
这将是一个充满冒险的章节。让我们开始吧。
在本章中,我们将涵盖以下主题:
-
研究 CSS3 属性和 CSS 库,我们将在博客中使用
-
使用 Koala 编译和压缩样式表和 JavaScript
-
采用移动优先的方法撰写博客样式规则
-
优化博客以适应桌面
-
使用 polyfill 在 Internet Explorer 中修复博客
使用 CSS3
CSS3 配备了期待已久的属性,border-radius
和box-shadow
,简化了在 HTML 中呈现圆角和阴影的旧方法。除此之外,它还带来了一种新类型的伪元素,使我们能够通过 HTML5 的placeholder
属性来样式化输入字段中显示的占位文本。
让我们看看它们是如何工作的。
使用 CSS3 创建圆角
回到 90 年代,创建圆角是很复杂的。添加大量的 HTML 标记,切割图像,并制定多行样式规则是不可避免的,正如 Ben Ogle 在benogle.com/2009/04/29/css-round-corners.html
的文章中所述。
CSS3 使得使用border-radius
属性创建圆角变得更加简单,以下是一个例子:
div {
width: 100px; height: 100px;
border-radius: 30px;
}
上述样式规则将使盒子的角变圆(阅读第一章中的关于 CSS 盒模型的一些话部分,响应式网页设计),每个角为30px
,如下图所示:
此外,我们还可以只将特定的角进行圆角处理。例如,以下代码片段将只圆角处理右上角:
div {
width: 100px; height: 100px;
border-top-right-radius: 30px;
}
创建阴影
与创建圆角类似,过去在网站中创建阴影效果时不可避免地需要使用图片。现在,通过引入box-shadow
属性,添加阴影效果变得更加容易。box-shadow
属性由五个参数(或值)组成:
第一个参数指定了阴影的位置。这个参数是可选的。将值设置为inset
,让阴影出现在盒子内部,或者留空以在外部显示阴影。
第二个参数指定了盒子的阴影垂直和水平距离。
第三个参数指定了阴影模糊,使阴影变淡;数字越大,产生的阴影就越大但也更加淡化。
第四个参数指定了阴影扩展;这个值与阴影模糊值略有矛盾。这个值会放大,同时也加强阴影的深度。
最后一个参数指定了颜色。颜色可以是任何网络兼容的颜色格式,包括 Hex、RGB、RGBA 和 HSL。
延续前面的例子,我们可以添加box-shadow
,如下所示:
div {
width: 100px;
height: 100px;
border-radius: 30px;
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
}
上述代码将输出阴影,如下图所示:
如果要在框内显示阴影,请在开头添加inset
,如下:
div {
width: 100px;
height: 100px;
border-radius: 30px;
box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,0.5);
}
提示
CSS3 的box-shadow
属性可以以许多创造性的方式应用,以下是 Paul Underwood 的一个示例,供您参考:
www.paulund.co.uk/creating-different-css3-box-shadows-effects
CSS3 浏览器支持和厂商前缀的使用
border-radius
和box-shadow
属性在许多浏览器中得到了很好的实现。从技术上讲,如果我们只针对最新的浏览器版本,就不需要包括所谓的厂商前缀。
然而,如果我们打算在最早期的浏览器版本中启用这两个属性border-radius
和box-shadow
,在这些浏览器版本中,如 Safari 3、Chrome 4 和 Firefox 3,它们仍然被浏览器供应商标记为实验性的,需要添加厂商前缀。每个浏览器的前缀如下:
-
-webkit-
:这是基于 WebKit 的浏览器前缀,目前包括 Safari、Chrome 和 Opera。 -
-moz-
:这是 Mozilla Firefox 的前缀。 -
-ms-
:这是 Internet Explorer 的前缀。但自 Internet Explorer 9 以来,Internet Explorer 已经支持border-radius
和box-shadow
,无需添加此前缀。
让我们继续我们之前的例子(再次)。通过添加厂商前缀以适应 Chrome、Safari 和 Firefox 的最早版本,代码如下:
div {
width: 100px;
height: 100px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
-moz-box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
}
代码可能会变得有点长;但这仍然比应对复杂的标记和多个样式规则要好。
注意
Chrome 及其新的浏览器引擎 Blink
Chrome 决定分叉 WebKit,并在其上构建自己的浏览器引擎,名为 Blink(www.chromium.org/blink
)。Opera 之前放弃了其初始引擎(Presto)以使用 WebKit,现在也跟随 Chrome 的动向。Blink 取消了厂商前缀的使用,因此我们不会找到-blink-
前缀或类似的前缀。在 Chrome 的最新版本中,Chrome 默认禁用实验性功能。但是,我们可以通过chrome://flags
页面中的选项来启用它。
自定义占位符文本样式
随着 HTML5 的加入,占位符属性带来了如何自定义占位符文本的问题。默认情况下,浏览器以浅灰色显示占位符文本。例如,我们如何更改颜色或字体大小?
在撰写本文时,每个浏览器在这方面都有自己的方式。基于 WebKit 的浏览器,如 Safari、Chrome 和 Opera,使用::-webkit-input-placeholder
。而 Internet Explorer 10 使用:-ms-input-placeholder
。另一方面,Firefox 4 到 18 使用伪类
:-moz-placeholder
,但自 Firefox 19 以来已被伪元素::-moz-placeholder
(注意双冒号)所取代,以符合标准。
这些选择器不能在单个样式规则中同时使用。因此,以下代码片段将不起作用:
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
color: #fbb034;
}
它们必须在单个样式规则声明中声明,如下:
input::-webkit-input-placeholder {
color: #fbb034;
}
input:-moz-placeholder {
color: #fbb034;
}
input::-moz-placeholder {
color: #fbb034;
}
input:-ms-input-placeholder {
color: #fbb034;
}
这绝对是低效的;我们只是为了达到相同的输出而添加了额外的行。目前还没有其他可行的选择。对于样式化占位符的标准仍在讨论中(请参阅wiki.csswg.org/ideas/placeholder-styling
和wiki.csswg.org/spec/css4-ui#more-selectors
中的 CSSWG 讨论了解更多细节)。
使用 CSS 库
区分 CSS 库和 CSS 框架的基本事情是它所解决的问题。例如,CSS 框架,如 Blueprint (www.blueprintcss.org/
),旨在作为新网站的基础或起点。它通常附带各种库的组件,以涵盖许多情况。另一方面,CSS 库解决的是非常具体的问题。一般来说,CSS 库也不受限于特定的框架。Animate.css
(daneden.github.io/animate.css/
) 和 Hover.css
(ianlunn.github.io/Hover/
) 就是两个完美的例子。它们都是 CSS 库。它们可以与任何框架一起使用。
在这里,我们将把两个 CSS 库整合到博客中,即Normalize
(necolas.github.io/normalize.css/
) 和 Formalize
(formalize.me/
)。这些 CSS 库将标准化不同浏览器中的基本元素样式,并最小化可能意外发生的样式错误。
使用 Koala
一旦我们探索了这个项目中要包含的所有内容,让我们设置工具将它们整合在一起。在第一章中,响应式网页设计,我们已经安装了 Koala。Koala 是一个免费的开源开发工具,具有许多功能。在这个第一个项目中,我们将使用 Koala 来将样式表和 JavaScript 编译成一个文件,并将代码压缩以得到更小的文件大小。
我们将在博客中包含大约五个样式表。如果我们分别加载所有这些样式表,浏览器将不得不发出五个 HTTP 请求,如下面的截图所示:
如前面的截图所示,浏览器执行了五个 HTTP 请求来加载所有样式表,总共大小为 24.4 KB,需要大约 228 毫秒来加载。
将这些样式表合并成一个文件并压缩其中的代码将加快页面加载速度。样式表也会变得显著更小,最终也会节省带宽消耗。
如下面的截图所示,浏览器只执行了一个 HTTP 请求;样式表大小减小到 13.5KB,加载时间只需 111 毫秒。与前面的例子相比,页面加载速度提高了约 50%:
提示
加快网站性能的最佳实践:
前往 YSlow!性能规则 (developer.yahoo.com/performance/rules.html
) 或 Google PageSpeed Insight 规则 (developers.google.com/speed/docs/insights/rules
),了解除了合并样式表和 JavaScript 之外,使网站加载更快的进一步步骤。
行动时间 - 将项目目录整合到 Koala 并合并样式表
在本节中,我们将整合配置好的 Koala 来编译和输出样式表,执行以下步骤:
-
在
css
文件夹中创建一个名为main.css
的新样式表。这是主要的样式表,我们将在其中为博客编写自己的样式规则。 -
创建一个名为
style.css
的新样式表。 -
下载
normalize.css
(necolas.github.io/normalize.css/
),并将其放入项目目录的css
文件夹中。 -
下载
formalize.css
(formalize.me/
),并将其放入项目目录的css
文件夹中。 -
在 Sublime Text 中打开
style.css
。 -
使用
@import
规则按以下顺序导入支持的样式表,如下所示:
@import url("css/normalize.css");
@import url("css/formalize.css");
@import url("css/responsive.gs.12col.css");
@import url("css/main.css");
@import url("css/responsive.css");
-
启动 Koala。然后,将项目目录拖放到 Koala 侧边栏中。Koala 将显示并列出可识别的文件,如下截图所示:
-
选择
style.css
并选中自动编译,以便在 Koala 检测到其中的更改时自动编译style.css
。查看以下截图: -
选择合并导入选项,让 Koala 将样式表中的内容(包括
style.css
中包含的内容)与@import
规则合并。查看以下截图: -
将输出样式设置为压缩。查看以下截图:
这将把样式规则压缩成一行,最终会使style.css
文件大小变小。
- 单击编译按钮。查看以下截图:
这将编译style.css
并生成一个名为style.min.css
的新文件作为输出。
- 打开
index.html
并链接style.min.css
,使用以下代码:
<link href="style.min.css" rel="stylesheet">
刚刚发生了什么?
我们刚刚在 Koala 中整合了项目目录。我们还创建了两个新的样式表,分别是main.css
和style.css
。我们还使用@import
规则将五个样式表,包括main.css
,合并到了style.css
文件中。我们合并了这些文件,并生成了一个名为style.min.css
的新样式表,它可以在style.css
中找到,如下截图所示:
最后,我们在index.html
中链接了压缩后的样式表style.min.css
。
英雄试试看-重命名输出
style.min.css
是 Koala 设置的默认名称;它会在每个压缩输出中插入后缀min
。虽然这是压缩的 Web 源文件、样式表和 JavaScript 最流行的命名约定,但 Koala 允许您重命名输出以匹配您的个人喜好。要这样做,请单击以下截图中用圆圈标出的编辑图标:
以下是一些您可以尝试的替代命名想法:
-
style-min.css
(带有破折号) -
styles.min.css
(带有s
) -
blog.css
(指的是网站名称)
然而,如果您决定重命名输出而不是像我们在前面的步骤中那样管理style.min.css
,请不要忘记更改<link>
元素中指向样式表的名称。
快速测验-网站性能规则
Q1. 以下哪条规则不是用于改善网站性能的规则?
-
压缩资源,如 CSS 和 JavaScript。
-
压缩图像文件。
-
利用浏览器缓存。
-
使用 CSS 简写属性。
-
使用 CDN 传递 Web 资源。
首先考虑移动端
在我们动手编写代码之前,让我们谈谈移动优先的方法,这将驱动我们在写部分博客样式规则时的决定。
移动优先是 Web 设计社区中的热词之一。移动优先是一种新的思维方式,用于构建今天的网站,也指导着构建针对移动使用优化的网站的模式。正如第一章中所述,响应式 Web 设计,移动用户正在增加,桌面不再是用户访问 Web 的主要平台。
移动优先的概念驱使我们在构建网站块时考虑和优先考虑移动使用,包括我们如何组合样式规则和媒体查询。此外,采用移动优先思维,正如 Brad Frost 在他的博客文章中所展示的(bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/
),允许生成比另一种方式(从桌面到移动)更精简的代码。在这里,我们将首先优化和处理移动端的博客,然后再增强到桌面版本。
移动优先不在本书的范围之内。以下是一些我推荐的进一步了解这个主题的来源:
-
Luke Wroblewski 的《Mobile First》(
www.abookapart.com/products/mobile-first
) -
Brad Frost 的《Mobile First Responsive Web Design》(
bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
) -
Jeremy Girard 的《Building a Better Responsive Website》(
www.smashingmagazine.com/2013/03/05/building-a-better-responsive-website/
)
组合博客样式
在前面的章节中,我们添加了第三方样式,奠定了博客外观的基础。从本节开始,我们将为博客编写自己的样式规则。我们将从页眉开始,然后逐步到页脚。
采取行动-组合基本样式规则
在这一部分,我们将编写博客的基本样式。这些样式规则包括内容字体系列,字体大小,以及其中的许多元素。
首先,我个人认为使用默认系统字体如 Arial 和 Times 非常无聊。
注意
由于浏览器支持和字体许可限制,我们只能使用用户操作系统中安装的字体。因此,十多年来,我们在网页上只能使用非常有限的字体选择,许多网站使用相同的一组字体,如 Arial,Times,甚至 Comic Sans。所以,是的,这些都是无聊的字体。
如今,随着@font-face
规范的进步,以及在网页上使用字体的许可,我们现在能够在网站上使用用户计算机字体选择之外的字体。现在也有更大的免费字体集合可以嵌入到网页中,比如我们可以在 Google Font(www.google.com/fonts
)、Open Font Library(openfontlibrary.org/
)、Font Squirrel(www.fontsquirrel.com
)、Fonts for Web(fontsforweb.com/
)和 Adobe Edge Web Font(edgewebfonts.adobe.com/
)中找到的字体。
我真的鼓励网页设计师更多地探索使用自定义字体在他们的网站上构建更丰富的网站的可能性。
执行以下步骤来组合基本样式规则:
- 为了使我们的博客看起来更加清新,我们将从 Google Font 库中使用一些自定义字体。Google Font 让我们能够在网页上使用字体变得更加容易。Google 已经解决了编写语法的麻烦,同时确保字体格式在所有主要浏览器中兼容。
注意
说到这一点,可以参考 Paul Irish 的文章,“Bulletproof @font-face syntax”(www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
),以获取有关在所有浏览器中工作的 CSS3 @font-face
语法的进一步帮助。
- 此外,我们不会被字体许可证所困扰,因为 Google 字体是完全免费的。我们所要做的就是按照此页面中的说明添加一个特殊的样式表
developers.google.com/fonts/docs/getting_started#Quick_Start
。在我们的情况下,在主要样式表链接之前添加以下链接:
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic|Varela+Round' rel='stylesheet'>
这样做后,我们将能够使用 Droid Serif 字体系列,以及 Varela Round;请在以下网页中查看这些字体样本和字符:
-
Droid Serif(
www.google.com/fonts/specimen/Droid+Serif
) -
Varela Round(
www.google.com/fonts/specimen/Varela+Round
)
- 将整个元素框大小设置为
border-box
。在main.css
中添加以下行(以及下一步中的其他行):
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/scripts/boxsizing.htc);
}
- 我们将设置博客的主要字体,即适用于博客整个内容的字体。在这里,我们将使用 Google 字体的 Droid Serif。在
@import
样式表列表之后添加以下样式规则:
body {
font-family: "Droid Serif", Georgia, serif;
font-size: 16px;
}
-
我们将为标题(
h1
,h2
,h3
,h4
,h5
和h6
)应用不同的字体系列,以使其与正文内容区分开来。在这里,我们将应用从 Google 字体收集中带来的第二个自定义字体系列,Varela Round。 -
将以下行添加到标题应用 Varela Round:
h1, h2, h3, h4, h5, h6 {
font-family: "Varela Round", Arial, sans-serif;
font-weight: 400;
}
注意
默认情况下,浏览器将标题的粗细设置为bold
或600
。然而,Varela Round 只有普通字重,相当于400
。因此,如前面的代码片段所示,我们还将font-weight
设置为400
,以防止所谓的faux-bold。
有关 faux-bold 的更多信息,请参阅 A List Apart 文章Say No to Faux Bold(alistapart.com/article/say-no-to-faux-bold
)。
- 在这一步中,我们还将自定义默认的锚标签或链接样式。我个人偏好去掉默认链接样式的下划线。
注意
即使 Google 也删除了其搜索结果的下划线(www.theverge.com/2014/3/13/5503894/google-removes-underlined-links-site-redesign
)。
此外,我们还将链接颜色更改为#3498db
。它是蓝色的,但比默认链接样式中应用的蓝色更为柔和,如下面的截图所示:
- 添加以下行以更改默认链接颜色:
a {
color: #3498db;
text-decoration: none;
}
-
我们还将设置链接的悬停状态颜色。当鼠标光标悬停在链接上时,将显示这种颜色。在这里,我们将链接悬停颜色设置为
#2a84bf
,这是我们在第 4 步中设置的颜色的较暗版本。请看下面的截图: -
添加以下行以设置链接在悬停状态时的颜色,如下所示:
a:hover {
color: #2a84bf;
}
- 使用以下样式规则使图像具有流体性,如下所示:
img {
max-width: 100%;
height: auto;
}
此外,这些样式规则将防止图像在实际图像宽度大于容器时超出容器。
注意
有关流体图像的更多详细信息,请参阅 A List Apart 文章Fluid Images(alistapart.com/article/fluid-images
)。
刚刚发生了什么?
我们刚刚添加了一些样式规则,用于处理博客中的一些元素,即标题、链接和图像。在这个阶段,除了内容和标题中的字体系列更改以及链接颜色之外,博客中还没有出现明显的差异。请看下面的截图:
尝试一下-自定义链接颜色
请注意,链接颜色#2a84bf
是我个人的选择。在选择颜色时有许多考虑因素,例如品牌、受众和内容。链接不一定要是#2a84bf
。例如,星巴克网站(www.starbucks.co.id/about-us/pressroom
)中的链接颜色是绿色,这与其品牌身份有关。
因此,不要害怕探索和尝试新的颜色。以下是一些颜色想法:
接下来,我们将组合博客标题和导航样式规则。样式规则将主要通过元素的类应用。因此,在继续之前,请参考第二章网页开发工具,查看我们在元素中添加的类名和 ID。
行动时间-使用 CSS 增强标题和导航外观
步骤如下:
-
打开
main.css
。 -
使用
padding
在标题周围添加一些空白,并将标题颜色设置为#333
,如下所示:
.blog-header {
padding: 30px 15px;
background-color: #333;
}
- 为了使标志看起来突出,我们将使用 Varela Round 字体,这是我们用于标题的相同字体系列。我们还会使它变大,并将所有字母转换为大写,如下所示:
.blog-name {
font-family: "Varela Round", Arial, sans-serif;
font-weight: 400;
font-size: 42px;
text-align: center;
text-transform: uppercase;
}
- 标志链接颜色目前为
#2a84bf
,这是我们为链接<a>
设置的常用颜色。这种颜色与背景颜色不搭配。让我们将颜色改为白色,如下所示:
.blog-name a {
color: #fff;
}
- 设置搜索输入样式,如下所示:
.search-form input {
height: 36px;
background-color: #ccc;
color: #555;
border: 0;
padding: 0 10px;
border-radius: 30px;
}
这些样式规则设置了输入颜色、边框颜色和背景颜色。它将输入变成了如下所示的东西:
- 如前面的屏幕截图所示,占位文本几乎无法阅读,因为颜色与输入背景颜色融为一体。因此,让我们将文本颜色变得更深一些,如下所示:
.search-form input::-webkit-input-placeholder {
color: #555;
}
.search-form input:-moz-placeholder {
color: #555;
}
.search-form input::-moz-placeholder {
color: #555;
}
.search-form input:-ms-input-placeholder {
color: #555;
}
如果您使用 OS X 或 Ubuntu,您将看到突出显示当前目标时输入的发光颜色,如下面的屏幕截图所示:
在 OS X 中,发光颜色是蓝色。在 Ubuntu 中,它将是橙色。
- 我想要去掉这种发光效果。发光效果在技术上通过
box-shadow
显示。因此,为了去除这种效果,我们只需将输入的box-shadow
设置为none
,如下所示:
.search-form input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
值得注意的是,发光效果是用户体验(UX)设计的一部分,告诉用户他们当前正在输入字段中。如果用户只能用键盘浏览网站,这种 UX 设计尤其有帮助。
- 因此,我们将不得不创建一种效果,以带来类似的用户体验作为替代。在这里,我们将通过使输入背景颜色变浅来替换我们去除的发光效果。以下是此步骤的完整代码:
.search-form input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: #bbb;
}
如下面的屏幕截图所示,当焦点在输入时,输入背景颜色会变浅:
- 我们将为导航编写样式。首先,将菜单对齐到中心,并在导航的顶部和底部添加一些空白,使用
margin
。看一下以下代码:
.blog-menu {
margin: 30px 0;
text-align: center;
}
- 删除
<ul>
的左侧填充,如下所示:
.blog-menu ul {
padding-left: 0;
}
- 在菜单之间添加一些空白,并删除列表符号,如下所示:
.blog-menu li {
margin: 15px;
list-style-type: none;
}
- 自定义菜单颜色和字体,如下所示:
.blog-menu a {
color: #7f8c8d;
font-size: 18px;
text-transform: uppercase;
font-family: "Varela Round", Arial, sans-serif;
}
.blog-menu a:hover {
color: #3498db;
}
刚刚发生了什么?
我们刚刚装饰了标题和导航。与我们在本节前面讨论的以移动设备为先的思维方式相对应,我们首先将样式定位到优化博客在移动设备上的呈现。
激活 Chrome 移动模拟器,您会发现博客已经针对较小的屏幕尺寸进行了优化;标志和菜单,如下截图所示,与其左对齐相比,已对齐到中心:
尝试一下-自定义页眉
博客页眉给予了深色,#333
。我完全理解这种颜色可能对你们中的一些人来说很无聊。因此,可以自由定制颜色以及标志和搜索输入字段的样式。以下是一些想法:
-
使用 CSS3 渐变或图像作为页眉背景
-
通过 CSS 图像替换方法用图像替换标志
-
减少搜索输入边框半径,更改背景颜色,并调整占位符文本颜色
在处理了博客页眉和导航之后,我们继续处理博客内容部分。内容部分包括博客文章项目和博客分页。
行动时间-使用 CSS 增强内容部分的外观
执行以下步骤来设置博客内容的样式:
- 在内容部分的所有四周添加空白,使用
padding
和margin
,如下所示
.blog-content {
padding: 15px;
margin-bottom: 30px;
}
- 使用一些空白和边框来分隔每篇博客文章,如下所示:
.post {
margin-bottom: 60px;
padding-bottom: 60px;
border-bottom: 1px solid #ddd;
}
- 将标题对齐到中心,稍微调整标题字体大小,并使用以下样式规则更改颜色:
.post-title {
font-size: 36px;
text-align: center;
margin-top: 0;
}
.post-title a {
color: #333;
}
.post-title a:hover {
color: #3498db;
}
- 在标题下面,我们有
post-meta
,其中包括文章作者姓名和文章发布日期。与标题类似,我们还调整字体大小和空白,并更改字体颜色,如下所示:
.post-meta {
font-size: 18px;
margin: 20px 0 0;
text-align: center;
color: #999;
}
.post-meta ul {
list-style-type: none;
padding-left: 0;
}
.post-meta li {
margin-bottom: 10px;
}
-
正如您在下面的截图中所看到的,由于所有边缘的 margin,文章缩略图看起来又小又挤:
-
让我们移除这些 margin,如下所示:
.post-thumbnail {
margin: 0;
}
如下截图所示,一些图片有标题:
- 让我们对其进行样式设置,使其看起来与其他内容有所不同,并且显示它是一个图片标题。添加以下代码来设置标题的样式:
.post-thumbnail figcaption {
color: #bdc3c7;
margin-top: 15px;
font-size: 16px;
font-style: italic;
}
- 调整文章摘录的字体大小、颜色和行高,如下所示:
.post-excerpt {
color: #555;
font-size: 18px;
line-height: 30px;
}
- 从这一步开始,我们将编写博客分页的样式。首先,让我们对字体大小、字体系列、空白、位置和对齐进行一些调整,如下所示:
.blog-pagination {
text-align: center;
font-size: 16px;
position: relative;
margin: 60px 0;
}
.blog-pagination ul {
padding-left: 0;
}
.blog-pagination li,
.blog-pagination a {
display: block;
width: 100%;
}
.blog-pagination li {
font-family: "Varela Round", Arial, sans-serif;
color: #bdc3c7;
text-transform: uppercase;
margin-bottom: 10px;
}
- 将分页链接装饰成圆角边框,如下所示:
.blog-pagination a {
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
color: #7f8c8d;
padding: 15px 30px;
border: 1px solid #bdc3c7;
}
- 当鼠标悬停在链接上时指定链接的装饰,如下所示:
.blog-pagination a:hover {
color: #fff;
background-color: #7f8c8d;
border: 1px solid #7f8c8d;
}
- 最后,使用以下样式规则将页面编号指示器放置在分页链接的顶部:
.blog-pagination .pageof {
position: absolute;
top: -30px;
}
刚刚发生了什么?
我们刚刚对博客内容部分进行了样式设置,包括页面导航(分页),以下截图显示了内容部分的外观:
尝试一下-改进内容部分
我们在内容部分应用的大多数样式规则都是装饰性的。这不是您必须强制遵循的东西。请随意改进样式以符合您的个人品味。
您可以进行以下修改:
-
自定义文章标题字体系列和颜色
-
为文章图片应用边框颜色或圆角
-
更改分页边框颜色,或使背景更加丰富多彩
接下来,我们将为博客的最后一部分-页脚进行样式设置。
行动时间-使用 CSS 增强页脚部分的外观
执行以下步骤来增强页脚的样式:
- 调整页脚字体、颜色和 margin,如下所示:
.blog-footer {
background-color: #ecf0f1;
padding: 60px 0;
font-family: "Varela Round", Arial, sans-serif;
margin-top: 60px;
}
.blog-footer,
.blog-footer a {
color: #7f8c8d;
}
- 页脚包含社交媒体链接。让我们调整包括 margin、padding、对齐、颜色和空白的样式,如下所示:
.social-media {
margin: 0 0 30px;
}
.social-media ul {
margin: 0;
padding-left: 0;
}
.social-media li {
margin: 0 8px 10px;
list-style: none;
}
.social-media li,
.social-media a {
font-size: 18px;
}
.social-media a:hover {
color: #333;
}
- 将 margin-top 设置为版权容器之外。
.copyright {
margin-top: 0;
}
- 将页脚内容对齐到中心,如下所示:
.social-media,
.copyright {
text-align: center;
}
刚刚发生了什么?
我们刚刚为页脚部分添加了样式规则,下面的截图显示了博客页脚的外观:
优化博客以适应桌面
目前博客已经针对移动端或窄视口大小进行了优化。如果你在更大的视口大小下查看,你会发现一些元素位置不正确或未正确对齐。例如,博客标志和导航目前对齐到中间,如下截图所示:
根据我们在第三章中展示的蓝图,使用 Responsive.gs 构建简单响应式博客,标志应该对齐到左侧,每个菜单链接应该内联显示。在接下来的步骤中,我们将通过媒体查询来修复这些问题;我们将优化博客以适应桌面视图。
行动时间-为桌面编写样式规则
执行以下步骤为桌面编写样式规则:
-
在 Sublime Text 中打开
responsive.css
。 -
添加以下媒体查询:
@media screen and (min-width: 640px) {
// add style rules here
}
我们将在接下来的步骤中添加所有的样式规则到这个媒体查询中。这个媒体查询规定将应用样式规则在视口宽度从 640 像素及以上的范围内。
- 将博客标志对齐到左侧,如下所示:
.blog-name {
text-align: left;
margin-bottom: 0;
}
- 将导航菜单、文章元数据和社交媒体的列表项内联显示,如下所示:
.blog-menu li,
.post-meta li,
.social-media li {
display: inline;
}
- 增加文章标题的大小,如下所示:
.post-title {
font-size: 48px;
}
- 同时,将博客分页链接内联显示,如下所示:
.blog-pagination li,
.blog-pagination a {
display: inline;
}
- 将分页页码指示器放在初始位置——与博客分页链接一起,如下所示:
.blog-pagination .pageof {
position: relative;
top: 0;
padding: 0 20px;
}
- 将页脚中的社交媒体链接对齐到左侧,版权声明对齐到右侧,如下所示:
.social-media {
text-align: left;
}
.copyright {
text-align: right;
}
刚刚发生了什么?
我们刚刚添加了适用于桌面视图的样式规则。如果你现在在大于 640 像素的视口宽度下查看博客,你应该会发现博客中的元素,如标志和导航菜单,处于它们通常的位置,如下截图所示:
使用 polyfills 使 Internet Explorer 更强大
使用辉煌的 CSS3 和 HTML5 功能会带来一个后果:布局在旧的 Internet Explorer 中失败并且破碎,如下截图所示:
如果你对此满意,可以跳过这一部分,立即转到下一个项目。然而,如果你感到有冒险精神,让我们继续这一部分并修复这些错误。
行动时间-使用 polyfills 修补 Internet Explorer
执行修补 Internet Explorer 的步骤:
-
我们在 scripts 文件夹中有一些 polyfills,分别是
html5shiv.js
,respond.js
和placeholder.js
。让我们将这些脚本合并成一个文件。 -
首先,创建一个名为
polyfills.js
的新 JavaScript 文件,用于保存这些 polyfill 脚本的内容。 -
在 Sublime Text 中打开
polyfills.js
。 -
添加以下行来导入 polyfill 脚本:
// @koala-prepend "html5shiv.js"
// @koala-prepend "respond.js"
// @koala-prepend "placeholder.js"
注意
@koala-prepend
指令是 Koala 专有的导入 JavaScript 文件的指令。在 Koala 文档页面github.com/oklai/koala/wiki/JS-CSS-minify-and-combine
中了解更多信息。
- 在 Koala 中,选择
polyfills.js
,并点击Compile按钮,如下截图所示:
通过这一步,Koala 将生成名为polyfills.min.js
的压缩文件。
- 在
index.html
中,在</head>
之前链接polyfills.js
,如下所示:
<!--[if lt IE 9]>
<script type="text/javascript" src="img/polyfills.min.js"></script>
<![endif]-->
注意
由于这个脚本只在 Internet Explorer 8 及以下版本中需要,我们用 Internet Explorer 条件注释<!--[if lt IE 9]>
将它们封装起来,如你在前面的代码片段中所见。
有关 Internet Explorer 条件注释的更多信息,请参考 QuirksMode 文章www.quirksmode.org/css/condcom.html
。
发生了什么?
我们刚刚在博客中应用了 polyfills 来修复 Internet Explorer 在 HTML5 和媒体查询中的渲染问题。这些 polyfills 可以立即使用。刷新 Internet Explorer,就完成了!请看下面的屏幕截图:
发生了什么?
样式规则已经应用,布局已经就位,占位文本也在那里。
来吧英雄-为 Internet Explorer 完善博客
我们将结束这个项目。但是,正如您从前面的屏幕截图中所看到的,仍然有许多问题需要解决,以使博客在旧版 Internet Explorer 中的外观与最新浏览器一样好。例如:
-
参考前面的屏幕截图,占位文本目前是对齐到顶部的。您可以修复它,使其垂直居中对齐。
-
您还可以应用一个名为 CSS3Pie 的 polyfill(
css3pie.com/
),它可以在 Internet Explorer 中实现 CSS3 边框半径,使搜索输入字段的外观与最新的浏览器版本一样圆角。
总结
我们完成了第一个项目;我们使用 Responsive.gs 构建了一个简单的响应式博客。博客的最终结果可能对您来说并不那么吸引人。特别是在旧版 Internet Explorer 中,它也远非完美;正如前面提到的,仍然有许多问题需要解决。不过,我希望您能从这个过程中获得一些有用的东西,包括其中的技术和代码。
总之,在本章中,我们已经增强和完善了博客的 CSS3,使用 Koala 来合并和最小化样式表和 JavaScript 文件,并应用了 polyfills 来修复 Internet Explorer 在 HTML5 和 CSS3 中的问题。
在下一章中,我们将开始第二个项目。我们将探索另一个框架,以构建一个更广泛和响应式的网站。
第五章:使用 Bootstrap 开发投资组合网站
Bootstrap (getbootstrap.com/
) 是最坚固的前端开发框架之一。它具有令人惊叹的功能,如响应式网格、用户界面组件和 JavaScript 库,让我们能够快速构建响应式网站。
Bootstrap 如此受欢迎,以至于 Web 开发社区积极支持它,通过开发各种形式的扩展来添加额外功能。如果 Bootstrap 提供的标准功能不足够,可以有扩展来满足特定需求。
在本章中,我们将开始第二个项目。我们将使用 Bootstrap 构建一个响应式的投资组合网站。因此,本章显然对那些从事摄影、平面设计和插图等创意领域工作的人很有用。
在这里,我们还将使用 Bootstrap 扩展来为投资组合网站提供侧栏导航。在使用 Bootstrap 之后,我们将把 LESS 作为网站样式表的基础。
让我们继续。
本章我们将讨论以下内容:
-
探索 Bootstrap 组件
-
研究 Bootstrap 扩展以实现侧栏导航
-
检查投资组合网站蓝图和设计
-
使用 Bower 和 Koala 设置和组织项目目录和资产
-
构建投资组合网站 HTML 结构
Bootstrap 组件
与我们在第一个项目中使用的 Responsive.gs 框架不同,Bootstrap 附带了额外的组件,这些组件在 Web 上通常使用。因此,在我们进一步开发投资组合网站之前,首先让我们探索这些组件,主要是我们将在网站中使用的响应式网格、按钮和表单元素等。
注意
坦率地说,官方的 Bootstrap 网站(getbootstrap.com/
)始终是与 Bootstrap 相关的任何内容保持最新的最佳来源。因此,在这里,我想指出一些直接的关键事项。
Bootstrap 响应式网格
Bootstrap 配备了一个响应式网格系统,以及形成列和行的支持类。在 Bootstrap 中,我们使用这些前缀类来构建列:col-xs-
、col-sm-
、col-md-
和col-lg-
。然后是列号,范围从1
到12
,用于定义列的大小以及针对特定视口大小的列。请参阅以下表格以获取有关前缀的更多详细信息:
前缀 | 描述 |
---|---|
col-xs- |
这指定了 Bootstrap 定义的最小(超小)视口大小的列,即小于或等于 768 像素 |
col-sm- |
这指定了 Bootstrap 定义的小视口大小的列,即大于或等于 768 像素。 |
col-md- |
这指定了 Bootstrap 定义的中等视口大小的列,即大于或等于 992 像素 |
col-lg- |
这指定了 Bootstrap 定义的大视口大小的列,即大于或等于 1,200 像素 |
在下面的示例中,我们在一行中设置了三列,每列分配了一个col-sm-4
类:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
因此,每列的大小将相同,并且它们会缩小到 Bootstrap 定义的小视口大小(≥ 768px)。以下屏幕截图显示了在浏览器中添加一些样式后的标记效果:
查看小于 768 像素的视口大小的示例,所有这些列将开始堆叠——第一列在顶部,第三列在底部,如下图所示:
此外,我们可以添加多个类来指定多个视口大小内的列比例,如下所示:
<div class="row">
<div class="col-sm-6 col-md-2 col-lg-4"></div>
<div class="col-sm-3 col-md-4 col-lg-4"></div>
<div class="col-sm-3 col-md-6 col-lg-4"></div>
</div>
根据上述示例,在 Bootstrap 定义的大视口大小(≥ 1,200 像素)内,列的大小将相同,如下截图所示:
然后,当我们在中等视口大小下查看时,根据每个列上分配的类,列的比例将开始变化。第一列的宽度将变小,第二列将保持相同比例,而第三列将变大,如下截图所示:
当网站处于 Bootstrap 定义的中等和小视口大小的临界点时(大约为 991 像素),列的比例将再次开始变化,如下截图所示:
注意
要了解如何构建 Bootstrap 网格,请前往 Bootstrap 官方网站的网格系统部分(getbootstrap.com/css/#grid
)。
Bootstrap 按钮和表单
我们将在网站中加入其他组件,如按钮和表单。我们将创建一个在线联系方式,用户可以通过该方式与我们联系。在 Bootstrap 中,按钮由btn
类和btn-default
组成,以应用 Bootstrap 默认样式,如下代码所示:
<button type="button" class="btn btn-default">Submit</button>
<a class="btn btn-default">Send</a>
将btn-default
类替换为btn-primary
、btn-success
或btn-info
,以给按钮指定颜色,如下代码所示:
<button type="button" class="btn btn-info">Submit</button>
<a class="btn btn-success">Send</a>
以下代码片段使用这些类定义按钮大小:btn-lg
使按钮变大,btn-sm
使其变小,btn-xs
使按钮变得更小,如下代码所示:
<button type="button" class="btn btn-info btn-lg">Submit</button>
<a class="btn btn-success btn-sm">Send</a>
以下截图显示了在添加前述类时按钮大小的变化:
Bootstrap 允许我们以多种方式显示按钮,例如将一系列按钮内联显示或在按钮中添加下拉切换。要了解如何构建这些类型的按钮,请前往 Bootstrap 官方网站的按钮组(getbootstrap.com/components/#btn-groups
)和按钮下拉切换(getbootstrap.com/components/#btn-dropdowns
)部分获取更多帮助和详细信息。
Bootstrap 按钮组和带下拉切换的按钮
Bootstrap 还提供了一些可重复使用的类来为表单元素(如<input>
和<textarea>
)添加样式。Bootstrap 使用form-control
类来为表单元素添加样式。样式轻巧得体,如下截图所示:
有关在 Bootstrap 中对表单元素进行样式和排列的更多信息,请参阅 Bootstrap 官方页面的表单部分(getbootstrap.com/css/#forms
)。
Bootstrap Jumbotron
Bootstrap 将 Jumbotron 描述如下:
“一种轻量灵活的组件,可以选择性地扩展整个视口,以展示站点上的关键内容”(
getbootstrap.com/components/#jumbotron
)
Jumbotron 是一个特殊的部分,用于显示网站的首行消息,如营销文案、口号或特别优惠,另外还有一个按钮。Jumbotron 通常放置在折叠区域上方和导航栏下方。要在 Bootstrap 中构建 Jumbotron 部分,请应用jumbotron
类,如下所示:
<div class="jumbotron">
<h1>Hi, This is Jumbotron</h1>
<p>Place the marketing copy, catchphrases, or special offerings.</p>
<p><a class="btn btn-primary btn-lg" role="button">Got it!</a></p>
</div>
使用 Bootstrap 默认样式,Jumbotron 的外观如下:
这是默认样式下的 Jumbotron 外观
注意
有关 Bootstrap Jumbotron 的更多细节可以在 Bootstrap 组件页面找到(getbootstrap.com/components/#jumbotron
)。
Bootstrap 第三方扩展
无法满足每个人的需求,Bootstrap 也是如此。有许多形式的扩展被创建出来,包括 CSS、JavaScript、图标、起始模板和主题,以扩展 Bootstrap。在这个页面上找到完整的列表(bootsnipp.com/resources
)。
在这个项目中,我们将包括一个名为 Jasny Bootstrap(jasny.github.io/bootstrap/
)的扩展,由 Arnold Daniels 开发。我们将主要用它来整合 off-canvas 导航。off-canvas 导航是响应式设计中的一种流行模式;菜单导航首先设置在网站的可见区域之外,通常只有在点击或轻触时才会滑入,如下面的截图所示:
当用户点击三条杠图标时,off-canvas 部分滑入
Jasny Bootstrap off-canvas
Jasny Bootstrap 是一个为原始 Bootstrap 添加额外构建块的扩展。Jasny Bootstrap 是以 Bootstrap 为设计基础的;它几乎在每个方面都遵循 Bootstrap 的约定,包括 HTML 标记、类命名、JavaScript 函数以及 API。
如前所述,我们将使用这个扩展在作品集网站中包含 off-canvas 导航。以下是一个构建 off-canvas 导航的 Jasny Bootstrap 示例代码片段:
<nav id="offcanvas-nav" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#offcanvas-nav" data-target="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
从上面的代码片段可以看出,构建 off-canvas 导航需要大量的 HTML 元素、类和属性。首先,我们需要两个元素,<nav>
和<div>
,分别包含菜单和切换导航菜单的按钮。<nav>
元素被赋予一个 ID,作为唯一的参考,通过<button>
中的data-target
属性来定位目标菜单。
在这些元素中添加了一些类和属性,用于指定颜色、背景、位置和功能:
-
navmenu
:Jasny Bootstrap 有一种新类型的导航,称为 navmenu。navmenu
类将垂直显示导航,并放置在网站内容的侧面——右侧或左侧,而不是顶部。 -
navmenu-default
:这个类将使用默认样式设置navmenu
类,主要是浅灰色。如果你喜欢深色,可以使用navmenu-inverse
类。看一下下面的截图:
off-canvas 导航的两种默认颜色
-
navmenu-fixed-left
类将导航菜单定位在左侧。使用navmenu-fixed-right
类将其设置在右侧。 -
offcanvas
类是将导航菜单设置在画布之外的主要类。 -
<button>
中的data-target="#offcanvas-nav"
代码作为一个选择器,指向具有给定 ID 的特定导航菜单。 -
data-toggle="offcanvas"
代码告诉按钮切换 off-canvas 导航。此外,原始的 Bootstrap 还附带了几种data-toggle
类型,用于连接不同的小部件,比如模态框(data-toggle="modal"
)、下拉菜单(data-toggle="dropdown"
)和选项卡(data-toggle="tab"
)。 -
data-target="body"
让网站主体在 off-canvas 导航被切换时同时滑动。Jasny Bootstrap 称之为推动菜单;访问这个页面(jasny.github.io/bootstrap/examples/navmenu-push/
)来看它的实际效果。
注意
此外,Jasny Bootstrap 提供了两种额外类型的画布导航,名为滑入菜单(jasny.github.io/bootstrap/examples/navmenu/
)和展示菜单(jasny.github.io/bootstrap/examples/navmenu-reveal/
)-请访问包含的 URL 以查看它们的运行情况。
深入了解 Bootstrap
探索 Bootstrap 组件的每一寸都超出了本书的能力范围。因此,我们只讨论了 Bootstrap 中对项目至关重要的一些内容。除了 Bootstrap 官方网站(getbootstrap.com/
)之外,以下是一些深入研究 Bootstrap 的专门参考资料,您可以查看:
-
初学者的 Bootstrap 教程由 Coder's Guide 提供(
www.youtube.com/watch?v=YXVoqJEwqoQ
),这是一系列视频教程,帮助初学者快速上手 Bootstrap -
Twitter Bootstrap Web Development How-To, David Cochran, Packt Publishing (
www.packtpub.com/web-development/twitter-bootstrap-web-development-how-instant
) -
Mobile First Bootstrap, Alexandre Magno, Packt Publishing (
www.packtpub.com/web-development/mobile-first-bootstrap
)
使用字体图标
Retina 或高清(HD)显示使屏幕上的所有内容看起来更清晰,更生动。但问题在于在高清显示出现之前带来的传统图像或网络图标。这些图像通常作为位图或光栅图像提供,并且在这个屏幕上变得模糊,如下面的屏幕截图所示:
一系列在视网膜显示器上模糊的图标
我们不希望这种情况发生在我们的网站上,因此我们将不得不使用更可伸缩并在高清屏幕上保持清晰的字体图标。
说实话,Bootstrap 附带了一个名为 Glyphicon 的字体图标集。遗憾的是,它没有我们需要的社交媒体图标。在浏览了许多字体图标集之后,我最终选择了 Ionicons(ionicons.com/
)。在这里,我们将使用由 Lance Hudson 开发的带有 LESS 的替代版本(github.com/lancehudson/ionicons-less
),因此我们将能够与 Bootstrap 无缝集成,后者也使用 LESS。
检查投资组合网站布局
在我们开始构建网站的块和边缘之前,让我们看一下网站线框图。这个线框图将成为参考,并让我们了解网站布局在移动和桌面视图中将如何组织。
上面的屏幕截图显示了桌面或技术上说是宽视口大小的网站布局。
网站将在网站的左上方放置一个按钮,带有所谓的汉堡图标,以滑入画布菜单。然后是网站的第一行,显示网站名称和一行口号。接下来的部分将包含投资组合图像,而最后一部分将包含在线表单和社交媒体图标。
移动视图看起来更简化,但保持了与桌面视图布局相同的逻辑结构,如下面的屏幕截图所示:
项目目录、资产和依赖项
让我们通过组织项目目录和包括依赖项、图像和字体图标在内的资产来开始项目。
注意
什么是依赖关系?这里的依赖关系是指运行项目和构建网站所需的文件或文件包,如 CSS 和 JavaScript 库。
在这个项目中,我们将实践使用 Bower(bower.io/
)来组织项目的依赖关系。Bower,正如我们在第一章中简要提到的那样,响应式 Web 设计,是一个前端包管理器,简化了安装、移除和更新前端开发库(如 jQuery、Normalize 和 HTML5Shiv)的方式。
进行操作-组织项目目录、资产和使用 Bower 安装项目依赖关系
在本节中,我们将添加包括 Bootstrap、Jasny Bootstrap、Ionicons 和 HTML5Shiv 在内的项目依赖关系。我们将使用 Bower 安装它们,以便将来更轻松地维护它们——移除和更新它们。
此外,由于这可能是您中的许多人第一次使用 Bower,我将以缓慢的速度逐步为您讲解整个过程。请仔细执行以下步骤:
-
在
htdocs
文件夹中,创建一个新文件夹,并将其命名为portfolio
。这是项目目录,我们将在其中添加所有项目文件和文件夹。 -
在
portfolio
文件夹中,创建一个名为assets
的新文件夹。我们将把项目资产,如图像、JavaScript 和样式表放在这个文件夹中。 -
在资产文件夹中,创建以下文件夹:
-
img
用于包含网站图像和基于图像的图标 -
js
用于包含 JavaScript 文件 -
fonts
用于包含字体图标集 -
less
用于包含 LESS 样式表 -
css
作为 LESS 的输出文件夹
-
创建
index.html
作为网站的主页。 -
在
img
文件夹中添加网站的图像;这包括作品集图像和移动设备的图标,如下面的屏幕截图所示:
注意
这个网站大约有 14 张图片,包括移动设备的图标。我要感谢我的朋友 Yoga Perdana(dribbble.com/yoga
)允许我在这本书中使用他的精彩作品。您可以在本书中找到这些图像。但是,当然,您也可以用您自己的图像替换它们。
-
我们将通过 Bower 安装依赖关系——运行项目和构建网站所需的包、库、JavaScript 或 CSS——但在运行任何 Bower 命令来安装依赖关系之前,我们希望使用
bower init
命令将项目设置为 Bower 项目,以定义bower.json
中的项目规范,如项目名称、版本和作者。 -
首先,打开终端或命令提示符(如果您使用 Windows)。然后,使用
cd
命令导航到项目目录,如下所示:
-
在 Windows 中:
cd \xampp\htdocs\portfolio
-
在 OS X 中:
cd /Applications/XAMPP/htdocs/portfolio
-
在 Ubuntu 中:
cd /opt/lampp/htdocs/portfolio
- 输入
bower init
,如下面的屏幕截图所示:
注意
这个命令bower init
将我们的项目初始化为一个 Bower 项目。这个命令还会引导我们填写一些提示,以描述项目,比如项目名称、项目版本、作者等。
-
首先,我们指定项目名称。在这种情况下,我想将项目命名为
responsive-portfolio
。输入名称如下,并按Enter继续。请看下面的屏幕截图: -
指定项目版本。由于项目是新的,让我们简单地将其设置为
1.0.0
,如下面的屏幕截图所示: -
按下Enter键继续。
-
指定项目描述。此提示完全是可选的。如果您认为对于您的项目不需要,可以将其留空。在这种情况下,我将描述项目为
使用 Bootstrap 构建的响应式作品集网站
,如下面的屏幕截图所示: -
指定项目的主文件。这肯定会根据项目而变化。在这里,让我们将主文件设置为
index.html
,网站的首页,如下面的屏幕截图所示: -
这提示了一个问题,“这个软件包暴露了什么类型的模块?”它指定了软件包的用途。在这种情况下,只需选择全局选项,如下面的屏幕截图所示:
-
按空格键选择它,然后按Enter继续。
注意
此提示描述了项目中的模块技术(我们的项目)的用途。我们的项目没有附属于特定技术或模块;它只是一个纯静态的网站,包括 HTML、CSS 和几行 JavaScript。我们不构建 Node、YUI 或 AMD 模块。因此,最好选择globals
选项。
- 关键字提示告诉项目的关系。在这种情况下,我想将其填写为
作品集
,响应式
,bootstrap
,如下面的屏幕截图所示。按Enter继续:
关键字提示是可选的。如果您愿意,可以将其留空,然后按Enter键。
- 作者提示指定了项目的作者。此提示预填了您在系统中注册的计算机用户名和电子邮件。然而,您可以通过指定一个新名称并按Enter继续来覆盖它,如下面的屏幕截图所示:
提示
如果项目有多个作者,您可以使用逗号分隔符指定每个作者,如下所示:
作者: 约翰·多, 简·多
。
- 指定项目的许可证。在这里,我们将简单地将其设置为
MIT
许可证。MIT
许可证允许任何人对项目中的代码做任何他或她想做的事情,包括修改、转让和商业使用。请看下面的屏幕截图:
注意
参考选择许可证(choosealicense.com/
)以找到其他类型的许可证。
-
指定项目的主页。这可以是您自己的网站存储库。在这种情况下,我想将其设置为我的个人域名
creatiface.com
,如下面的屏幕截图所示: -
在将当前安装的组件设置为依赖项?命令中,输入
n
(否),因为我们还没有安装任何依赖项或软件包,如下面的屏幕截图所示: -
将常见的忽略文件添加到忽略列表中?命令将创建包含要从 Git 存储库中排除的常见文件列表的
.gitignore
文件。键入Y
以确认。请查看下面的屏幕截图:
注意
我将使用 Git 来管理代码修订,并将其上传到 Git 存储库,如 Github 或 Bitbucket,因此我选择了Y
(是)。但是,如果您尚未熟悉 Git,并且不打算在 Git 存储库中托管项目,您可以忽略此提示并键入n
。 Git 超出了本书讨论的范围。要了解有关 Git 的更多信息,我推荐以下最佳参考资料:
通过 GitTower 学习初学者的 Git (www.git-tower.com/learn/
)。
-
对于您是否想将此软件包标记为私有,以防止意外发布到注册表中?命令,键入
Y
,因为我们不会将项目注册到 Bower 注册表中。请查看下面的屏幕截图: -
检查输出。如果看起来不错,请在
bower.json
文件中键入Y
以生成输出,如下面的屏幕截图所示: -
有许多库我们想要安装。首先,让我们使用
bower install bootstrap ––save
命令安装 Bootstrap,如下面的屏幕截图所示:
在命令后面的--save
参数将在bower.json
中注册 Bootstrap 作为项目依赖项。如果您打开它,您应该会发现它记录在依赖项下,如下面的屏幕截图所示:
您还应该在新文件夹bower_components
中找到保存的 Bootstrap 软件包,以及作为 Bootstrap 依赖项的 jQuery,如下面的屏幕截图所示:
-
使用
bower install jasny-bootstrap –save
命令安装 Bootstrap 扩展 Jasny Bootstrap。 -
使用
bower install ionicons-less –save
命令安装带有 LESS 样式表的 Ionicons。 -
Ionicons 软件包附带字体文件。将它们移动到项目目录的
fonts
文件夹中,如下面的屏幕截图所示: -
最后,使用
bower install html5shiv ––save
命令安装 HTML5Shiv,以在 Internet Explorer 8 及以下版本中启用 HTML5 的新元素。
刚刚发生了什么?
我们刚刚创建了文件夹和网站首页文档index.html
。还准备了将显示在网站上的图像和图标。我们还在bower.json
中记录了项目规范。通过这个文件,我们可以知道项目的名称是responsive-portfolio
,当前版本为 1.0.0,并且有一些依赖项,如下所示:
-
Bootstrap (
github.com/twbs/bootstrap
) -
Jasny Bootstrap (
jasny.github.io/bootstrap/
) -
带有 LESS 的 Ionicons (
github.com/lancehudson/ionicons-less
) -
HTML5Shiv (
github.com/aFarkas/html5shiv
)
我们通过bower install
命令下载了这些库,这比下载和解压.zip
包要简洁。所有的库应该已经添加到一个名为bower_components
的文件夹中,如下面的截图所示:
尝试自定义 Bower 目录
默认情况下,Bower 会创建一个名为bower_components
的新文件夹。Bower 允许我们通过 Bower 配置文件.bowerrc
来配置文件夹名称。通过创建.bowerrc
文件,根据您的喜好更改文件夹名称。请参考此参考链接(bower.io/docs/config/
)来配置 bower。
小测验-测试您对 Bower 命令的理解
Q1. 我们已经向您展示了如何使用 Bower 安装和更新库。现在的问题是:如何删除已安装的库?
-
运行
bower remove
命令。 -
运行
bower uninstall
命令。 -
运行
bower delete
命令。
Q2. 除了安装和删除库之外,我们还可以通过 Bower 注册表搜索库的可用性。如何通过 Bower 注册表搜索库?
-
运行
bower search
,然后跟上关键字。 -
运行
bower search
,然后跟上库名称。 -
运行
bower browse
,然后跟上关键字。
Q3. Bower 还允许我们查看包属性的详细信息,例如包版本、依赖关系、作者等。我们执行什么命令来查看这些详细信息?
-
bower info
。 -
bower detail
。 -
bower property
。
更新 Bower 组件
由于依赖项是通过 Bower 安装的,因此项目的维护将更加简化。这些库可以在以后更新到新版本。通过使用 Bower 命令,更新我们刚刚安装的库实际上比下载.zip
包并手动将文件移动到项目目录中更加简洁。
运行bower list
命令以查看所有已安装的 Bower 包,并检查包的新版本是否可用,如下面的截图所示:
然后,使用bower install
命令安装新版本,后面跟着 Bower 包名称和版本号。例如,要安装 Bootstrap 版本 3.2.0,运行bower install bootstrap#3.2.0 ––save
命令。
注意
实际上,我们应该能够使用bower update
命令来更新包。然而,根据 Bower Issue 线程中的一些报告,这个命令似乎并不按预期工作(github.com/bower/bower/issues/1054
)。因此,目前使用先前展示的bower install
命令是正确的方法。
作品集网站 HTML 结构
现在我们已经准备好构建网站所需的基本内容。让我们开始构建网站的 HTML 结构。与上一个项目一样,在这里,我们将使用一些新的 HTML5 元素来构建语义结构。
行动时间-构建网站 HTML 结构
在这一部分,我们将构建网站的 HTML 结构。您会发现,我们将在这里添加的一些元素与我们在第一个网站中添加的元素相似。因此,以下步骤将是直接的。如果您已经从头到尾地跟随了第一个项目,那么这些步骤也应该很容易跟随。让我们继续。
- 打开
index.html
。然后,添加基本的 HTML 结构,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
</head>
<body>
</body>
</html>
- 在
<meta charset="UTF-8">
下面,添加一个 meta 标签来解决 Internet Explorer 的渲染兼容性问题:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
前面的 meta 标签规范将强制 Internet Explorer 使用其中的最新引擎版本来渲染页面。
注意
有关X-UA-Compatible
的更多信息,请参考 Modern.IE 文章,如何使用 X-UA-Compatible(www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
)。
- 在
http-equiv
meta 标记下方,添加 meta 视口标记:
<meta name="viewport" content="width=device-width, initial-scale=1">
前面的视口 meta 标记规定了网页视口宽度要遵循设备视口大小,并在首次打开网页时以 1:1 的比例缩放页面。
- 在视口 meta 标记下方,添加到 favicon 和 apple-touch-icon 的链接,这将在苹果设备(如 iPhone、iPad 和 iPod)上显示网站的图标:
<link rel="apple-touch-icon" href="assets/img/apple-icon.png">
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
- 在
<title>
下方添加网站的 meta 描述:
<meta name="description" content="A simple portoflio website built using Bootstrap">
在这个 meta 标记中指定的描述将显示在搜索引擎结果页面(SERP)中。
- 您还可以按照以下方式在 meta 描述标记下方指定页面的作者。
<meta name="author" content="Thoriq Firdaus">
- 在
<body>
内,按照以下方式添加网站的侧栏导航 HTML:
<nav id="menu" class="navmenu navmenu-inverse navmenu-fixed-left offcanvas portfolio-menu" role="navigation">
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Speaking</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
除了本章中 Jasny Bootstrap 侧栏部分提到的基本类之外,我们还在<nav>
元素中添加了一个名为portfolio-menu
的新类,以应用我们自己的样式到侧栏导航。
- 添加 Bootstrap
navbar
结构,以及用于滑动侧栏的<button>
:
<div class="navbar navbar-default navbar-portfolio portfolio-topbar">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#menu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
- 在“导航栏”下方,添加
<main>
元素,如下所示:
<main class="portfolio-main" id="content" role="main">
</main>
正如 W3C(www.w3.org/TR/html-main-element/
)中所描述的,<main>
元素定义了网站的主要内容。因此,这就是我们将放置网站内容的地方,包括作品集图片。
- 添加 Bootstrap Jumbotron,包含作品集网站名称和一行标语。由于我将展示一个朋友的作品,Yoga Perdana 的作品,我希望展示他的名字,以及他在 Dribbble 页面个人资料中显示的标语(
dribbble.com/yoga
),如下所示:
<main class="portfolio-main" id="content" role="main">
<section class="jumbotron portfolio-about" id="about">
<h1 class="portfolio-name">Yoga Perdana</h1>
<p class="lead">Illustrator & Logo designer. I work using digital tools, specially vector.</p>
</section>
</main>
您可以自由地在此处添加您的姓名或公司名称。
- 在 Bootstrap Jumbotron 部分下方,使用 HTML5
<section>
元素添加一个新的部分,并包含定义此部分的标题,如下所示:
...
<section class="jumbotron portfolio-about" id="about">
<h1 class="portfolio-name">Yoga Perdana</h1>
<p class="lead">Illustrator & Logo designer. I work using digital tools, specially vector.</p>
</section>
<section class="portfolio-display" id="portfolio">
<h2>Portfolio</h2>
</section>
- 在包含以下代码的标题下方添加 Bootstrap 容器(
getbootstrap.com/css/#overview-container
),该容器将包含作品集图片:
<section class="portfolio-display" id="portfolio">
<h2>Portfolio</h2>
<div class="container">
</div>
</section>
- 将作品集图片排列成列和行。我们有 12 张作品集图片,这意味着我们可以在一行中有四张图片/列。以下是第一行:
...
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="img/6layers.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">6 Layers</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="img/blur.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Blur</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="img/brain.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Brain</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="img/color.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Color</figcaption>
</figure>
</div>
</div>
</div>
每列都分配了一个特殊的类,以便我们可以应用自定义样式。我们还在包裹图片的<figure>
中添加了一个类,以及包裹图片标题的<figcaption>
元素,以达到同样的目的。
-
将剩余的图片添加到列和行中。在这种情况下,我们有 12 张图片,因此网站上应该显示三行。每行包含四张图片,包括我们在第 13 步中添加的一行。
-
在作品集部分下方,添加包含三个表单字段和一个按钮的网站留言表单,如下所示:
...
</section>
<div class="portfolio-contact" id="contact">
<div class="container">
<h2>Get in Touch</h2>
<form id="contact" method="post" class="form" role="form">
<div class="form-group">
<input type="text" class="form-control input-lg" id="input-name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control input-lg" id="input-email" placeholder="Email">
</div>
<div class="form-group">
<textarea class="form-control" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
</form>
</div>
</div>
在这里,我们只用了三个表单字段来简化网站表单。但是,您可以根据自己的需求添加额外的表单字段。
-
最后,我们将使用 HTML5
<footer>
元素添加网站页脚。页脚,正如我们从网站线框图中看到的那样,包含社交媒体图标和网站版权声明。 -
在网站的主要内容下方添加以下 HTML 标记:
...
</main>
<footer class="portfolio-footer" id="footer">
<div class="container">
<div class="social" id="social">
<ul>
<li class="twitter"><a class="icon ion-social-twitter" href="#">Twitter</a></li>
<li class="dribbble"><a class="icon ion-social-dribbble-outline" href="#">Dribbble</a></li>
</ul>
</div>
<div class="copyright">Yoga Perdana © 2014</div>
</div>
</footer>
刚刚发生了什么?
我们刚刚使用了一些 HTML5 元素和 Bootstrap 可重用类构建了投资组合网站的 HTML 结构。您应该能够通过以下地址http://localhost/portfolio/
或http://{computer-username}/portfolio/
来查看网站,如果您使用的是 OS X。在这个阶段,网站还没有应用任何样式;我们还没有在页面中链接任何样式表。因此,接下来的提示后面的屏幕截图是网站当前的外观。
提示
在前面步骤中显示的完整代码也可以从以下 Gist git.io/oIh31w
获取。
尝试一下 - 扩展投资组合网站
Bootstrap 提供了各种组件。然而,我们只使用了一些,包括网格、Jumbotron、按钮和表单。通过添加额外的 Bootstrap 组件来扩展网站,如下所示:
此外,尝试创建更多的网页,并通过侧栏导航菜单将它们链接起来。
弹出测验 - Bootstrap 按钮类
Bootstrap 指定了许多可重用类,可以快速地为元素设置预设样式。
Q1. 以下哪个类在 Bootstrap 网格中没有被使用?
-
col-sm-pull-8
-
col-md-push-3
-
col-xs-offset-5
-
col-lg-6
-
col-xl-7
Q2. 以下哪个类用于样式化按钮?
-
btn-link
-
btn-submit
-
btn-send
-
btn-cancel
-
btn-enter
摘要
本章开始了本书的第二个项目。我们正在使用最流行的前端开发框架之一 Bootstrap 构建一个投资组合网站。我们还探索了一个名为 Bower 的新的引人注目的网页开发工具,它简化了网站依赖管理。
它们都是工具的绝佳组合。Bootstrap 让我们可以快速使用模块化组件和可重用类构建响应式网站,而 Bower 使项目更易于维护。
在下一章中,我们将更多地处理 LESS 和 JavaScript 来装饰网站。
第六章:使用 LESS 完善响应式作品集网站
在前一章中,我们使用 HTML5 和一些 Bootstrap 插入类构建了作品集网站的结构。你可能已经看到,网站还没有装饰。我们还没有编写自己的样式或将样式表链接到页面上。因此,本章的重点将放在网站装饰上。
Bootstrap 主要使用 LESS 来生成其组件的样式。我们将遵循其步伐,也使用 LESS 来为作品集网站设计样式。LESS 带来了许多功能,如变量和混合,这将使我们能够编写更精简和高效的样式规则。最终,你会发现使用 LESS 来定制和维护网站样式比纯 CSS 更容易。
此外,我们还使用了一个名为 Jasny Bootstrap 的 Bootstrap 扩展来将侧栏导航包含到作品集网站中。在这个阶段,侧栏导航不会发生任何变化;我们只是设置了 HTML 结构。因此,在本章中,除了编译网站样式,我们还将编译 Bootstrap 和 Jasny Bootstrap 的 JavaScript 库,以使侧栏导航功能正常。
在本章中,我们将讨论许多内容,包括以下主题:
-
学习基本的 LESS 语法,如变量和混合
-
使用 LESS 的
@import
指令整理样式表引用 -
配置 Koala 以将 LESS 编译为常规 CSS
-
查看源映射以调试 LESS
-
使用 LESS 编写网站自定义样式
-
将 JavaScript 编译为静态 CSS 以激活侧栏导航
基本 LESS 语法
LESS(lesscss.org/
)是由 Alexis Sellier(cloudhead.io/
)开发的基于 JavaScript 的 CSS 预处理器,也被称为 CloudHead。如前所述,Bootstrap 使用 LESS 来组合其组件样式,尽管它最近才正式发布了 Sass 版本。我们将遵循 Bootstrap 使用 LESS 来组合我们自己的样式规则和管理样式表。
简而言之,LESS 通过引入一些编程特性(如变量、函数和操作)扩展了 CSS。CSS 是一种简单直接的语言,基本上很容易学习。然而,维护静态 CSS 实际上是非常繁琐的,特别是当我们需要处理成千上万行的样式规则和多个样式表时。LESS 提供的功能,如变量、混合、函数和操作(我们很快将会看到)将使我们能够开发更易于维护和组织的样式规则。
变量
变量是 LESS 中最基本的特性。在 LESS 中,变量与其他编程语言一样,用于存储常量或值,可以在整个样式表中无限制地重复使用。在 LESS 中,变量用@
符号声明,后面跟着变量名。变量名可以是数字和字母的组合。在下面的示例中,我们将创建一些 LESS 变量来存储一些十六进制格式的颜色,并在接下来的样式规则中分配它们以传递颜色,如下所示:
@primaryColor: #234fb4;
@secondaryColor: #ffb400;
a {
color: @primaryColor;
}
button {
background-color: @secondaryColor;
}
使用 LESS 编译器(如 Koala),上述代码将被编译为静态 CSS,如下所示:
a {
color: #234fb4;
}
button {
background-color: #ffb400;
}
使用变量不仅仅局限于存储颜色,我们可以用变量来存储任何类型的值,例如:
@smallRadius: 3px;
使用变量的一个优点是,如果我们需要进行更改,我们只需要更改变量中的值。我们所做的更改将在样式表中该变量的每次出现中生效。这无疑是一个时间节省者。仔细扫描样式表并逐个进行更改,或者使用代码编辑器的搜索和替换功能可能会导致意外的更改。
注意
您会经常看到术语compile和compiler。这里的编译意味着我们将 LESS 转换为标准的 CSS 格式,可以在浏览器中呈现。编译器是用来做这件事的工具。在这种情况下,我们使用的工具是 Koala。
嵌套样式规则
LESS 让我们可以将样式规则嵌套到彼此之中。传统的纯 CSS 中,当我们想要将样式规则应用于元素,比如在<nav>
元素下,我们可以以以下方式组合样式规则:
nav {
background-color: #000;
width: 100%;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
display: inline;
}
从上面的例子中可以看出,每次我们对<nav>
元素下的特定元素应用样式时,都要重复nav
选择器。通过使用 LESS,我们能够消除这种重复,并通过嵌套样式规则来简化它,如下所示:
nav {
background-color: #000;
width: 100%;
ul {
padding: 0;
margin: 0;
}
li {
display: inline;
}
}
最终,前面的样式规则将返回相同的结果——只是这次我们更有效地编写了样式规则。
mixin
mixin 是 LESS 中最强大的功能之一。mixin 通过允许我们创建一组 CSS 属性来简化样式规则的声明,并可以包含在样式表中的其他样式规则中。让我们看一下以下代码片段:
.links {
-webkit-border-radius: 3px;
-mox-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
font-weight: bold;
}
.box {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: absolute;
top: 0;
left: 0;
}
.button {
-webkit-border-radius: 3px;
-mox-border-radius: 3px;
border-radius: 3px;
}
在上面的例子中,我们在三个不同的样式规则中声明了border-radius
,并加上了供早期版本的 Firefox 和基于 Webkit 的浏览器使用的供应商前缀。在 LESS 中,我们可以通过创建 mixin 来简化border-radius
的声明。在 LESS 中,mixin 只需用一个类选择器来指定。根据上面的例子,让我们创建一个名为.border-radius
的 mixin 来包含border-radius
属性,如下所示:
.border-radius {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
之后,我们将.border-radius
包含到后续的样式规则中,将包含的属性传递给它们,如下所示:
.links {
.border-radius;
text-decoration: none;
font-weight: bold;
}
.box {
.border-radius;
position: absolute;
top: 0;
left: 0;
}
.button {
.border-radius;
}
当编译成静态 CSS 时,这段代码将产生与本节第一个代码片段完全相同的输出。
参数化 mixin
此外,我们还可以将 mixin 扩展为所谓的参数化 mixin。这个特性允许我们添加参数或变量,并使 mixin 可配置。让我们以前面一节中的相同例子为例。但是,这次我们不会分配一个固定的值;相反,我们将其替换为一个变量,如下所示:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
现在,我们可以将这个 mixin 插入到其他样式规则中,并为每个规则分配不同的值:
a {
.border-radius(3px);
text-decoration: none;
font-weight: bold;
}
div {
.border-radius(10px);
position: absolute;
top: 0;
left: 0;
}
button {
.border-radius(12px);
}
当我们将其编译成常规 CSS 时,每个样式规则都会应用不同的border-radius
值,如下所示:
a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
font-weight: bold;
}
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
}
button {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
在参数化 mixin 中指定默认值
此外,我们可以在参数化 mixin 中指定默认值,这在没有传递参数的情况下会很有用。当我们在 mixin 中设置参数时,就像在前面的例子中所做的那样,LESS 会将参数视为必需的。如果我们没有在其中传递参数,LESS 会返回一个错误。因此,让我们以前面的例子为例,并用默认值,比如5px
来扩展它,如下所示:
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
前面的参数化 mixin 将默认返回5px
的边框半径。如果我们在括号内传递自定义值,将覆盖默认值。
使用 extend 语法合并 mixin
extend 语法是 LESS 中期待已久的功能。LESS mixin 的一个主要问题是它只是复制 mixin 的包含 CSS 属性,从而产生重复的代码。再次,如果我们处理一个有上千行代码的大型网站,重复的代码量会使样式表的大小变得不必要地大。
在 1.4 版本中,LESS 引入了 extend 语法。extend 语法的形式类似于 CSS 伪类:extend
。extend 语法将继承包含 mixin 的属性集的 CSS 选择器分组。比较以下两个例子。
首先,我们在没有:extend
语法的情况下包含一个 mixin:
.border-radius {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.box {
.border-radius;
position: absolute;
top: 0;
left: 0;
}
.button {
.border-radius;
}
上面的 LESS 代码很短,但当它编译成 CSS 时,代码会扩展到大约 17 行,因为border-radius
属性在每个样式规则中重复或简单复制,如下所示:
.border-radius {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.box {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: absolute;
top: 0;
left: 0;
}
.button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
在这个第二个例子中,我们将把:extend
语法应用到同一个 mixin 中:
.border-radius {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.box {
&:extend(.border-radius);
position: absolute;
top: 0;
left: 0;
}
.button {
&:extend(.border-radius);
}
以下是代码转换为普通 CSS 的方式;它甚至比初始未编译的 LESS 代码更短。
.border-radius,
.box
.button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.box {
position: absolute;
top: 0;
left: 0;
}
使用数学运算生成值
我们还可以使用 LESS 进行数学运算,如加法、减法、除法和乘法。运算可以非常有用,用于确定长度,比如元素的宽度和高度。在下面的例子中,我们将通过减去填充来计算适当的框宽,以便它适合父容器。
首先,我们将使用@padding
变量定义填充变量:
@padding: 10px;
然后,我们指定框宽并减去@padding
变量:
.box {
padding: @padding;
width: 500px – (@padding * 2);
}
请记住,填充占据框的两侧,无论是右和左还是上和下,这就是为什么我们在宽度属性中将@padding
乘以 2。最后,当我们将这个 LESS 操作编译成常规 CSS 时,这段代码将如下所示:
.box {
padding: 10px;
width: 480px;
}
在其他情况下,我们也可以对高度属性进行相同操作,如下所示:
.box {
padding: @padding;
width: 500px – (@padding * 2);
height: 500px – (@padding * 2);
}
使用数学运算和 LESS 函数生成颜色
信不信由你,在 LESS 中,我们可以通过数学运算改变颜色。就像混合颜色一样,只是我们是通过加法、减法、除法和乘法来做的。例如:
.selector {
color: #aaa + 2;
}
编译后,颜色变成了以下样子:
.selector {
color: #acacac;
}
此外,LESS 还提供了一些函数,允许我们将颜色变暗或变亮到一定程度。下面的例子将通过50%
使@color
变量中的颜色变亮。
@color: #FF0000;
.selector {
color: lighten(@color, 50%);
}
或者,要使颜色变暗,可以使用darken()
函数,如下所示:
@color: #FF0000;
.selector {
color: darken(@color, 50%);
}
注意
LESS 颜色函数的完整列表可以在 LESS 官方网站的以下页面中找到(lesscss.org/functions/#color-operations
)。
引用式导入
这是我在 LESS 中最喜欢的功能之一。引用式导入,顾名思义,允许我们仅作为引用导入外部样式表。在此功能出现之前,使用@import
指令导入的样式表中的所有样式规则都将被追加,这通常是不必要的。
自从 1.5 版本以来,LESS 引入了(reference)
选项,将@import
标记为引用,从而防止外部样式规则被追加。在@import
后添加(reference)
标记,如下所示:
@import (reference) 'partial.less';
在导入语句中使用变量
LESS 曾经遇到的一个限制是在@import
指令中使用变量时(github.com/less/less.js/issues/410
)。这是 LESS 中最常请求的功能之一,终于在 LESS 1.4 中得到解决。现在我们可以通过在花括号中命名变量来在@import
语句中声明变量,例如,@{variable-name}
。
使用变量和@import
将允许我们通过变量一次性定义样式表路径。然后,使用变量调用路径,如下所示:
@path: 'path/folder/less/';
@import '@{path}mixins.less';
@import '@{path}normalize.less';
@import '@{path}print.less';
这种方法明显比每次导入新样式表时都要添加完整路径更整洁和高效,如下所示:
@import 'path/folder/less/mixins.less';
@import 'path/folder/less/normalize.less';
@import 'path/folder/less/print.less';
注意
请参考 LESS 官方网站的导入指令部分(lesscss.org/features/#import-directives-feature
)以获取有关使用 LESS 导入外部样式表的进一步帮助。
使用源映射进行更轻松的样式调试
虽然 CSS 预处理器如 LESS 允许我们更高效地编写样式规则,但浏览器仍然只能读取普通的 CSS,这将在调试样式表中出现新问题。
由于浏览器引用生成的 CSS 而不是源文件(LESS),我们可能对样式规则实际在源文件中声明的确切行数一无所知。源映射通过将生成的 CSS 映射回源文件来解决此问题。在支持源映射的浏览器中,您将发现浏览器直接引用源文件。在 LESS 的情况下,浏览器将引用.less
样式表,如下面的屏幕截图所示:
在此项目中,我们将生成生成的 CSS 的源映射。因此,如果我们遇到错误,更容易解决。我们可以立即找出样式规则所在的确切位置。
注意
查看以下参考资料,了解有关源映射的更多信息:
-
通过 Google 使用 CSS 预处理器(
developer.chrome.com/devtools/docs/css-preprocessors
) -
使用 LESS 源映射(
roots.io/using-less-source-maps/
)
更多关于 LESS 的信息
LESS 有很多功能,并且将在未来不断增加更多功能。在本书中一次性包含并讨论所有这些功能是不切实际的。因此,以下是一些深入了解的参考资料:
-
LESS 的官方网站(
lesscss.org/
);了解 LESS 的最佳来源 -
LESS Web Development Essentials,Bass Jobsen,Packt Publishing(
www.packtpub.com/web-development/less-web-development-essentials
) -
即时 LESS CSS 预处理器(
www.packtpub.com/web-development/instant-less-css-preprocessor-how-instant
)
外部样式表引用
在前一节中,我们介绍了 LESS 的大量基本语法。现在,我们将开始实际使用 LESS,说到这一点,在我们能够编写自己的样式规则以及重用 Bootstrap 和 Jasny Bootstrap 包中提供的变量、mixin 和函数之前,我们必须使用 LESS 的@import
指令将它们导入到我们自己的样式表中。
行动时间-创建样式表和组织外部样式表引用
执行以下步骤来管理样式表引用:
-
转到项目目录,并在
assets/less
目录中创建一个名为var-bootstrap.less
的新样式表。此样式表包含 Bootstrap 预定义变量的副本。此副本将允许我们自定义变量,而不影响初始规范。 -
因此,在
/bootstrap/less
目录的variables.less
样式表中复制 Bootstrap 变量。将所有变量粘贴到我们在步骤 1 中创建的var-bootstrap.less
中。
提示
为了方便起见,您还可以直接从 Github 存储库中复制 Bootstrap 变量(git.io/7LmzGA
)。
-
创建一个名为
var-jasny.less
的新样式表。与var-bootstrap.less
类似,此样式表将包含 Jasny Bootstrap 变量的副本。 -
获取
jasny-bootstrap/less
目录中的variables.less
中的 Jasny Bootstrap 变量。将所有变量粘贴到我们在步骤 3 中刚创建的var-jasny.less
样式表中。
提示
或者,直接从 Jasny Bootstrap 存储库中复制变量(git.io/SK1ccg
)。
-
创建一个名为
frameworks.less
的新样式表。 -
我们将使用此样式表来导入
bower_component
文件夹中的 Bootstrap 和 Jasny Bootstrap 样式表。 -
在
frameworks.less
中,创建一个名为@path-bootstrap
的变量来定义路径,指向名为less
的文件夹,其中包含 Bootstrap 的所有 LESS 样式表:
@path-bootstrap: '../../bower_components/bootstrap/less/';
- 同样地,创建一个定义路径的变量,指向 Jasny Bootstrap 的
less
文件夹,如下所示:
@path-jasny: '../../bower_components/jasny-bootstrap/less/';
- 还创建一个变量来定义 Ionicons 路径:
@path-ionicons: '../../bower_components/ionicons-less/less/';
- 使用以下代码导入包含变量的样式表:
@import 'var-bootstrap.less';
@import 'var-jasny.less';
- 导入 Bootstrap 和 Jasny Bootstrap 样式表,这些只是构建投资组合网站所需的。使用我们在步骤 6 到 8 中创建的变量指定路径,如下所示:
// Mixins
@import '@{path-bootstrap}mixins.less';
// Reset
@import '@{path-bootstrap}normalize.less';
@import '@{path-bootstrap}print.less';
// Core CSS
@import '@{path-bootstrap}scaffolding.less';
@import '@{path-bootstrap}type.less';
@import '@{path-bootstrap}grid.less';
@import '@{path-bootstrap}forms.less';
@import '@{path-bootstrap}buttons.less';
// Icons
@import '@{path-ionicons}ionicons.less';
// Components
@import '@{path-bootstrap}navs.less';
@import '@{path-bootstrap}navbar.less';
@import '@{path-bootstrap}jumbotron.less';
// Offcanvas
@import "@{path-jasny}navmenu.less";
@import "@{path-jasny}offcanvas.less";
// Utility classes
@import '@{path-bootstrap}utilities.less';
@import '@{path-bootstrap}responsive-utilities.less';
提示
您还可以从 Gist (git.io/WpBVAA
)中复制上述代码。
注意
为了最小化不需要的额外样式规则,我们从frameworks.less
中排除了许多 Bootstrap 和 Jasny Bootstrap 样式表,如之前所示。
-
创建一个名为
style.less
的新样式表。这是我们将要编写自己的样式规则的样式表。 -
在
style.less
中导入 Bootstrap 变量和混合:
@path-bootstrap: '../../bower_components/bootstrap/less/';
@import 'var-bootstrap.less';
@import 'var-jasny.less';
@import (reference) '@{path-bootstrap}mixins.less';
刚刚发生了什么?
总之,我们刚刚创建了样式表并对其进行了排序。首先,我们创建了两个名为var-bootstrap.less
和var-jasny.less
的样式表,用于存储 Bootstrap 和 Jasny Bootstrap 的变量。正如前面提到的,我们制作了这些副本以避免直接更改原始文件。我们还创建了一个名为frameworks.less
的样式表,其中包含对 Bootstrap 和 Jasny Bootstrap 样式表的引用。
最后,我们创建了名为style.less
的网站主样式表,并导入了变量和混合,以便它们可以在style.less
中重复使用。
尝试一下 - 命名和组织样式表
在前面的步骤中,我们根据个人喜好组织和命名了文件夹和文件。即使如此,您也不必完全遵循命名约定。请以您自己的方式组织和命名它们。
注意
最重要的是要注意@import
语句引用了正确的文件名。
以下是一些想法:
-
将
var-bootstrap.less
重命名为简单的vars.less
。 -
或者,创建一个名为
vars
或configs
的新文件夹,将var-bootstrap.less
和var-jasny.less
样式表放在其中。 -
您知道您也可以导入 LESS 样式表而不声明
.less
扩展名。为了简单起见,您可以省略扩展名,例如:
@import (reference) '@{path-bootstrap}mixins.less';
小测验 - 以下哪个选项不是 LESS 导入选项?
Q1. 在本章的某一部分中,我们讨论了(reference)
,它只导入外部 LESS 样式表,但将其视为引用。除了(reference)
之外,LESS 还提供了更多导入样式表的选项。那么,以下哪个不是 LESS 导入选项?
-
(less)
-
(css)
-
(multiple)
-
(once)
-
(default)
Q2. 如何在@import
语句中使用变量?
-
@import '@{variable}style.less';
-
@import '@[variable]style.less';
-
@import '@(variable)style.less';
使用 Koala
HTML 和样式表已经准备好了。现在是时候将它们放在一起,打造一个坚实的投资组合网站了。我们将使用 LESS 语法来编写网站样式。在这里,我们还将像第一个项目一样使用 Koala。这一次,我们将把 LESS 编译成普通的 CSS。
行动时间 - 使用 Koala 将 LESS 编译为 CSS
执行以下步骤,使用 Koala 将 LESS 编译为 CSS:
-
在 Koala 侧边栏中添加项目目录,如下所示:
-
选择除了
frameworks.less
和style.less
之外的所有样式表。右键单击并选择切换自动编译。查看以下截图:
这将关闭所选样式表上的自动编译选项,并防止 Koala 意外编译这些样式表。
-
另外,确保为剩下的两个样式表
frameworks.less
和style.less
勾选自动编译: -
确保
frameworks.less
和style.less
的输出设置为/assets/css
目录,如下面的截图所示: -
检查两个样式表的源映射选项,以生成源映射文件,在调试时会对我们有所帮助:
-
选择两个样式表
frameworks.less
和style.less
的输出样式进行压缩:
此选项将生成一个体积较小的 CSS 样式表,因为样式表中的代码将被压缩成一行。因此,样式表将在浏览器中加载得更快,也会节省用户端的带宽消耗。
-
选择
frameworks.less
并单击编译按钮将其编译为 CSS: -
对
style.less
执行相同操作。选择它并单击编译按钮将其编译为 CSS。在代码编辑器中打开index.html
,并在<head>
内链接这两个样式表,如下所示:
<link href="assets/css/frameworks.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
发生了什么?
在前面的步骤中,我们将网站的主要样式表frameworks.less
和style.less
从 LESS 编译为 CSS。现在,你应该将它们与源映射一起放在assets/css/
目录中。代码已经压缩,因此文件大小相对较小,如下面的截图所示:
样式表的大小相对较小。如图所示,frameworks.css 为 92 kb,而 style.css 仅为 2 kb
此外,我们还在index.html
中链接了这些 CSS 样式表。但是,由于我们尚未编写自己的样式,网站仍然使用默认的 Bootstrap 样式,如下面的截图所示:
使用 LESS 优化投资组合网站
这是你可能在等待的部分,为投资组合网站设置样式。看到网站开始有形状、颜色和外观显然是一种愉快的体验。在本节中,我们将通过使用本章前面介绍的 LESS 语法自定义默认样式并组合我们的样式规则。
采取行动-使用 LESS 语法组合网站样式
执行以下步骤来为网站设置样式:
- 从 Google Font 中添加一个新的字体系列。在这里,我选择了 Varela Round (
www.google.com/fonts/specimen/Varela+Round
)。在任何其他样式表之前放置以下 Google Font 链接:
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
-
我们将通过更改一些变量来自定义默认样式。在 Sublime Text 中打开
var-bootstrap.less
。首先,我们将更改定义 Bootstrap 主色的@brand-primary
变量;将其从#428bca
更改为#46acb8
: -
此外,将
@brand-success
变量中的颜色从#5cb85c
更改为#7ba47c
: -
更改
@headings-font-family
变量,该变量定义了标题中使用的字体系列,将其从inherit
更改为"Varela Round"
,如下所示:
@headings-font-family: "Varela Round", @font-family-sans-serif;
-
当用户聚焦在表单字段上时,Bootstrap 默认样式会显示发光效果。此效果的颜色在
@input-border-focus
中指定。将颜色从#66afe9
更改为#89c6cb
: -
在网站的顶部部分,您可以看到导航栏仍然具有 Bootstrap 默认样式,灰色背景和边框颜色,如下截图所示:
-
这两种颜色分别在
@navbar-default-bg
和@navbar-default-border
中指定。将这两个变量的值都更改为 transparent,如下所示:
@navbar-default-bg: transparent;
@navbar-default-border: transparent;
- 同样,Jumbotron 部分的默认样式设置为灰色背景色。要删除这种颜色,将
@jumbotron-bg
变量设置为transparent
,如下所示:
@jumbotron-bg: transparent;
- 稍后我们将继续编辑一些 Bootstrap 变量。与此同时,让我们编写自己的样式规则。首先,我们将显示被 Bootstrap 默认样式隐藏的导航栏切换按钮。在我们的情况下,此按钮将用于打开和关闭侧栏导航。让我们使用以下样式规则强制使此按钮可见:
.portfolio-topbar {
.navbar-toggle {
display: block;
}
}
-
如下截图所示,带有所谓的汉堡图标(
gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787
)的切换按钮现在可见: -
目前,此按钮位于右侧。参考网站蓝图,它应该在左侧。添加
float:left
将其放在左侧,margin-left:15px
添加一点空白到按钮的左侧,如下所示:
.portfolio-topbar {
.navbar-toggle {
display: block;
float: left;
margin-left: 15px;
}
}
-
在这里,我想自定义切换按钮的默认样式,这也是通过
var-bootstrap.less
中的一些变量指定的。因此,在 Sublime Text 中打开var-bootstrap.less
。 -
首先,我们将通过将
@navbar-default-toggle-border-color
变量的值从#ddd
更改为transparent
来删除按钮边框,如下所示:
@navbar-default-toggle-border-color: transparent;
- 我们还将删除悬停在按钮上时出现的灰色背景颜色。通过将
@navbar-default-toggle-hover-bg
变量从#ddd
更改为transparent
来将灰色背景颜色移出,如下所示:
@navbar-default-toggle-hover-bg: transparent;
- 我希望汉堡图标看起来更加粗体和强烈。因此,在这里,我们希望将颜色改为黑色。将
@navbar-default-toggle-icon-bar-bg
的值从#888
更改为#000
:
@navbar-default-toggle-icon-bar-bg: #000;
- 在这个阶段,网站内容被对齐到左侧,这是任何内容的默认浏览器对齐方式。根据网站蓝图,网站内容应该居中。使用
text-align: center
,如下所示,将内容对齐到中心:
.portfolio-about,
.portfolio-display,
.portfolio-contact,
.portfolio-footer {
text-align: center;
}
- 添加以下内容将网站名称转换为大写(全部大写字母),使其更大更粗:
.portfolio-about {
.portfolio-name {
text-transform: uppercase;
}
}
- 另一方面,通过将文本颜色指定为灰色浅色,使标语行更加微妙。在这里,我们可以简单地使用 Bootstrap 的预定义变量
@gray-light
来应用灰色,如下所示:
.portfolio-about {
.portfolio-name {
text-transform: uppercase;
}
.lead {
color: @gray-light;
}
}
-
在投资组合部分,使用灰色浅色指定背景颜色,比
@gray-lighter
变量中的颜色更浅。添加背景颜色的目的是为了在投资组合部分加强一点重点。 -
在这个项目中,我们选择使用 LESS 的
darken()
函数轻微加深白色,如下所示:
.portfolio-display {
background-color: darken(#fff, 1%);
}
注意
可以通过使用 LESS 的lighten()
函数将黑色颜色减轻 99%来替代地实现背景颜色,如background-color: lighten(#000, 99%);
。
-
在这个阶段,如果我们看一下投资组合部分,似乎顶部和底部只有很少的空间,如下截图所示:
-
通过添加
padding-top
和padding-bottom
,为投资组合部分提供更多空间,如下所示:
.portfolio-display {
background-color: darken(#fff, 1%);
padding-top: 60px;
padding-bottom: 60px;
}
-
总之,我们在网站中添加了两个标题,包括作品集部分中的一个,以明确显示部分名称。这些标题将共享相同的样式规则。因此,在这种情况下,最好创建一个专门定义标题样式的 mixin。
-
定义 mixin 以及应用标题样式的 CSS 属性,如下所示:
.heading {
color: lighten(#000, 70%);
text-transform: uppercase;
font-size: 21px;
margin-bottom: 60px;
}
- 为部分标题添加以下样式规则,使其看起来更加柔和,并与作品集部分的背景颜色协调:
.portfolio-display {
...
h2 {
&:extend(.heading);
}
}
- 如下截图所示,每行之间的间距非常小;行之间的距离太近了,如下所示:
因此,通过为每个作品集项目指定margin-bottom
来增加更多空间,如下所示:
.portfolio-item {
margin-bottom: 30px;
}
- 为作品集图片添加样式,如下所示:
.portfolio-image {
padding: 15px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
}
- 还要为说明添加样式,如下所示:
.portfolio-caption {
font-weight: 500;
margin-top: 15px;
color: @gray;
}
-
当我们悬停在作品集图片上时,你觉得显示过渡效果怎么样?那看起来会很好,不是吗?在这种情况下,我想在悬停时显示围绕作品集图片的阴影。
-
使用 Bootstrap 预定义的 mixin
.transition()
和.box-shadow()
添加效果,如下所示:
.portfolio-image {
padding: 15px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
.transition(box-shadow 1s);
&:hover {
.box-shadow(0 0 8px fade(#000, 10%));
}
}
-
在作品集部分下面,我们有网站联系表单,已经应用了 Bootstrap 的默认样式。因此,让我们用我们自己的样式规则自定义它。
-
首先,我们将使用
padding
在联系表单部分的顶部和底部添加更多空间。 -
使用我们在第 18 步中创建的
.heading
mixin 为标题添加样式:
.portfolio-contact {
...
h2 {
&:extend(.heading);
}
}
- 目前表格完全跨越整个容器。因此,请添加以下样式规则以设置最大宽度,但仍然在容器中间显示表单,如下所示:
.portfolio-contact {
...
.form {
width: 100%;
max-width: 600px;
margin-right: auto;
margin-left: auto;
}
}
- 添加以下样式规则使表单元素—
<input>
、<textarea>
、<button>
—看起来更加扁平。这些样式规则去除了阴影并降低了边框半径。看一下以下代码:
.portfolio-contact {
...
.form {
width: 100%;
max-width: 600px;
margin-right: auto;
margin-left: auto;
input, textarea, button {
box-shadow: none;
border-radius: @border-radius-small;
}
}
}
- 添加以下行以为按钮添加样式,并使用过渡效果使其生动起来,如下所示:
.portfolio-contact {
...
.form {
width: 100%;
max-width: 600px;
margin-right: auto;
margin-left: auto;
input, textarea, button {
box-shadow: none;
border-radius: @border-radius-small;
}
.btn {
display: block;
width: 100%;
.transition(background-color 500ms);
}
}
}
-
从这一步开始,我们将为网站的最后一个部分——页脚添加样式规则。页脚包含社交媒体链接 Dribbble 和 Twitter,以及底部的版权声明。
-
首先,与前面的步骤一样,我们使用
padding
在部分的顶部和底部添加更多空白空间:
.portfolio-footer {
padding-top: 60px;
padding-bottom: 60px;
}
- 然后,通过指定
margin-bottom
在社交媒体链接和版权声明之间增加更多空间:
.portfolio-footer {
padding-top: 60px;
padding-bottom: 60px;
.social {
margin-bottom: 30px;
}
}
- 添加以下行以删除从默认浏览器样式中派生的
<ul>
元素的padding
:
.portfolio-footer {
...
.social {
margin-bottom: 30px;
ul {
padding-left: 0;
}
}
}
- 在以下代码中添加突出显示的行以将社交媒体链接并排显示:
.portfolio-footer {
...
.social {
margin-bottom: 30px;
ul {
padding-left: 0;
}
li {
list-style: none;
display: inline-block;
margin: 0 15px;
}
}
}
- 给社交媒体链接赋予其各自社交媒体品牌的颜色,如下所示:
.portfolio-footer {
...
.social {
...
a {
font-weight: 600;
color: @gray;
text-decoration: none;
.transition(color 500ms);
&:before {
display: block;
font-size: 32px;
margin-bottom: 5px;
}
}
.twitter a:hover {
color: #55acee;
}
.dribbble a:hover {
color: #ea4c89;
}
}
}
提示
在 BrandColors(brandcolors.net/
)中获取更多热门网站的颜色。
- 最后,用灰色使版权声明颜色更加柔和:
.portfolio-footer {
...
.copyright {
color: @gray-light;
}
}
刚刚发生了什么?
在前面的步骤中,我们通过自定义一些 Bootstrap 变量以及组合我们自己的样式规则来为网站添加样式。编译style.less
以生成 CSS。此外,你可以从这个 Gist(git.io/-FWuiQ
)获取我们应用的所有样式规则。
网站现在应该是可以展示的。以下截图显示了网站在桌面视图中的外观:
网站也是响应式的;布局将根据视口宽度大小进行调整,如下截图所示:
尝试更有创意
我们刚刚在前面的部分应用的许多样式规则仅仅是装饰性的。请随意添加更多创意和自定义,如下所示:
-
探索网站的新配色方案。使用 Kuler 等方便的工具(
kuler.adobe.com/
)生成配色方案 -
应用不同的字体系列
-
使用 CSS3 展示更多令人惊叹的过渡效果
快速测验-使用 LESS 函数和扩展语法
Q1. 如何使用 LESS 使颜色变浅?
-
lighter(#000, 30%);
-
lighten(#000, 30%);
-
lightening(#000, 30%);
Q2. 如何使颜色透明?
-
fadeout(#000, 10%);
-
transparentize(#000, 10%);
-
fade-out(#000, 10%);
Q3. 以下哪一种方式是在 LESS 中扩展 mixin 的不正确方式?
-
.class:extend(.another-class);
-
.class::extend(.another-class);
-
.class {
:extend(.another-class);
}
改进并使用 JavaScript 使网站正常运行
侧栏导航尚未激活。如果您点击切换按钮,侧栏导航将不会滑入。此外,如果您在 Internet Explorer 8 中查看作品集网站,您会发现许多样式规则没有被应用。这是因为 Internet Explorer 8 不识别网站中使用的 HTML5 元素。为了解决这些问题,我们将不得不使用一些 JavaScript 库。
进行操作-使用 Koala 编译 JavaScript
-
在
assets/js
目录中创建一个名为html5shiv.js
的新 JavaScript 文件。 -
从我们通过 Bower 下载的 HTML5Shiv 包中导入
html5shiv.js
到这个文件中:
// @koala-prepend "../../bower_components/html5shiv/dist/html5shiv.js"
-
创建一个名为
bootstrap.js
的新 JavaScript 文件。 -
在
bootstrap.js
中,导入所需的 JavaScript 库以打开侧栏导航功能,如下所示:
// @koala-prepend "../../bower_components/jquery/dist/jquery.js"
// @koala-prepend "../../bower_components/bootstrap/js/transition.js"
// @koala-prepend "../../bower_components/jasny-bootstrap/js/offcanvas.js"
-
打开 Koala,并确保
html5shiv.js
和bootstrap.js
的自动编译选项已经被选中,如下图所示: -
此外,确保这两个 JavaScript 文件的输出路径设置为
/assets/js
目录,如下图所示: -
点击 Koala 中的编译按钮编译这两个 JavaScript 文件,如下所示:
一旦这些 JavaScript 文件被编译,你应该会发现这些文件的压缩版本html5shiv.min.js
和bootstrap.min.js
,如下图所示:
- 在 Sublime Text 中打开
index.html
,并在<head>
部分使用 Internet Explorer 条件注释标签链接html5shiv.js
,如下所示:
<!--[if lt IE 9]>
<script type="text/javascript" src="img/html5shiv.min.js"></script>
<![endif]-->
- 在
index.html
的底部链接bootstrap.min.js
,如下所示:
<script type="text/javascript" src="img/bootstrap.min.js"></script>
刚刚发生了什么?
我们刚刚编译了 jQuery 和 Bootstrap JavaScript 库,以启用侧栏功能。我们还使用 HTML5Shiv 在 Internet Explorer 8 中启用了 HTML5 元素。到目前为止,网站已经完全可用。
提示
您可以通过这个 Github 页面查看网站(tfirdaus.github.io/rwd-portfolio/
)。
您应该能够滑动进出侧栏导航,并且样式现在应该在 Internet Explorer 8 中可见。看一下以下的截图:
侧栏导航菜单已经滑入。
总结
我们刚刚完成了本书的第二个项目。在这个项目中,我们使用 Bootstrap 构建了一个作品集网站。Bootstrap 使得使用提供的快速插入类来构建响应式网站和网站组件变得简单快捷。
此外,我们还使用了一个名为 Jasny Bootstrap 的 Bootstrap 扩展,以包括侧栏导航,这是原始 Bootstrap 中缺少的流行响应式设计模式之一。在网站样式方面,我们使用了 LESS,这是一种 CSS 预处理器,可以让我们更有效地编写样式规则。
总之,在这个项目中我们做了很多事情来让网站正常运行。希望你在这个过程中学到了很多东西。
在下一章中,我们将使用 Foundation 框架开始本书的第三个项目。敬请关注!
第七章:使用 Foundation 为企业构建响应式网站
在这个时代,许多人都与互联网连接,拥有一个网站对于任何规模的公司都变得至关重要——无论是小公司还是拥有数十亿美元业务的财富 500 强公司。因此,在本书的第三个项目中,我们将为企业构建一个响应式网站。
构建网站时,我们将采用一个名为 Foundation 的新框架。Foundation 是由总部位于加利福尼亚的 Web 开发机构 ZURB 开发的。它是一个精心打造的框架,具有一系列交互式小部件。在技术方面,Foundation 样式是建立在 Sass 和 SCSS 之上的。因此,在项目进行过程中,我们也将学习这个主题。
为了开展这个项目,首先让我们假设你有一个商业理念。这可能有点夸张,但这是一个可能会变成数十亿美元业务并改变世界的杰出理念。你有一个很棒的产品,现在是建立网站的时候了。你非常兴奋,迫不及待地想要改变世界。
所以,话不多说,让我们开始这个项目。
本章将主要围绕 Foundation 展开,我们将在此讨论的主题包括:
-
在线框架中检查网站设计和布局
-
研究 Foundation 的特性、组件和附加组件
-
管理项目目录和资产
-
通过 Bower 获取 Foundation 包
-
构建网站 HTML 结构
检查网站布局
首先,与我们之前做的两个项目不同,我们将在本章中进一步研究网站布局的线框图。在检查完之后,我们将发现网站所需的 Foundation 组件,以及 Foundation 包中可能不包含的组件和资产。以下是正常桌面屏幕尺寸下的网站布局:
前面的线框图显示,网站将有五个部分。第一部分,显而易见的是页眉。页眉部分将包含网站标志、菜单导航、几行标语和一个按钮——许多人称之为行动号召按钮。
注意
以下是关于行动号召按钮的指南、最佳实践和示例的一些参考资料。这些是旧的帖子,但其中的指南、技巧和原则是永恒的;至今仍然有效和相关。
-
Call to Action Buttons: Examples and Best Practices (
www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/
). -
"Call To Action" Buttons: Guidelines, Best Practices And Examples (
www.hongkiat.com/blog/call-to-action-buttons-guidelines-best-practices-and-examples/
). -
How To Design Call to Action Buttons That Convert (
unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/
).
通常,人们在决定购买之前需要尽可能多地了解优缺点。因此,在页眉下,我们将显示产品的项目列表或提供的关键功能。
除了功能列表,我们还将在滑块中显示客户的推荐。根据www.entrepreneur.com (www.entrepreneur.com/article/83752
),显示客户的推荐是推动更多客户或销售的有效方式之一,这对业务最终是有利的。
在推荐部分下方,网站将显示计划和价格表。最后一个部分将是包含次要网站导航和指向 Facebook 和 Twitter 的链接的页脚。
现在让我们看看网站在较小的视口大小下的布局,如下所示:
与我们在之前的项目中构建的网站类似,所有内容都将被堆叠。口号和行动号召按钮都居中对齐。导航中的菜单现在被描述为汉堡图标。接下来,我们将看看 Foundation 在其套件中提供了什么来构建网站。
深入了解 Foundation
Foundation (foundation.zurb.com/
)是最流行的前端开发框架之一。它被许多知名公司使用,如 Pixar、华盛顿邮报、Warby Parker (www.warbyparker.com/
)等。正如前面提到的,Foundation 附带了常见的网页组件和交互式小部件。在这里,我们将研究我们将用于网站的组件和小部件。
网格系统
网格系统是框架的一个组成部分。它是使管理网页布局感觉轻松的一件事。Foundation 的网格系统包括可以通过提供的类适应窄视口大小的十二列。与我们在前几章中探讨的两个框架类似,网格由行和列组成。每个列都必须包含在行内,以使布局正确跨越。
在 Foundation 中,应用row
类来定义一个元素作为行,并将元素应用columns
或column
类来定义为列。例如:
<div class="row">
<div class="columns">
</div>
<div class="columns">
</div>
</div>
您还可以从columns
中省略s,如下所示:
<div class="row">
<div class="column">
</div>
<div class="column">
</div>
</div>
列的大小通过以下一系列类来定义:
-
small-{n}
:这指定了小视口大小范围(大约 0 像素-640 像素)中的网格列宽度。 -
medium-{n}
:这指定了中等视口大小范围(大约 641 像素-1,024 像素)中的网格列宽度。 -
large-{n}
:这指定了大视口大小范围(大约 1,025 像素-1,440 像素)中的网格列宽度。
注意
我们在前面的类名中给出的{n}
变量代表从1
到12
的数字。一行中的列数之和不应超过12
。
这些类可以在单个元素中结合应用。例如:
<div class="row">
<div class="small-6 medium-4 columns"></div>
<div class="small-6 medium-8 columns"></div>
</div>
上面的示例在浏览器中产生以下结果:
调整视口大小,使其足够小,以便列的宽度根据分配的类进行调整。在这种情况下,每个列的宽度相等,因为它们都分配了small-6
类:
注意
通常,您可以通过拖动浏览器窗口来调整视口大小。如果您使用 Chrome,可以激活设备模式和移动模拟器(developer.chrome.com/devtools/docs/device-mode
)。或者,如果您使用 Firefox,可以启用响应式设计视图(developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
),这将允许您调整视口大小,而无需拖动 Firefox 窗口。
按钮
按钮对于任何类型的网站都是必不可少的,我们肯定会在网站的某些地方添加按钮。Foundation 使用button
类来定义一个元素作为按钮。您可以将该类分配给元素,例如<a>
和<button>
。该类应用了默认的按钮样式,如下面的屏幕截图所示:
此外,您可以包含其他类来定义按钮的颜色或上下文。使用secondary
、success
、alert
中的一个类来设置按钮颜色:
您还可以使用tiny
、small
或large
中的一个类来指定按钮大小:
使用radius
和round
中的一个类使按钮更漂亮,带有圆角:
注
还有一些类来形成按钮。此外,Foundation 还提供多种类型的按钮,如按钮组、分割按钮和下拉按钮。因此,您可以转到 Foundation 文档的按钮部分,了解更多信息。
导航和顶部栏
网站上一个重要的部分是导航。导航帮助用户从一个页面浏览到另一个页面。在这种情况下,Foundation 提供了几种导航类型,其中之一称为顶部栏。Foundation 的顶部栏将位于网站的顶部,任何内容或部分之前。以下是 Foundation 默认样式下顶部栏的外观:
顶部栏是响应式的。尝试调整浏览器的视口大小,使其足够小,您会发现导航隐藏在菜单中,需要点击菜单才能显示完整的菜单项列表:
Foundation 顶部栏主要由top-bar
类形成应用样式,data-topbar
属性运行与顶部栏相关的 JavaScript 函数,最后role="navigation"
以提高可访问性。
因此,以下代码是我们开始在 Foundation 中构建顶部栏的方式:
<nav class="top-bar" data-topbar role="navigation">
...
</nav>
Foundation 将顶部栏内容分为两个部分。左侧区域称为标题区域,包括网站名称或标志。Foundation 使用列表元素构建此部分,如下所示:
<ul class="title-area">
<li class="name">
<h1><a href="#">Hello</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>
第二部分简称为顶部栏部分。通常,此部分包含菜单、按钮和搜索表单。Foundation 使用top-bar-section
类设置此部分,以及left
和right
类来指定对齐方式。因此,将所有内容放在一起,以下是构建基本 Foundation 顶部栏的完整代码,如前面的屏幕截图所示:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">Hello</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</nav>
当然,您需要在文档中预先链接 Foundation CSS 样式表,以查看顶部栏的外观。
价格表
无论您是销售产品还是服务,您都应该命名您的价格。
由于我们将为企业构建网站,因此需要显示价格表。幸运的是,Foundation 已经将此组件包含在其核心中,因此我们不需要第三方扩展。为了灵活性,Foundation 使用列表元素结构化价格表,如下所示:
<ul class="pricing-table pricing-basic">
<li class="title">Basic</li>
<li class="price">$10<small>/month</small></li>
<li class="description">Perfect for personal use.</li>
<li class="bullet-item">1GB Storage</li>
<li class="bullet-item">1 User</li>
<li class="bullet-item">24/7 Support</li>
<li class="cta-button">
<a class="button success round" href="#">Sign Up</a>
</li>
</ul>
列表中的每个项目都使用一个类进行设置,我相信类名已经解释了它自己。鉴于前面的 HTML 结构和 Foundation CSS 提供的默认样式,输出结果非常好,如下面的屏幕截图所示:
在 Orbit 中移动
轮播或滑块是网络上最流行的设计模式之一。尽管在可访问性方面存在争议,但许多人仍然喜欢在他们的网站上使用它,我们也是如此。在这里,我们希望使用 Orbit (foundation.zurb.com/docs/components/orbit.html
),Foundation jQuery 插件来显示内容滑块。
Orbit 是可定制的,我们可以完全控制输出,以及通过类、属性或 JavaScript 初始化幻灯片的行为。我们还可以在 Orbit 幻灯片中添加几乎任何内容,包括文本内容、图像、链接和混合内容。不用说,我们可以为其大部分部分设置样式。
轨道是如何构建的?
Foundation 使用list
元素来构建幻灯片容器,以及幻灯片,并使用 HTML5 的data-
属性data-orbit
来启动功能。以下是 Orbit 滑块结构的基本示例,包含两张图片幻灯片:
<ul class="example-orbit" data-orbit>
<li><img src="img/image.jpg" alt="" /></li>
<li class="active"><img src="img/image2.jpg" alt="" /></li>
</ul>
部署 Orbit 非常简单,从技术上讲,它几乎可以包含任何类型的内容在幻灯片中,而不仅仅是图片。随着我们构建网站,我们将更多地关注这一点。
注意
目前,可以随意探索 Foundation 官方网站的 Orbit 滑块部分(foundation.zurb.com/docs/components/orbit.html
),在我看来,这是了解 Orbit 滑块的最佳地方。
添加附加组件,字体图标
Foundation 还提供了一些附加组件,其中之一是 Webicons(zurb.com/playground/social-webicons
)。毋庸置疑,我们需要社交图标,由于这些图标基本上是矢量图,因此在任何屏幕分辨率(普通或高清)下都可以无限缩放,因此将保持清晰和锐利。请查看以下图标集:
图标集中的一些字形
除了这个图标集,您还可以找到以下内容:
-
一系列起始模板(
foundation.zurb.com/templates.html
),这些模板对于启动新网站和网页非常有用。 -
模板(
foundation.zurb.com/stencils.html
),您会发现对于勾画和原型设计新网站很有用
关于 Foundation 的更多信息
详细介绍 Foundation 的每个角落和方面超出了本书的范围。这些是我们将在项目和网站中使用的框架的最基本组件。
幸运的是,Packt Publishing 出版了几本专门介绍 Foundation 的书籍。如果您有兴趣进一步探索这个框架,我建议您看一下以下书籍:
-
学习 Zurb Foundation,Kevin Horek,Packt Publishing(
www.packtpub.com/web-development/learning-zurb-foundation
) -
ZURB Foundation Blueprints,James Michael Stone,Packt Publishing(
www.packtpub.com/web-development/zurb-foundation-blueprints
)
额外所需资产
除了 Foundation 自己的组件之外,我们还需要一些文件。这些文件包括网站页眉的图像封面,将代表网站功能列表部分的图标,favicon 图像以及 Apple 图标,显示在推荐部分的头像图像,以及最后(也很重要)网站标志。
在页眉图像方面,我们将使用 Alejandro Escamilla 拍摄的以下图像,该图像显示了一名男子正在使用他的 Macbook Air;尽管屏幕似乎关闭了(unsplash.com/post/51493972685/download-by-alejandro-escamilla
):
用于显示功能列表项旁边的图标是由 Ballicons 的 Nick Frost 设计的(ballicons.net/
)。我们将在网站中包含该系列中的以下图标:
以下是使用 Photoshop 动作 AppIconTemplate 生成的 favicon 和 Apple 图标:
Favicon 和 Apple 图标
我们将使用 WordPress 的神秘人作为默认头像。此头像图像将显示在推荐语句上方,如下线框所示:
神秘人
该网站的标志是用 SVG 制作的,以确保清晰度和可伸缩性。标志显示在以下截图中:
您可以从随本书提供的源文件中获取所有这些资产。否则,可以从我们在前面段落中显示的 URL 中获取它们。
项目目录、资产和依赖项
一旦我们评估了网站布局、框架功能和所有所需的资产,我们将开始着手项目。在这里,我们将开始整理项目目录和资产。此外,我们将通过 Bower 获取并记录所有项目依赖项,第二个项目使用 Bootstrap。所以,是时候行动了。
行动时间-组织项目目录、资产和依赖项
-
在
htdocs
文件夹中,创建一个新文件夹,命名为startup
。这是网站将驻留的文件夹。 -
在
startup
文件夹中,创建一个名为assets
的文件夹,以包含所有资产,如样式表、JavaScript 文件、图像等。 -
在
assets
文件夹内创建文件夹以对这些资产进行分组:
-
css
用于样式表。 -
js
包含 JavaScript 文件。 -
scss
包含 SCSS 样式表(关于 SCSS 的更多内容请参见下一章)。 -
img
包含图像。 -
fonts
包含字体图标。
-
添加图像,包括网站标志、页眉图像、图标和头像图像,如下截图所示:
-
现在,我们将下载项目依赖项,其中包括 Foundation 框架、图标、jQuery 和其他几个库。因此,让我们打开终端或命令提示符(如果您使用 Windows)。然后,使用
cd
命令导航到项目目录:
-
在 Windows 中:
cd \xampp\htdocs\startup
-
在 OSX 中:
cd /Applications/XAMPP/htdocs/startup
-
在 Ubuntu 中:
cd /opt/lampp/htdocs/startup
- 与第二个项目一样,键入命令,填写提示以设置项目规范,包括项目名称和项目版本,如下截图所示:
当所有提示都填写并完成时,Bower 将生成一个名为bower.json
的新文件,以存放所有信息。
- 在安装项目依赖项之前,我们将设置依赖项文件夹的目标位置。为此,请创建一个名为
.bowerrc
的点文件。将以下行保存在文件中:
{
"directory": "components"
}
这行将告诉 Bower 将文件夹命名为components
而不是bower_components
。一旦配置设置完成,我们就可以安装库,首先安装 Foundation 包。
- 要通过 Bower 安装 Foundation 包,请键入
bower install foundation ––save
。确保包括--save
参数以记录 Foundation 在bower.json
文件中。
注意
除了 Foundation 主要包(例如样式表和 JavaScript 文件)外,此命令还将获取与 Foundation 相关的库,即:
Fastclick (github.com/ftlabs/fastclick
)
jQuery (jquery.com/
)
jQuery Cookie (github.com/carhartl/jquery-cookie
)
jQuery Placeholder (github.com/mathiasbynens/jquery-placeholder
)
Modernizr (modernizr.com/
)
-
Foundation 字体图标设置在一个单独的存储库中。要安装它,请键入
bower install foundation-icons --save
命令。 -
Foundation 图标包带有样式表,通过 HTML 类指定和呈现图标文件。在这里,我们需要将包文件夹中的字体复制到我们自己的
fonts
文件夹中。请看下面的屏幕截图:
刚刚发生了什么?
我们刚刚创建了项目目录,以及用于组织项目资产的文件夹。此外,我们还通过 Bower 安装了构建网站所需的库,其中包括 Foundation 框架。
在添加了图像和库之后,我们将在下一节中构建网站的主页标记。因此,不用再多说,让我们继续前进,再次行动起来。
行动时间-构建网站的 HTML 结构
-
创建一个名为
index.html
的新 HTML 文件。然后,在 Sublime Text 中打开它,这是本书中我们选择的代码编辑器。 -
让我们按照以下方式添加基本的 HTML5 结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Startup</title>
</head>
<body>
</body>
</html>
- 添加 meta
X-UA-Compatible
变量,内容值为IE=edge
,以允许 Internet Explorer 使用其最新的渲染版本:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 不要忘记 meta
viewport
标签,以使网站响应式;将其添加到<head>
中,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1">
- 在 meta 视口标签下方添加网站图标以及苹果图标,如下所示:
<link rel="apple-touch-icon" href="assets/img/apple-icon.png">
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
- 为了搜索引擎结果的目的,添加 meta 描述:
<meta name="description" content="A startup company website built using Foundation">
- 内容的 HTML 标记将遵循本书早期部分讨论的 Foundation 指南。此外,我们可能会在元素中添加额外的类来自定义样式。让我们从添加网站
<header>
开始,为此在<body>
中添加以下行:
<header class="startup-header">
...
</header>
- 接下来,在标题中添加网站导航栏,如下所示:
<header class="startup-header">
<div class="contain-to-grid startup-top-bar">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name startup-name">
<h1><a href="#">Startup</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
<li class="has-form log-in"><a href="" class="button secondary round">Log In</a></li>
<li class="has-form sign-up"><a href="#" class="button round">Sign Up</a></li>
</ul>
</section>
</nav>
</div>
</header>
- 在导航栏 HTML 标记下方,按照以下方式添加标语和行动号召按钮:
<header class="startup-header">
...
<div class="panel startup-hero">
<div class="row">
<h2 class="hero-title">Stay Cool and be Awesome</h2>
<p class="hero-lead">The most awesome web application in the galaxy.</p>
</div>
<div class="row">
<a href="#" class="button success round">Signup</a>
</div>
</div>
</header>
- 接下来,我们将添加包含产品功能列表部分、推荐部分和计划价格表的网站正文内容。首先,在标题下方添加一个包裹正文内容部分的
<div>
,如下所示:
<div class="startup-body">
...
</div>
- 在
<div>
中,按照以下方式添加功能列表部分的 HTML 标记:
<div class="startup-body">
<div class="startup-features">
<div class="row">
<div class="medium-6 columns">
<div class="row">
<div class="small-3 medium-4 columns">
<figure>
<img src="img/analytics.png" height="128" width="128" alt="">
</figure>
</div>
<div class="small-9 medium-8 columns">
<h4>Easy</h4>
<p>This web application is super easy to use. No complicated setup. It just works out of the box.</p>
</div>
</div>
</div>
<div class="medium-6 columns">
<div class="row">
<div class="small-3 medium-4 columns">
<figure>
<img src="img/clock.png" height="128" width="128" alt="">
</figure>
</div>
<div class="small-9 medium-8 columns">
<h4>Fast</h4>
<p>This web application runs in a blink of eye. There is no other application that is on par with our application in term of speed.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<div class="row">
<div class="small-3 medium-4 columns">
<figure>
<img src="img/target.png" height="128" width="128" alt="">
</figure>
</div>
<div class="small-9 medium-8 columns">
<h4>Secure</h4>
<p>Your data is encyrpted with the latest Kryptonian technology. It will never be shared to anyone. Rest assured, your data is totally safe.</p>
</div>
</div>
</div>
<div class="medium-6 columns">
<div class="row">
<div class="small-3 medium-4 columns">
<figure>
<img src="img/bubbles.png" height="128" width="128" alt="">
</figure>
</div>
<div class="small-9 medium-8 columns">
<h4>Awesome</h4>
<p>It's simply the most awesome web application and make you the coolest person in the galaxy. Enough said.</p>
</div>
</div>
</div>
</div>
</div>
</div>
此部分的列划分是指网站线框图中显示的布局。因此,正如您从刚刚添加的代码中看到的那样,每个功能列表项都分配了medium-6
列,因此每个项目的列宽将相等。
- 在功能列表部分下方,我们按照以下方式添加了推荐部分的 HTML 标记:
<div class="startup-body">
...
<div class="startup-testimonial">
<div class="row">
<ul class="testimonial-list" data-orbit>
<li data-orbit-slide="testimonial-1">
<div>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor numquam quaerat doloremque in quis dolore enim modi cumque eligendi eius.</blockquote>
<figure>
<img class="avatar" src="img/mystery.png" height="128" width="128" alt="">
<figcaption>John Doe</figcaption>
</figure>
</div>
</li>
<li data-orbit-slide="testimonial-2">
<div>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
<figure>
<img class="avatar" src="img/mystery.png" height="128" width="128" alt="">
<figcaption>Jane Doe</figcaption>
</figure>
</div>
</li>
</ul>
</div>
</div>
</div>
- 根据线框布局,我们应该在推荐部分下方添加计划价格表,如下所示:
<div class="startup-body">
<!-- ... feature list section … -->
<!-- ... testimonial section … -->
<div class="startup-pricing">
<div class="row">
<div class="medium-4 columns">
<ul class="pricing-table pricing-basic">
<li class="title">Basic</li>
<li class="price">$10<small>/month</small></li>
<li class="description">Perfect for personal use.</li>
<li class="bullet-item">1GB Storage</li>
<li class="bullet-item">1 User</li>
<li class="bullet-item">24/7 Support</li>
<li class="cta-button"><a class="button success round" href="#">Sign Up</a></li>
</ul>
</div>
<div class="medium-4 columns">
<ul class="pricing-table pricing-team">
<li class="title">Team</li>
<li class="price">$50<small>/month</small></li>
<li class="description">For a small team.</li>
<li class="bullet-item">50GB Storage</li>
<li class="bullet-item">Up to 10 Users</li>
<li class="bullet-item">24/7 Support</li>
<li class="cta-button"><a class="button success round" href="#">Sign Up</a></li>
</ul>
</div>
<div class="medium-4 columns">
<ul class="pricing-table pricing-enterprise">
<li class="title">Enterprise</li>
<li class="price">$300<small>/month</small></li>
<li class="description">For large corporation</li>
<li class="bullet-item">Unlimited Storage</li>
<li class="bullet-item">Unlimited Users</li>
<li class="bullet-item">24/7 Priority Support</li>
<li class="cta-button"><a class="button success round" href="#">Sign Up</a></li>
</ul>
</div>
</div>
</div>
</div>
- 最后,在正文内容下方添加网站页脚,如下所示:
</div> <!—the body content end -->
<footer class="startup-footer">
<div class="row footer-nav">
<ul class="secondary-nav">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
</ul>
<ul class="social-nav">
<li><a class="foundicon-facebook" href="#">Facebook</a></li>
<li><a class="foundicon-twitter" href="#">Twitter</a></li>
</ul>
</div>
<div class="row footer-copyright">
<p>Copyright 2014 Super Awesome App. All rights reserved.</p>
</div>
</footer>
</body>
刚刚发生了什么?
我们只是按照 Foundation 指南构建了网站内容和部分的 HTML 标记。我们还在途中添加了额外的类,以便稍后自定义 Foundation 默认样式。
自从构建 HTML 标记以来,我们还没有添加任何样式;此时的网站看起来是白色和简单的,如下面的屏幕截图所示:
提示
我们刚刚添加的 HTML 的完整代码也可以在git.io/qvdupQ
找到。
摘要
本章有效地开始了我们的第三个项目。在这个项目中,我们使用 Foundation 为一家初创公司构建网站。我们浏览了 Foundation 的特性,并将其中一些特性应用到了网站中。不过,本章中我们只添加了网站的 HTML 结构。此时的网站看起来仍然是白色和简单的。我们需要编写样式来定义网站的外观和感觉,这正是我们将在下一章中做的事情。
我们将使用 Sass 来编写网站样式,Sass 是 CSS 预处理器,也定义了 Foundation 基本样式。因此,在下一章的开始,我们将首先学习如何使用 Sass 变量、混合、函数和其他 Sass 特性,然后再编写网站样式。
看起来还有很多工作要做才能完成这个项目。因此,话不多说,让我们继续下一章吧。
第八章:扩展 Foundation
在上一章中构建了网站页面标记之后,我们现在开始为网站添加外观,感觉和颜色。这次我们将使用Sassy CSS(SCSS),这也恰好是 Foundation 默认样式的基础语法。
SCSS 是 Sass 命名的 CSS 预处理器的语法变体。Sass 原始语法使用缩进格式化,使代码看起来整洁。另一方面,SCSS 使用大括号和分号,就像常规 CSS 一样。这种相似性有助于每个人快速掌握语法,特别是那些对 Sass 不熟悉的人。
由于我们将使用 SCSS,因此我们将从介绍一些 Sass 功能和其实用程序开始本章。您将学会定义变量和函数,执行操作,并遵守其他指令,这使我们能够更有效地组合网站样式规则。
这可能听起来有挑战性。如果您喜欢挑战,我们可以立即开始。
本章将围绕以下主题展开:
-
探索 Sass 功能并学习语法
-
研究 Bourbon,一个 Sass 混合库
-
组织样式表结构并使用导入指令包含部分样式表
-
设置 Koala 将 SCSS 编译为 CSS
-
通过变量自定义 Foundation 的默认样式
-
构建网站自定义样式
-
优化各种视口大小的网站布局
-
通过编译 JavaScript 使网站上线
Syntactically Awesome Style Sheets
Sass(sass-lang.com/
)是由 Hampton Catlin,Natalie Weizenbaum 和 Chris Eppstein 创建的 CSS 预处理器,这也是创建 Haml(haml.info/
)的同一个团队。正如本章开头提到的那样,Foundation 使用 Sass 来生成其 CSS,我们也会这样做。因此,在我们动手之前,我们将首先深入了解几个 Sass 功能,例如嵌套,变量,混合,函数等,这将使我们能够更有效地编写样式规则。
嵌套规则
Sass 允许我们将样式规则嵌套到彼此中。这个功能最终使我们能够编写类似于网页 HTML 结构的样式规则。这样,样式规则可以更简洁,更容易浏览。比如,我们添加了网站的标题标记,如下所示:
<header>
<h1><a href="#">Website</a></h1>
</header>
使用 Sass,我们可以构建样式规则,如下所示:
header {
background: #000;
h1 {
margin: 0;
a {
color: #fff;
}
}
}
值得注意的是,尽管 Sass 允许您嵌套样式规则,但您不应滥用这个功能。因此,不要像下面的代码那样做:
body {
nav {
ul {
li {
a {
&:before {
}
}
}
}
}
}
在嵌套样式规则之前考虑一下。这个功能的主要目标是使样式规则看起来更简单,更简洁,更容易浏览,而不是使它看起来不必要地更复杂。
使用变量存储值
变量是编程语言中一个有用的部分,它允许我们在指定的名称中定义一个值。每种语言都有稍微不同的变量声明方式。例如,JavaScript 使用关键字var
,LESS 使用@
,而在这种情况下 Sass 使用$
符号。
变量的一个完美适用实现是定义网站颜色,例如:
$primary: #000;
$secondary: #bdc3c7;
$tertiary: #2ecc71;
$quaternary: #2980b9;
$quinary: #e67e22;
因此,我们可以简单地声明代表性变量,而不是每次需要时都声明颜色值。在下面的例子中,我们将$primary
声明为正文颜色,$secondary
声明为背景颜色:
body {
background-color: $secondary;
color: $primary;
}
当编译为常规 CSS 时,这些变量将被替换为定义的值,如下所示:
body {
background-color: #bdc3c7;
color: #000;}
使用适当名称的变量(当然),您会发现编写变量比记住十六进制或 RGB 数字更容易;嗯,写$primary
比#bdc3c7
实际上更容易,不是吗?
Sass 变量不仅用于定义颜色。我们还可以使用变量来定义字符串或纯文本,如下所示:
$var: "Hello World";
$body-font-family: "Helvetica Neue";
我们可以使用变量来存储数字或长度:
$number: 9;
$global-radius: 3px;
我们可以使用一个变量来继承另一个变量的值:
$var: $anotherVar;
$header-font-family: $body-font-family;
我们可以使用一个变量来定义函数的输出:
$h1-font-size: rem-calc(44);
Foundation 在名为_settings.scss
的文件中集中了其主要变量的声明。当我们编写网站样式规则时,我们将在稍后更深入地了解这个问题。
变量插值
有些情况下变量是不适用的,比如当它被插入到字符串(纯文本)中时,如下:
$var: "Hello";
$newVar: "$var World";
div {
content: $newVar;
}
当编译时,$newVar
中的$var
声明不会被替换为"Hello"
的值。这是因为 Sass 将$var
解释为字符串或纯文本。因此,以下示例的输出将简单地是:
div {
content: "$var World";
}
另一个变例子是当一个声明以@
规则或指令开头时,变量不起作用,如下:
$screen-size: (max-width: 600px);
@media $screen-size {
div {
display: none;
}
}
这个例子简单地返回了一个错误给 Sass 编译器,因为@media
应该后面跟着print
或screen
关键字。
有一些情况下我们必须使用插值来声明一个变量。变量插值也发生在其他编程语言中,比如 PHP、Ruby 和 Swift。但我不会深入讨论其工作原理的技术细节,因为我也不太清楚。简而言之,插值允许我们在不允许变量工作的情况下嵌入变量,特别是在期望的是一个字符串的情况下。
每种编程语言都有其符号来启用插值。在这种情况下,Sass 使用#{}
。给定前面的一个例子,我们可以这样写变量:
$var: "Hello";
$newVar: "#{$var} World";
div {
content: $newVar;
}
结果将如下:
div {
content: "Hello World";
}
注意
关注 Hugo Giraudel 的帖子(webdesign.tutsplus.com/tutorials/all-you-ever-need-to-know-about-sass-interpolation--cms-21375
)以获取有关 Sass 中变量插值的进一步帮助。
使用 mixin 重用代码块
现在,我们将深入了解 Sass mixin。如果你跟着并完成了第二个项目,你应该知道 LESS mixin。Sass 和 LESS 中的 mixin 都有类似的目的;它们允许开发者在整个样式表中重用代码块和样式规则,从而遵守 DRY 原则(programmer.97things.oreilly.com/wiki/index.php/Don't_Repeat_Yourself
)。然而,在声明和重用 mixin 方面略有不同。这是我们在 LESS 中声明 mixin 的方式:
.buttons {
color: @link-color;
font-weight: normal;
border-radius: 0;
}
在 Sass 中,我们使用@mixins
指令来创建一个 mixin,例如:
$linkColor: $tertiary;
@mixin buttons {
color: $linkColor;
font-weight: normal;
border-radius: 0;
}
Sass 使用@include
指令在样式规则中重用前面的代码块。给定前面的例子,我们可以这样写:
.button {
@include buttons;
}
当前面的例子编译成 CSS 时,输出如下:
.button {
color: #2ecc71;
font-weight: normal;
border-radius: 0;
}
这是 Sass mixin 应用的一个基本例子。
Sass mixin 库简介
有些 CSS3 的语法非常复杂,写起来可能非常繁琐。这就是 mixin 特别有用的地方。幸运的是,由于 Sass 如此受欢迎,并得到了许多慷慨的开发者的支持,我们不必自己将所有 CSS3 语法转换成 Sass mixin。相反,我们可以简单地使用 Sass 的 mixin 库,使我们作为 web 开发者的工作更加愉快。
Sass 库附带了一系列有用的 mixin 和函数(我们将很快讨论函数),我们可以立即使用。有数十个流行的库可用,我们将在这里使用的一个叫做 Bourbon(bourbon.io/
)。
Bourbon 在一个库中编译了许多 mixin,简化了我们声明 CSS3 语法的方式,包括仍然标记为实验性的语法,比如image-rendering
,filter
和 CSS3 的calc
函数。现在,你认为在指定 Hi-DPI 媒体查询时哪个更容易、更快速?
注意
Hi-DPI 媒体查询用于测量设备像素密度,我们可以用它在网页上提供更高分辨率的图形,特别是在具有高清屏幕的设备上。以下是一些有关该主题的进一步信息的参考资料。
-
Boris Smus 的可变像素密度高 DPI 图像(
www.html5rocks.com/en/mobile/high-dpi/
)。 -
Reda Lemeden 的《走向视网膜网页》(
www.smashingmagazine.com/2012/08/20/towards-retina-web/
)。
以下是标准语法吗?
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
width: 500px;
}
或者,将使用 Bourbon mixin 的以下内容?
@include hidpi(2) {
width: 500px;
}
不经过多年的研究,我们通常会同意使用 mixin 应该更容易编写,也更容易记住。
注意
如前所述,除了 CSS3 mixin 之外,Bourbon 还附带了一些 Sass 函数,例如 Triangle,它允许我们创建基于 CSS 的三角形。但我不打算提及 Bourbon 库中的所有细节。由于库集合很可能会随着新的 CSS 规范的引入而更新或修订,最好是参考官方文档页面上的列表(bourbon.io/docs/
)。
创建和使用 Sass 函数
函数是使创建样式规则更加动态的功能的一部分。在 Sass 中,使用@function
指令声明函数,然后跟着函数名,最好是带有默认值的参数。在其最简单的形式中,Sass 函数可能如下所示:
@function color($parameter: green) {
}
然而,这个函数还不会输出任何东西。要生成这个函数的结果,我们需要添加一个@return
值。根据前面的例子,我们想要输出默认值参数,即"hello"
。为此,我们写下@return
值,然后跟着$parameter
,如下所示:
@function color($parameter: green) {
@return $parameter;
}
在选择器中使用此函数,如下所示:
@function name($parameter: green) {
@return $parameter;
}
.selector {
color: name();
}
编译它,你会得到以下输出:
.selector {
color: green;
}
通过指定默认值之外的新值来自定义输出,如下所示:
.selector {
color: name(yellow);
}
我们将得到一个新的输出,如下所示的代码:
.selector {
color: yellow;
}
注意
这个例子仅仅展示了函数的基本功能。有很多更多的例子可以告诉我们如何在实际情况中利用它来构建可重用的代码系列。因此,我建议您前往以下参考资料,进行更进一步的讨论并找到更多的例子。
使用纯 Sass 函数使可重用逻辑更有用(thesassway.com/advanced/pure-sass-functions
)。
一些 Sass 函数(hugogiraudel.com/2013/08/12/sass-functions/
)。
使用 Sass 函数操纵颜色
我喜欢使用 CSS 预处理器(如 Sass)的一件事情是,它有多容易确定和改变颜色。在这种情况下,Sass 提供了一堆内置函数来无缝地操作颜色。以下是一些 Sass 颜色函数的列表,供您参考,以便以后在网站中操作颜色时可能会有用:
函数 | 描述 | 示例 |
---|---|---|
lighten($color, $amount) |
通过指定的量使颜色变亮。 | $black: #000000``lighten($black, 10%); 在这个例子中,我们将$black 变亮了 10%。输出是#1a1a1a 。 |
darken($color, $amount) |
使颜色比指定的量更暗。 | $white: #ffffff;``darken($white, 10%) 在这个例子中,我们将$white 变暗了 10%。输出将是#e6e6e6 。 |
fade-out($color, $amount) |
使颜色比指定的量更透明。 | $black: #000000;``fade-out($black, .5); 在这个例子中,我们将$black 颜色编译成 RGB 格式,并将透明度设置为 50%。输出是rgba(0, 0, 0, 0.5) 。 |
注意
请查看 Sass 官方文档,了解可用的颜色函数的完整列表。
Foundation 自己的有用函数
Foundation 框架自带了一系列自己的函数。Foundation 使用这些函数来构建自己的默认样式,我们也可以使用它们来构建我们自己的样式。其中一个有用的函数是rem-calc()
,它可以让我们更轻松地计算rem
单位。
Em 和 Rem
rem
单位是一个相对值,它继承了与em
类似的概念。Ian Yates 在他的文章中详细阐述了em
的起源。
“Ems get their name from printing. Precisely when the term was first used is unclear, but as the uppercase M (pronounced emm) most closely represents the square printing block on which printing letters were placed, it came to lend its name to the measurement. Whatever the point size of the font in question, the block of the uppercase M would define the Em.”
但是,正如 Jonathan Snook 在他的文章中所描述的,em
单位的问题在于它的复合性质。由于大小是相对于最近的父元素的,根据我的经验,输出的大小可能是不可预测的,最好的情况下会变化,具体取决于它被指定的位置。请看以下例子:
body {
font-size:16px;
}
div {
font-size: 1.2em; /* 19px */
}
ul {
font-size: 1em; /* 19px */
}
ul li {
font-size: 1.2em; /* 23px */
}
这就是rem
单位的用武之地。rem
单位直接根据 HTML 文档的根元素<html>
的字体大小进行计算,因此也被称为根em
。无论单位在何处指定,结果都将是精确、一致的,更重要的是,易于计算(就像px
单位一样,但是它是相对的)。
rem-calc
函数接受整数和长度。因此,以下代码示例有效:
div {
font-size: rem-calc(12);
}
span {
font-size: rem-calc(10px);
}
p {
font-size: rem-calc(11em);
}
在这种情况下,它们将变成如下形式:
div {
font-size: 0.75rem;
}
span {
font-size: 0.625rem;
}
p {
font-size: 0.6875rem;
}
尝试一下——深入了解 Sass
关于 Sass 的内容远不止我们在这本书中所能涵盖的,比如占位符、条件语句和运算符等等。幸运的是,有足够多的好参考资料和书籍深入讨论了 Sass 及其支持工具,你可以自行深入研究。以下是我最好的推荐:
-
《Sass 和 Compass for Designers》,Ben Frain,Packt Publishing
-
《Sass for Web Designers》,Dan Cederholm,A Book Apart
-
The Sass Way——关于使用 Sass 的教程和技巧
-
一个专门的网页设计教程类别,涵盖与 Sass 相关的任何内容
在我们恢复工作之前,让我们用几个测验结束这一节,好吗?
Pop quiz – Sass 函数中的多个参数
在前面的部分,我们讨论了 Sass 函数,并向您展示了其中最简单的例子。在这个例子中,我们创建了一个只有一个参数的函数。事实上,我们可以在一个 Sass 函数中添加多个参数。
Q1. 那么,以下哪个例子是创建具有多个参数的函数的正确方式?
- 每个参数用分号分隔。
@function name($a:1px; $b:2px){
@return $a + $b
}
- 每个参数用加法运算符分隔。
@function name($a:2px + $b:2px){
@return $a + $b
}
- 每个参数用逗号分隔。
@function name($a:1px, $b:2px){
@return $a + $b
}
Pop quiz – Sass 颜色操作
Q1. Sass 内置了许多函数。在本节中,我们命名了三个,lighten()
、darken()
和fade-out()
,我认为这足以帮助我们装饰这个项目的网站。fade-out()
函数有一个别名,也可以给我们相同的结果。那么,以下哪个是fade-out()
函数的别名?
-
transparentize($color, $amount)
-
transparency($color, $amount)
-
transparent($color, $amount)
项目总结
在第七章中,使用 Foundation 创建企业响应式网站,我们通过 Bower(bower.io/
)安装了 Foundation 和 Foundation Icons,以及它们的依赖项(jQuery、Fastclick、Modernizr 等)。我们还准备了网站资产,即图片、图标和网站标志。在本章的最后一节中,我们为网站首页创建了index.html
,并使用了一些新的 HTML5 标签构建了标记。因此,当前工作目录中显示的文件和文件夹如下截图所示:
样式表组织
我们工作目录中仍然缺少的文件是样式表,用于为网站组合我们定制的样式,以及在前一节中简要提到的 Bourbon 库,它为我们提供了一些现成的混合和函数。这就是我们将在本节中要做的事情。我们将创建样式表并以一种易于将来维护的方式组织它们。
好吧,让我们恢复工作。
行动时间-组织和编译样式表
按照以下步骤正确组织样式表并将其编译为 CSS。
- 我们需要安装 Bourbon。打开终端或命令提示符,输入以下命令:
bower install bourbon --save
这个命令通过 Bower 注册表安装 Bourbon 包,并将其注册到项目的bower.json
文件中。
提示
我在这篇文章中专门讨论了bower.json
文件(webdesign.tutsplus.com/tutorials/quick-tip-what-to-do-when-you-encounter-a-bower-file--cms-21162
),去看看吧!
-
在
scss
文件夹中创建名为main.scss
、responsive.scss
和styles.scss
的新样式表。 -
_main.scss
样式表是我们将放置所有自己的样式规则的地方。我们将使用_responsive.scss
文件专门放置网站的媒体查询。styles.scss
文件是我们将这些样式表编译在一起的地方。
提示
文件名以_
开头的下划线是一种特殊的标记,告诉 Sass 编译器不要直接编译该文件。
-
在
scss
文件夹中,再创建两个样式表。这次,将它们命名为_config.scss
和foundation.scss
。 -
_config.scss
将包含 Foundation 中使用的所有变量的副本,而foundation.scss
将包含 Foundation 样式表的导入部分。这些副本将防止我们直接修改原始文件,在更新到最新版本时最终会被覆盖。 -
接下来,将 Foundation 的
_settings.scss
文件的整个内容复制到我们最近创建的_config.scss
文件中。在我们的情况下,_settings.scss
文件位于/components/foundation/scss/foundation/
目录中。 -
此外,将 Foundation 自己的
foundation.scss
的整个内容复制并粘贴到我们最近创建的foundation.scss
中。 -
然后,我们需要纠正
foundation.scss
文件中导入部分的路径。在这个阶段,所有路径都指向foundation
文件夹,如下所示:
@import "foundation/components/grid";
@import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
... /* other imports */
这显然是不正确的,因为在scss
文件夹中我们没有一个名为foundation
的文件夹。在这里,我们需要将路径指向components
文件夹,那里实际上包含了这些部分。因此,将路径更改为如下所示:
@import "../../components/foundation/scss/foundation/components/grid";
@import "../../components/foundation/scss/foundation/components/accordion";
@import "../../components/foundation/scss/foundation/components/alert-boxes";
... /* other imports */
提示
基金会部分参考的全面片段可以在 Gist (git.io/ldITag
)中找到。
注意
在 Sass 中,当导入外部文件时,我们不必指定.scss
或.sass
扩展名。Sass 编译器足够聪明,可以自行确定扩展名。这也是因为纯 CSS 也是有效的 Sass。
-
我们必须更正的另一个路径是指向 Foundation 的路径,其中包含
rem-calc()
函数的_functions.scss
。打开_config.scss
文件,并将@import "foundation/functions";
改为@import "../../components/foundation/scss/foundation/functions";
。 -
我们将使用 Koala 将这些样式表编译成 CSS。启动 Koala 并添加工作目录:
-
在 Koala 的样式列表中,你不会找到带有下划线前缀的 SCSS 样式表。默认情况下,Koala 会忽略这个文件,因为它最终不会被编译成 CSS。
-
但是,你应该在其中找到项目的两个主要样式表,即
styles.scss
和foundation.scss
。确保此输出设置为css
文件夹,如下面的屏幕截图所示: -
然后,确保选中
自动编译
选项,这样它们将在我们进行更改时自动编译成 CSS。还要检查源映射
选项,以便更轻松地调试样式表。请查看下面的屏幕截图: -
点击
styles.scss
和foundation.scss
的编译按钮将它们编译成 CSS。 -
打开
index.html
,并在<head>
标签内链接编译后的 CSS,如下所示:
<link rel="stylesheet" href="assets/css/foundation.css">
<link rel="stylesheet" href="assets/css/styles.css">
刚刚发生了什么?
我们刚刚安装了 Bourbon,并组合了几个新的样式表来为网站设计样式。然后,我们将它们编译成 CSS,并将它们链接到index.html
。因此,正如你在下面的屏幕截图中所看到的,网站现在开始发挥作用-使用 Foundation 默认样式:
网站的外观和感觉
样式表组织和编译完成后,现在是定制网站样式的时候了。恰好的是,我们不必自己编写每一条样式规则。在这种情况下,由于我们使用了一个框架(Foundation),有时定制网站样式可以像更改变量中的默认值一样简单。
话不多说,让我们继续。
进行操作-在网站上构建
网站的样式将涉及多个样式表。因此,请仔细遵循以下步骤:
- 在
foundation.scss
中导入以下样式表:
@import "config";
@import "../../components/foundation/scss/normalize";
@import "../../components/foundation-icons/foundation_icons_social/sass/social_foundicons.scss";
... /* other partials */
这样,变量以及_config.scss
中的更改将通过 Foundation 影响其他组件样式表。normalize
变量将标准化基本元素样式,social_foundicons.scss
;你可以猜到,这使我们能够应用 Foundation 的社交图标。
- 打开
styles.scss
,并按照以下方式导入 Bourbon、_config.scss
、main.scss
和responsive.scss
:
@import "../../components/bourbon/dist/bourbon";
@import "config";
@import "main";
@import "responsive";
-
然后,我想简单地应用来自 Google Font 的自定义字体,因为自定义字体看起来比普通字体系统(如 Arial 或 Times)更好。在这里,我选择了一个名为 Varela Round 的字体(
www.google.com/fonts/specimen/Varela+Round
)。 -
打开
index.html
,并在<head>
标签内添加字体样式表,如下所示:
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Varela+Round' type='text/css'>
-
现在,我们将把当前指定为 Foundation 默认字体的
font-family
堆栈更改为使用 Varela Round。 -
要这样做,打开
_config.scss
,取消注释名为$body-font-family
的变量,并插入"Varela Round"
,如下所示:
$body-font-family: "Varela Round", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
提示
Sass 注释
通常,注释会导致代码编译器或引擎忽略代码,就像浏览器一样。然而,它也经常被用作内联文档,解释代码的作用。
每种编程语言都有自己的注释代码的方式。在 CSS 中,它将是这样的:
/* .property { content: ""' }*/
在 Sass 中,我们可以使用 CSS 的方式,如前面所示,或者添加//
,如下所示:
// .property { content: ""' }
当在行的开头添加//
时,编译器将完全忽略该行,因此不会编译它。
- 我们将为网站的每个部分设置样式。首先,我们将专注于网站的页眉,然后逐渐向页脚延伸。让我们首先添加一个图像背景。打开
_main.scss
,然后添加以下行:
.startup-header {
background: url('../img/banner.jpg') no-repeat center center fixed;
background-size: cover;
}
注意
CSS3 背景大小
背景大小是一个特殊的 CSS3 属性,用于控制背景的拉伸。我们在前面的片段中使用的cover
的值将按比例拉伸背景图像以完全覆盖容器。请参考以下参考资料,以获取有关 CSS3 背景大小的进一步帮助:
-
CSS 背景和边框模块 3 级(
www.w3.org/TR/css3-background/#the-background-size
) -
Perfect Full Page Background Image by Chris Coyier (
css-tricks.com/perfect-full-page-background-image/
) -
我可以使用 CSS3 背景大小吗?(
caniuse.com/#feat=background-img-opts
)
然而,图像目前被隐藏在应用于顶部栏和 Foundation 命名为 Panel 的部分的背景颜色的后面(foundation.zurb.com/docs/components/panels.html
),如下截图所示:
- 去掉这些背景颜色,以便我们可以透过背景图像看到。为此,打开
_config.scss
文件,并取消注释以下行:
$topbar-bg-color: #333;
$topbar-bg: $topbar-bg-color;
将$topbar-bg-color
变量的值从#333
更改为transparent
$topbar-bg: transparent;
- 取消以下行的注释,指定面板的背景颜色:
$panel-bg: scale-color($white, $lightness: -5%);
然后,将值更改为transparent
:
$panel-bg: transparent;
现在,我们可以看到背景图像,如下截图所示:
-
从前面的截图中可以看出,顶部栏和面板的背景颜色已经被移除,但是一些菜单项仍然有。
-
让我们去掉这些背景颜色。在
_config.scss
中,取消注释以下行:
$topbar-dropdown-bg: #333;
并将值更改为使用$topbar-bg
变量的值,如下所示:
$topbar-dropdown-bg: $topbar-bg;
-
保存文件,等待几秒钟进行编译,现在您应该看到菜单项的背景颜色已经被移除,如下截图所示:
-
添加
padding-top
以在顶部栏和浏览器视口的上边界之间提供更多距离:
.startup-header {
...
.startup-top-bar {
padding-top: rem-calc(30);
}
}
现在,正如您所看到的,其中有更多的宽度:
图像的左半部分是在我们添加padding-top
之前,右半部分显然是在我们添加padding-top
之后。
- 在面板部分的顶部和底部增加更多的填充;因此,我们可以查看更多的背景图像。将样式规则嵌套在
.startup-header
下,如下所示:
.startup-header {
...
.startup-hero {
padding-top: rem-calc(150px);
padding-bottom: rem-calc(150px);
}
}
- 添加 logo 图像,如下所示:
.startup-name {
max-width: 60px;
a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url('../img/logo.svg') no-repeat center left;
background-size: auto 90%;
opacity: 0.9;
}
}
现在我们已经添加了 logo,如下所示:
- 在顶部菜单链接上悬停,您会发现它有一个深色背景,如下所示:
当涉及到整个网站的美学时,这个背景颜色并不太合适,所以让我们移除它。在_config.scss
中取消注释以下行:
$topbar-link-bg-hover: #272727;
然后,通过继承$topbar-bg
变量的值,将值改为透明:
$topbar-link-bg-hover: $topbar-bg;
- 将菜单链接转换为大写,这样看起来会稍微大一些。在
_config.scss
中将名为$topbar-link-text-transform
的变量从none
改为uppercase
:
$topbar-link-text-transform: uppercase;
- 接下来我们要做的是改变两个按钮的样式:
登录
和注册
。我们将使它看起来更时尚一点,以下是这些按钮的所有新样式;将这些行嵌套在.startup-header
下面:
.startup-header {
...
.startup-top-bar {
padding-top: rem-calc(30);
ul {
$color: fade-out(#fff, 0.8);
$color-hover: fade-out(#fff, 0.5);
background-color: transparent;
.button {
@include transition (border 300ms ease-out, background-color 300ms ease-out);
}
.log-in {
padding-right: 0;
> .button {
background-color: transparent;
border: 2px solid $color;
color: #fff;
&:hover {
background-color: transparent;
border: 2px solid $color-hover;
color: #fff;
}
}
}
.sign-up {
> .button {
background-color: $color;
border: 2px solid transparent;
color: #fff;
&:hover {
background-color: $color-hover;
border: 2px solid transparent;
}
}
}
}
}
}
现在,按钮应该看起来如下截图所示。悬停在按钮上,您将看到我们通过 Bourbon 的transition()
混合添加的漂亮的过渡效果:
然而,值得注意的是,我认为这只是装饰。你可以自定义按钮样式。
- 在透明背景上的按钮上,让我们也稍微透明左侧的三个菜单链接项目,即价格,定价和博客。为此,请取消注释并在
_config.scss
中将名为$topbar-link-color
的变量改为fade-out(#fff, 0.3)
,如下所示:
$topbar-link-color: fade-out(#fff, 0.3);
- 然后,让我们给链接添加一个过渡效果。在
_main.scss
中添加以下行:
.startup-header {
...
.startup-top-bar {
...
a {
@include transition(color 300ms ease-out);
}
}
}
- 接下来,我们将在页眉上添加一个深色透明层。通过添加这个深色层,页眉中的文本可以更清晰地显示在背景图像上。
在_main.scss
中添加以下行:
.startup-header {
...
.startup-top-bar,
.startup-hero {
background-color: fade-out(#000, 0.5);
}
}
- 在头部部分添加以下行作为我们的最后一步:
.startup-header {
...
.startup-hero {
padding-top: rem-calc(150px);
padding-bottom: rem-calc(150px);
.hero-lead {
color: darken(#fff, 30%);
}
}
...
}
现在,我们有了一个漂亮的网站标题,正如您在下面的截图中所看到的那样:
- 网站样式完成后,我们将转到下一部分。在页眉下面,我们有包含我们产品和服务的一些关键特性的特性部分。这些都是特性部分的样式:
...
.startup-features {
padding: rem-calc(90 0);
figure {
margin: 0;
}
.columns {
margin-bottom: rem-calc(15);
}
}
在上面的片段中,我们从包裹图像图标的 figure 元素中移除了边距。这将给图像图标的 figure 更多的空间,正如您在下面的截图中所看到的那样:
除此之外,margin-bottom
以及我们添加的 padding,只是给这个部分增加了更多的空白。
- 在特性部分下面,我们有一个展示满意客户的部分。我们称之为见证部分。添加以下样式规则来完善它:
.startup-testimonial {
padding: rem-calc(90 0);
text-align: center;
background-color: darken(#fff, 2%);
blockquote {
font-size: rem-calc(24);
}
figure {
margin-top: 0;
margin-bottom: 0;
.avatar {
border-radius: 50%;
display: inline-block;
width: 64px;
}
}
figcaption {
margin-top: rem-calc(20);
color: darken(#fff, 30%);;
}
}
- 同时,通过改变
_config.scss
中$blockquote-border
的值,也移除blockquote
元素的左边框,如下所示:
$blockquote-border: 0 solid #ddd;
请注意,上述样式仅仅是装饰。在这个阶段,这就是见证部分的外观:
不要惊慌,它没有坏。剩下的样式将通过 Orbit Slider 插件添加一旦它被启用。我们很快就会看到这个步骤。
- 接下来,我们将为价格和计划表格设置样式。这些都是表格价格的样式,它们的主要目的是给每个表格设置不同的颜色。
.startup-pricing {
$basic-bg : #85c1d0;
$team-bg : #9489a3;
$enterprise-bg : #d04040;
padding-top: rem-calc(120);
padding-bottom: rem-calc(120);
.pricing-table {
background-color: darken(#fff, 2%);
}
.pricing-basic {
.title {
background-color: $basic-bg;
}
.price {
background-color: lighten($basic-bg, 25%);
}
}
.pricing-team {
.title {
background-color: $team-bg;
}
.price {
background-color: lighten($team-bg, 25%);
}
}
.pricing-enterprise {
.title {
background-color: $enterprise-bg;
}
.price {
background-color: lighten($enterprise-bg, 25%);
}
}
}
- 页脚部分是简单的。没有什么显著的。只是一堆样式规则,让页脚看起来更漂亮,如下所示:
.startup-footer {
$footer-bg: darken(#fff, 5%);
text-align: center;
padding: rem-calc(60 0 30);
background-color: $footer-bg;
border-top: 1px solid darken($footer-bg, 15%);
.footer-nav {
ul {
margin-left: 0;
}
li {
display: inline-block;
margin: rem-calc(0 10);
}
a {
color: darken($footer-bg, 30%);
@include transition (color 300ms ease-out);
&:hover {
color: darken($footer-bg, 70%);
}
}
}
.social-nav {
li a:before {
margin-right: rem-calc(5);
position: relative;
top: 2px;
}
.foundicon-facebook:hover {
color: #3b5998;
}
.foundicon-twitter:hover {
color: #55acee;
}
}
.footer-copyright {
margin-top: rem-calc(30);
color: darken($footer-bg, 15%);
}
}
刚刚发生了什么?
在这一部分,我们关注了网站的外观。我们只是添加了最终使网站从头部到页脚看起来更漂亮的样式。然而,在这个阶段有一些东西是不可行的,比如 Orbit,我们还没有测试网站在较小的视口尺寸下的外观。所以,这正是我们接下来要解决的问题。这就是网站在这个阶段应该看起来的样子:
尝试一下-颜色和创意
我意识到好坏美丑都是高度主观的。这完全取决于个人偏好和品味程度。因此,如果我们在前面步骤中指定的网站装饰,如颜色、字体和大小,不符合您的口味,您可以自由更改它们并添加自己的创意。
小测验-导入外部 Sass 样式表
Q1. 希望您完全按照前面的步骤进行操作,并注意一些细节。我们已经导入了许多样式表,将它们编译成一个单独的样式表。我们如何使 Sass 编译器忽略这些导入的样式表,以便编译器不会将它们单独编译成 CSS 文件?
-
在导入声明中删除扩展文件的扩展名。
-
在导入声明中添加下划线作为前缀。
-
在文件名中添加下划线作为前缀。
微调网站
如前所述,在我们称网站完成之前,有一些事情需要做。首先,我们将启用轨道和顶部栏的切换功能,并为较小的视口大小优化网站样式,如定位和大小。又到了行动的时候。
行动时间-使用媒体查询编译 JavaScript 和设置网站样式
执行以下步骤来编译 JavaScript 文件并优化小视口大小的网站:
-
在
assets/js
目录中创建一个名为foundation.js
的新 JavaScript 文件。 -
在
foundation.js
中,导入以下 JavaScript 文件:
// @koala-prepend "../../components/foundation/js/vendor/jquery.js"
// @koala-prepend "../../components/foundation/js/foundation/foundation.js"
// @koala-prepend "../../components/foundation/js/foundation/foundation.topbar.js"
// @koala-prepend "../../components/foundation/js/foundation/foundation.orbit.js"
-
通过 Koala,编译
foundation.js
。 -
然后,打开
index.html
,并在</body>
之前添加以下行,以启用轨道滑块的功能:
<script src="img/foundation.min.js"></script>
<script>
$(document).foundation({
orbit: {
timer_speed: 3000,
pause_on_hover: true,
resume_on_mouseout: true,
slide_number: false
}
});
</script>
- 现在,我们将通过媒体查询优化较小视口的网站布局。为此,我们需要取消注释在 Foundation 中定义的媒体查询范围的变量,以便我们也可以在我们的样式表中使用它们:
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);
$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";
$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
提示
我们可以在自己的样式表中使用这些变量,如下所示:
@media #{$small-up} {
}
-
现在,我们将通过这些媒体查询定义一些样式规则,以调整网站的样式,特别是大小、定位和空白。
-
这些都是要添加到
_responsive.scss
中的所有样式规则。
@media #{$small-up} {
.startup-name a {
position: relative;
left: rem-calc(15);
}
}
@media #{$small-only} {
.startup-header {
.startup-name a {
background-size: auto 80%;
}
.startup-top-bar {
padding-top: rem-calc(15);
.top-bar-section {
text-align: center;
}
.sign-up {
padding-top: 0;
}
}
.startup-hero {
text-align: center;
}
}
.startup-footer {
.secondary-nav {
li, a {
display: block;
}
a {
padding: rem-calc(10);
}
}
}
}
@media #{$medium-up} {
.startup-top-bar {
.log-in {
padding-right: 3px;
}
.sign-up {
padding-left: 3px;
}
}
}
@media #{$large-only} {
.startup-name a {
position: relative;
left: rem-calc(0);
}
}
刚刚发生了什么?
我们刚刚编译了 JavaScript,以启用轨道滑块和顶部栏的切换功能。我们还为较小的视口大小优化了网站布局。以下截图显示了网站在小视口下的外观:
这很好,不是吗?
试一试-删除不必要的 Foundation 组件
我们包含了所有 Foundation 组件,即使我们在网站中没有使用。因此,最好删除所有对网站没有优势的样式。打开_foundation.scss
,并注释掉我们不需要的@import
组件(至少目前不需要),然后重新编译样式表。
总结
我们刚刚完成了第三个项目,使用 Foundation 为一家新创公司构建了一个响应式网站。在完成这个项目的过程中,我们学到了很多东西,特别是关于 Sass。Sass 是一个强大的 CSS 预处理器,可以让我们以更高效和灵活的形式组合样式。我们已经学会了使用变量、插值、混合和其他一些 Sass 功能。
坦率地说,包括我们在前几章中构建的网站在内,都很容易构建。我们的工作主要是使网站外观更加美观,比如颜色和大小。而对于使网站响应式最重要的事情,比如网格,已经被我们使用的框架(Foundation、Bootstrap 和 Responsive.gs)覆盖了。
总之,我们希望本书中呈现的项目对您自己构建响应式网站是一个很好的开始。
附录 A. 小测验答案
第一章,响应式网页设计
响应式网页设计的主要组件的小测验
Q1. | 2 |
---|---|
Q2. | 2 |
Q3. | 2 |
第二章,Web 开发工具
网页开发工具和命令行的小测验
Q1. | 1 |
---|---|
Q2. | 2 |
第三章,使用 Responsive.gs 构建简单的响应式博客
小测验-使用 polyfill
Q1. | 2 |
---|
小测验-HTML5 元素
Q1. | 2 |
---|---|
Q2. | 2 |
Q3. | 1 |
第四章,增强博客外观
网站性能规则的小测验
Q1. | 4 |
---|
第五章,使用 Bootstrap 开发投资组合网站
小测验-测试您对 Bower 命令的理解
Q1. | 2 |
---|---|
Q2. | 1 |
Q3. | 2 |
小测验-Bootstrap 按钮类
Q1. | 5 |
---|---|
Q2. | 1 |
第六章,使用 LESS 打磨响应式投资组合网站
小测验-以下哪个选项不是 LESS 导入选项?
Q1. | 5 |
---|---|
Q2. | 1 |
使用 LESS 函数和扩展语法的小测验
Q1. | 2 |
---|---|
Q2. | 1 |
Q3. | 2 |
第八章,扩展基础
Sass 函数中的多个参数的小测验
Q1. | 3 |
---|
小测验-Sass 颜色处理
Q1. | 1 |
---|
导入外部 Sass 样式表的小测验
Q1. | 1 |
---|
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· DeepSeek “源神”启动!「GitHub 热点速览」
· 上周热点回顾(2.17-2.23)