Question

我正在使用Ionic和Angular构建页面。我可以看到顶部的样式表，但是当页面加载时，样式完全混乱，直到我刷新页面。我不确定我做错了什么。提前谢谢。

<link rel="stylesheet" type="text/css" href="css/event-nba.css">

<div ng-repeat="events in eventsList" class="events-bg">
  <a>
    <div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">

      <div class="nba-event-team">
        <span><img class="logos logo-margin" src="{{events.logo1}}"></span>
        <span><img class="logos" src="{{events.logo2}}"></span>
      </div>
      <div class="nba-event-team">
        <span class="team">{{events.eventDate}}</span>
      </div>
      <div class="nba-event-team">
        <span class="team">{{events.eventLocation}}</span>
      </div>
      <div class="nba-event-team">
        <img class="network-logo" src="{{events.networkLogo}}"></img>
      </div>
      <div class="nba-event-team">
        <button class="button button-assertive bth-red">
          TICKETS
        </button>
      </div>

    </div>

    <div class="preview-box">
    <span class="preview-text">{{events.eventPreview}}</span>
    </div>

    <div class="gear-title-box">
    <span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
    </div>

<div class="row">
  <div class="col col-45 card card-margin  home-product-border">
    <a href="#/tab/product-jacket">
      <div class="item item-body">
        <img class="full-image" src="img/nikesweatshirt200.png">
        <p class="shop-product-box-text-margin">
          Clothing
        </p>
        <h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
        </span>
        <span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
        </h3></span>
      </div>
    </a>
  </div>

  <div class="col col-45 card card-margin  home-product-border">
    <a href="#/tab/product">
      <div class="item item-body">
        <img class="full-image" src="img/kobe xi.jpeg">
        <p class="shop-product-box-text-margin">
          Shoes
        </p>
        <h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
        </span>
        <span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
        </h3></span>
      </div>
    </a>
  </div>
</div>
<div class="row">
  <div class="col col-45 card card-margin home-product-border">
    <a href="#/tab/product-uptime">
      <div class="item item-body">
        <img class="full-image" src="img/uptimebottle.png">
        <p class="shop-product-box-text-margin">
          Sport Supplements
        </p>
        <h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
        </span>
          <span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
          </h3></span>
      </div>
    </a>
  </div>

  <div class="col col-45 card card-margin home-product-border">
    <a href="#/tab/product-nba">
      <div class="item item-body">
        <img class="full-image" src="img/lavinjersey.jpeg">
        <p class="shop-product-box-text-margin">
          Clothing
        </p>
        <h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
        </span>
          <span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
          </h3></span>
      </div>
    </a>
  </div>
</div>

</a>

Answer 1

所以我找到了答案。此样式表使用了上一页中的一些类名，并且该样式表对这些类具有不同的css。在加载此页面之前，这些类没有被转储，因此继承了其他样式。

样式表未在Ionic Angular项目中加载

1 个答案: