Question

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

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

Answer 1

在标题中添加底部边框。

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

Answer 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>

Answer 3

并更改标题

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

如何在头部和离子2中的离子卡之间添加一些颜色的空白？

3 个答案: