如何在 ionic 2 中的标题和离子卡之间添加一些颜色的空格？答案

【问题标题】：How to add a blank space between header and a ion-card in ionic 2 with some color?如何在 ionic 2 中的标题和离子卡之间添加一些颜色的空格？
【发布时间】：2018-08-15 04:19:03
【问题描述】：

我想在标题和第一张卡片开始之间添加一个灰色空间。并且想要删除屏幕上卡片顶部区域的突出显示线，我已经提到了它提供的屏幕截图。

.html

<ion-header>

  <ion-toolbar>
    <img>
    <ion-title>Ion Cards</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>

  <ion-card>

  <ion-item>
    <ion-avatar item-start>
      <img src="img/marty-avatar.png">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <img src="img/advance-card-bttf.png">

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>

  <ion-row>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>12 Likes</div>
      </button>
    </ion-col>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
        <div>4 Comments</div>
      </button>
    </ion-col>
    <ion-col center text-center>
      <ion-note>
        11h ago
      </ion-note>
    </ion-col>
  </ion-row>

</ion-card>

</ion-content>

enter image description here

【问题讨论】：

标签： html css ionic-framework ionic2 ionic3

【解决方案1】：

在标题中添加底部边框。

ion-header {
border-bottom: 10px solid gray;
}

【讨论】：

【解决方案2】：

在离子中具有背景白色您可以在

中更改背景

<ion-header>

  <ion-toolbar>
    <img>
    <ion-title>Ion Cards</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content style="background:lightgray;">

  <ion-card>

  <ion-item>
    <ion-avatar item-start>
      <img src="img/marty-avatar.png">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <img src="img/advance-card-bttf.png">

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>

  <ion-row>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>12 Likes</div>
      </button>
    </ion-col>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
        <div>4 Comments</div>
      </button>
    </ion-col>
    <ion-col center text-center>
      <ion-note>
        11h ago
      </ion-note>
    </ion-col>
  </ion-row>

</ion-card>

</ion-content>

【讨论】：

【解决方案3】：

并更改标题

<ion-header style="border-bottom: 5px solid gray;">
  <ion-toolbar>
    <img>
    <ion-title>Ion Cards</ion-title>
  </ion-toolbar>
</ion-header>

【讨论】：