100.实战网页构建定价部分-第三节

我们上节课完成的页面如下所示

这节课我们就完成对这一部分的构建；

● 首先我们用文字、图标也替换这些东西

<div class="container grid grid--4-cols">
        <div class="feature">
          <ion-icon class="feature-icon" name="infinite">ion-icon>
          <p class="feature-title">再也不要做饭了!p>
          <p class="feature-text">我们的订阅覆盖全年365天，甚至包括重大节日。 p>
         div>

         <div class="feature">
          <ion-icon class="feature-icon" name="nutrition">ion-icon>
          <p class="feature-title">本地和有机p>
          <p class="feature-text">我们的厨师只使用本地的，新鲜的，有机的产品来准备您的饭菜。p>
         div>

         <div class="feature">
          <ion-icon class="feature-icon" name="leaf">ion-icon>
          <p class="feature-title">绿色环保p>
          <p class="feature-text">我们所有的合作伙伴只使用可重复使用的容器来包装您的所有食物。p>
         div>

         <div class="feature">
          <ion-icon class="feature-icon" name="pause">ion-icon>
          <p class="feature-title">随时暂停p>
          <p class="feature-text">去度假?只要暂停您的订阅，我们将退还未使用的天数。p>
         div>
      div>

● 接着就是添加一些样式了

.feature-icon {
  color: #e67e22;
  height: 2.4rem;
  width: 2.4rem;
  margin-bottom: 3.2rem;

}
.feature-title {
  font-size: 2.4rem;
  color: #333;
  font-weight: 700;
  margin-bottom: 1.6rem;

}
.feature-text {
  font-size: 1.8rem;
  line-height: 2;
}

● 接着我们给这些图标添加一些圆圈之类的

.feature-icon {
  color: #e67e22;
  height: 3.2rem;
  width: 3.2rem;
  background-color: #fdf2e9;
  margin-bottom: 3.2rem;
  padding: 1.6rem;
  border-radius: 50%;

}

● 到这里基本上就完成了，但是我们可以中间再添加一些文字作为两个组件的过渡

 <div class="container grid">
        <aside class="plan-details">
          价格包括所有在内的税费。用户可以随时取消。具体包含一下内容：
        aside>
      div>

● 然后直接设置一下样式

.plan-details {
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
}

● 但是这个间距太大了，我们要来消除间距，这个是我们之间写的参数，就一个margin-bottom