css3 骨架屏样式_在我们的骨架页面构建中添加样式

css3 骨架屏样式

在我们正在进行的构建过程的这一部分中，我们将专注于样式化HTML。 本教程将分为三个主要部分：

1. 添加图像
2. 隐藏字体到Web字体
3. 样式各部分

让我们快速提醒一下自己到目前为止所构建的 ：

考虑到我们的目标是 ，我们还有很多工作要做！

添加图像

我们将从www.unsplash.com下载图像，而不是为每个部分裁剪背景图像，该图像大而免费。 我们将使用以下图像：

• 英雄形象
• 创意形象
• 帮助图片
• 视频影像
• 报价图片

创建一个新文件夹，将其命名为“ images”，然后在其中下载图像。 如果您想优化并重新保存它们以节省更多的字节数，请随意。

除此之外，对于投资组合图像，我们将获取一些相当不错的三角图像 。

下载六个SVG文件，并将它们放置在“ images / portfolio”文件夹中，每个文件的名称应如下所示：“ work_1.svg”，“ work_2.svg” ...“ work_6.svg”。

对于客户，人员和服务部门，我们将从PSD导出图像。 我将不深入介绍此过程，因为有很多关于如何从PSD导出图像的教程 。 我个人每天喜欢和使用的用于导出图像的工具称为Semser 。

每个部分的图像应放置在相关目录“ images / section_name”下。 文件夹结构应如下所示：

将字体转换为Webfonts

PSD中使用的字体是Amble ， SlimJoe和BigJohn和FontAwesome 。

对于SlimJoe和BigJohn字体，我们将使用FontSquirrel从OTF转换到网络字体 。 转到FontSquirrel并上传从此处下载的字体。 屏幕应类似于以下内容：

重要说明 ：每当使用诸如Fontsquirrel之类的转换工具时，都需要确保要转换的字体文件具有适当的许可证。

FontSquirrel完成转换后，您可以下载该工具包。 在存档中，您将拥有以下文件：

为了保持所有内容的清洁，在我们下载了Amble ， SlimJoe＆BigJohn和FontAwesome之后 ，我们需要将每个字体包移动到“ fonts”文件夹中。 字体的文件夹结构应如下所示：

好的，现在我们完成了“ images”和“ fonts”文件夹的工作，剩下的任务是根据PSD设置各节的样式，因此让我们继续下一节。

样式段

上一教程中介绍的每个部分都需要一些CSS修饰，以带来PSD的外观。 让我们从创建一个名为“ style.css”的新文件开始，在该文件中，我们将为各节编写所有自定义css。

注意 ：您可能会喜欢使用Sass或LESS这样的预处理器，在这种情况下，您会将文件串联在一起，但是出于全球吸引力的考虑，在本教程中，我们将坚持使用良好CSS。

因此，简要地讲，我们已经将字体转换为webfonts，现在我们需要在CSS中引用它们。 Amble，SlimJoe和BigJohn字体的代码如下所示：

/* Fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */

/* SlimJoe */
@font-face {
    font-family: 'slim_joeregular';
    src: url('../fonts/SlimJoe/slim_joe-webfont.eot');
    src: url('../fonts/SlimJoe/slim_joe-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SlimJoe/slim_joe-webfont.woff2') format('woff2'),
         url('../fonts/SlimJoe/slim_joe-webfont.woff') format('woff'),
         url('../fonts/SlimJoe/slim_joe-webfont.ttf') format('truetype'),
         url('../fonts/SlimJoe/slim_joe-webfont.svg#slim_joeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* BigJohn */
@font-face {
    font-family: 'big_johnregular';
    src: url('../fonts/BigJohn/big_john-webfont.eot');
    src: url('../fonts/BigJohn/big_john-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BigJohn/big_john-webfont.woff2') format('woff2'),
         url('../fonts/BigJohn/big_john-webfont.woff') format('woff'),
         url('../fonts/BigJohn/big_john-webfont.ttf') format('truetype'),
         url('../fonts/BigJohn/big_john-webfont.svg#big_johnregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* == http://www.fontsquirrel.com/fonts/amble */

/* Amble Regular */
@font-face {
    font-family: 'ambleregular';
    src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot');
    src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.woff') format('woff'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Amble Bold */
@font-face {
    font-family: 'amblebold';
    src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot');
    src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.woff') format('woff'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.svg#amblebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Amble Light */
@font-face {
    font-family: 'amblelight';
    src: url('../fonts/Amble/Light/Amble-Light-webfont.eot');
    src: url('../fonts/Amble/Light/Amble-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Light/Amble-Light-webfont.woff') format('woff'),
         url('../fonts/Amble/Light/Amble-Light-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Light/Amble-Light-webfont.svg#amblelight') format('svg');
    font-weight: normal;
    font-style: normal;
}

FontAwesome提供了一个CSS文件，称为font-awesome.css，该文件需要放在css文件夹内。 如下面的代码片段所示，style.css和font-awesome.css都需要index.html内的引用。

添加样式文件的引用后，让我们进入css / style.css并开始添加一些默认样式，以覆盖Skeleton的默认值。 我想做的第一件事是向所有元素添加box-sizing ，如下所示：

/* Personal Flavour */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

现在开始排版重写。 由于设计者添加了自定义字体，并且我们已经将它们转换为Web字体，因此我们需要将它们分配给标题，段落和正文。 字体设计在设计网站时起着重要作用。 我们需要确保符合设计者的规格。

/* Typography */

body {
  font-size: 16px;
  letter-spacing: .05em;
  color: #222222;
  font-family: "amblelight", "Raleway", Helvetica, Arial, sans-serif;
}
h1, h3{
  font-family: "big_johnregular", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h4 {
  font-size: 22px;
}
h3 {
  font-size: 28px;
}

从片段中可以看到， h1和h3共享相同的font-family BigJohn 。 我们还需要对body排版进行一些更改，例如font-size ， letter-spacing ， color和font-family 。

如果您从第一部分还记得的话，当我们编写HTML时，我们创建了一些自定义实用程序类来居中元素，还创建了分隔器类，它具有两种不同的颜色，即#222 （深灰色）和#d87843 （橙色）。 为了使元素居中，我们将绝对定位它，并使用transform属性正确定位它。

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.vertical-centered {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

这里的想法是，它采用当前元素的尺寸并沿其移动。 例如， translateY(-50%)将元素向上移动其高度的50％。

在上一教程中，我们创建了一个带有分隔符类的元素，以根据设计创建线。 样式非常小，但是这里的窍门是我们使用:before伪元素使其可见。 分隔符类只是间距和文本对齐的助手。

/* Separator */

.separator {
  position: relative;
  margin-bottom: 1.7em;
  padding-bottom: 1.7em;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  color: inherit;
}
.separator:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 86px;
  height: 2px;
  background-color: #222;

  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.separator.orange:before {
  background-color: #d87843;
}

骨架随附按钮的预定义样式：

在我们的设计中，还有另外两种不同类型的按钮，其中一种具有轮廓，另一种针对视频部分中的播放按钮进行了四舍五入。

/* Button inverted */

.button.inverted {
  font-size: inherit;
  padding: 25px 70px;
  color: white;
  height: auto;
  border: 3px solid white;
  text-transform: none;
  font-size: 26px;
  font-family: "ambleregular";
}

.button.inverted:hover {
  background: white;
  color: #222;
}

.button.circle {
  padding: 0;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  text-align: center;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}

用来绘制轮廓按钮的额外类是倒置的，具有透明的背景和#222的颜色和边框。 悬停时，背景颜色为#222 ，文本颜色为white 。 我还为间隔和设计目的在其上添加了大量填充。

节的默认样式

如果您还记得的话，每个部分都有一个不同的类名，我们现在将其定位。 这里的整体思想是每个部分都应该具有background-color或background-image 。

除此之外，带有背景图像的部分为避免重复，还具有另一类featured-bg-image ，该类基本上设置了背景图像的位置，大小和不透明度，并创建了将图像拉伸的背景覆盖效果整个容器尺寸。

每个部分的top和bottom都有80px填充， left和right 0px填充。

/* =Section general styling
-------- */

section {
  text-align: center;
  padding: 80px 0;
}

/*

  Section with featured background image. Every section which will have this
  class will get the effect with a background cover.

*/

.featured-bg-image {
  position: relative;
  background-color: #222222;
  color: white;
  min-height: 500px;
}

.featured-bg-image:before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: .35;
}

.help:before {
  background: url("../images/help_bg_image.jpg");
}

.creativity:before {
  background: url("../images/creativity_bg_image.jpg");
  background-position: 50% 0;
}

.quote:before {
  background: url("../images/quote_bg_image.jpg");
}

.video-iframe{
  position: absolute;
  left: 0; top: 0; bottom: 0; right: 0;
  height: 100%;
  width: 100%;
  display: none;
}

.video:before {
  background: url("../images/video_bg_image.jpg");
}

.clients {
  background-color: #f4f4f4;
}

.footer {
  background-color: #222222;
  color: white;
}

导航

导航来自一个汉堡包图标和一个无序的链接列表。 导航是固定的，可以在滚动时始终位于所有内容的顶部。 它的宽度为320px ，高度为100% 。 若要将导航网站之外，我们使用的是transform translate属性（我们也可以用来中心元素），但这次我们把它翻译100%它的width ，所以这将是不可见的。

导航中的链接具有大写文字，白色color和100% width 。 我还删除了链接上显示的text-decoration ，并使font-weight粗体变为粗体。

汉堡包图标有一个30px的font-size和白色color ，与20px padding各地。 我还为background-color和active状态添加了过渡效果。 我想重点关注的是汉堡包图标的位置，因为从设计中可以看出，它位于导航“外部”。 对此的快速解决方案是将其放置在绝对位置并剩余100％。 left: 100%表示导航宽度，因此现在我们可以增加导航宽度，并且图标将始终位于其外部。

/* =Navigation
-------- */

.navigation {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100%;
  z-index: 3;
  width: 320px;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);

  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.navigation.active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.navigation ul {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  background: #222;
}
.navigation ul li {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
.navigation ul li a {
  display: block;
  height: 100%;
  padding: 10px 0;

  text-decoration: none;
  text-transform: uppercase;
  color: white;
  font-weight: 900;
}

.navigation ul li a.current,
.navigation ul li a:hover {
  color: #222;
  background-color: white;
}

.navigation .menu-icon {
  color: white;
  font-size: 30px;
  line-height: 1em;

  position: absolute;
  left: 100%;
  padding: 20px;

  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -ms-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.navigation .menu-icon.active {
  background-color: rgba(0,0,0, .3);
}
.navigation .menu-icon:hover {
  color: #222;
  background-color: transparent;
}

英雄区

英雄部分继承了与带有特色背景图像的部分相同的样式，但是现在我们希望采用不同的方法，因为它具有多种样式。 它由背景图像作为背景，背景颜色作为颜色填充，渐变叠加和不同的高度（500像素）组成。

使用CSS3 Gradient制作的伪元素（ :after ）创建渐变叠加效果。 之所以创建此效果，是因为它使我们无需打开Photoshop即可灵活地更改图像美感。

/* =Hero
-------- */

.hero {
  padding: 0;
  min-height: 500px;
  text-align: center;
  position: relative;
  background-color: #d56d4d; /* layer fill content */
  color: white;
}
.hero-image {
  background: url("../images/hero_bg_image.jpg") no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: .9;
}
.hero-image:after {
  content: '';
  opacity: .87; /* layer alpha */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
  background-image: -moz-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  background-image: -webkit-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  background-image: linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.hero h2 {
  font-size: 24px;
}

.hero p {
  padding: 0 15%;
}
.hero .separator:before {
  background-color: white;
}

“联系我们”部分

“与我们联系”部分分为两个小节： 一个用于左侧，一个用于右侧，并使用#f2f2f2作为背景色。 左侧周围有一个70px的填充和透明背景。 社交链接列表项是浮动的，列表样式为无， margin-right框为10px，在项目之间添加空格。

表单本身没有太多样式（除了70px用于填充和背景颜色），因为Skeleton已经为我们处理了。

/*Contact*/

.contact-us {
  background-color: #f2f2f2;
  text-align: left;
}
.contact-us-details {
  padding: 70px;
}
.contact-us-details h5 {
  font-size: 2rem;
}
.contact-us-details .social-links a {
  color: #222;
  display: block;
}

.contact-us-details .social-links li {
  list-style: none;
  float: left;
  font-size: 24px;
  margin-right: 10px;
}
.contact-us-details .social-links li:last-child {
  margin-right: 0;
}
.contact-us-form {
  padding: 70px;
  background-color: #e4e4e4;
}
.contact-us .row {
  margin: 0;
}

工作科

工作过滤器

“工作”过滤器项目的font-family具有“ SlimJoe”，文本为大写字母，字体大小为18px，左右边距为0.5em，以在它们之间创建空间。 active状态具有不同的字体系列“ BigJohn”，以将其与active状态下的其余项目区分开。

/* Work Filters */

.work-filters {
  list-style: none;
}
.work-filters li {
  display: inline-block;
  margin: 0 .5em;
  font-size: 18px;
  text-transform: uppercase;
  font-family: "slim_joeregular";
}
.work-filters li a {
  color: inherit;
  text-decoration: none;
}
.work-filters li.active {
  font-family: "big_johnregular"
}

工作项目和工作细节

工作项目的固定高度为360px，宽度为33％，这使我们形成一个网格，每行三个项目。 项目之间的“伪造”空间是在每个项目上都应用了边框。

工作细节是每个项目的标题，延伸到工作项目的绝对位置，左，右，上和下均为0px。 它还具有不透明度为.75的背景，因为它位于图像上方，因此可以产生覆盖效果。 默认情况下，明细容器是隐藏的，当工作项悬停时，它会变得可见-通过CSS过渡进行动画处理。

/* Work items */

.work-items {
  list-style: none;
  width: 100%;
  display: inline-block;
}
.work-items li {
  position: relative;
  overflow: hidden;
  height: 360px;

  /* important because we need to overwrite the default skeleton */
  margin: 0!important;
  width: 33%;
  border: 10px solid white;

  position: relative;
}
.work-items li:nth-child(4n) {
  margin-left: 0;
}
.work-items li img{
  width: auto;
  height: 100%;
  display: block;
}
/* Work detail */

.work-detail {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  opacity: 0;
  background: rgba(0,0,0,.75);
  color: white;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.work-detail h3 {
  font-size: 16px;
  letter-spacing: .05em;
}
.work-detail p {
  font-size: 20px;
  text-transform: capitalize;
  padding-left: 20px;
  padding-right: 20px;
}

.work-items li:hover .work-detail{
  opacity: 1;
  box-shadow: inset 0 0 0 10px #222;
}

客户部

客户部分是一个简单的内联列表。 这里唯一值得一提的是，我正在使用灰度CSS过滤器来使图像饱和。 每个项目的宽度为18％，正确间距为2％。

/* Clients */

.clients {
  list-style: none;
}
.clients li {
  display: inline-block;
  width: 18%;
  margin-right: 2%;
}
.clients li:last-child {
  margin-right: 0;
}
.clients li img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
}

“关于”部分

“关于”部分继承了工作部分的样式，但项目高度300px除外。

/* About */

.people-list {
  list-style: none;
  margin: 70px 0;
  width: 100%;
}
.people-list li {
  position: relative;
  height: 300px;
  overflow: hidden;
}
.people-list li img {
  width: auto;
  height: 100%;
  display: block;
}

.people-list .people-hover {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45);

  opacity: 0;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.people-list .people-hover a {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
}

/* About people details */

.people-list .people-detail {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0 20px;
  z-index: 1;
  color: white;
}
.people-list .people-detail h3 {
  font-size: 22px;
  margin-bottom: 0;
}
.people-list .people-detail p {
  font-size: 16px;
}

.people-list li:hover .people-hover{
  opacity: 1;
  box-shadow: inset 0 0 0 5px #222;
}

列表的最后一项具有不同的样式，因为它没有悬浮效果。 背景颜色为白色，周围具有不同的边框颜色。

/* Feature people hiring */

.people-list li.blank-feature{
  box-shadow: inset 0 0 0 3px #222;
}
.people-list li.blank-feature img {
  visibility: hidden;
}
.people-list li.blank-feature h3 {
  font-size: 26px;
}

“服务”部分

服务图片的高度为150px，底部边距为20px。 从代码中可以看到，图像具有不同的块显示，最大宽度为100％。

/* Services */

.services {
  list-style: none;
  margin: 70px 0;
}

.services .service-image {
  height: 150px;
  margin-bottom: 20px;
}

.services .service-image img{
  display: block;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.services p {
  font-size: 16px;
  letter-spacing: 0;
}

React性

由于我们使用的是Skeleton网格系统，因此该网站开箱即用，但是仍然存在一些字体大小，边距，填充和对齐方式方面的样式问题。

从下面的代码中可以看到，移动显示的按钮填充较小。

对于表，工作项应具有100％的宽度，人员项应每行两个。 我们还需要减少接触部分表格的填充，社交链接的宽度将为33％，并与中心对齐。

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (max-width: 400px) {
  .button.inverted {
    padding: 15px;
  }
}
@media (min-width: 400px)  and (max-width: 750px) {
  .work-items li.isotope-item.columns {
    width: 100%;
  }
  .people-list li.people-list-item.columns {
    width: 46%;
    margin: 2%;
    box-sizing: content-box;
  }
  .contact-us-details {
    padding: 70px 25px;
    text-align: center;
  }
  .contact-us-details .social-links li {
    text-align: center;
    width: 33%;
    margin: 0;
  }
  .contact-us-details h5 {
    font-size: 1.7rem;
  }

}

结论

如果您利用了Skeleton框架（如从本教程中看到的那样），那么许多繁重的工作将轻松完成，从而使您对正在构建的大部分内容都放心。

的确，您确实需要应用不同的字体系列，字体大小，间距以及（必要时）不同的按钮样式，仅此而已。

这就是本课的内容，希望您喜欢它，并且我期待在下一个教程中看到您，在该教程中我们将实现JavaScript。 到时候那里见！

翻译自: https://webdesign.tutsplus.com/tutorials/adding-styles-to-our-skeleton-page-build--cms-23882

css3 骨架屏样式