Javascript 未在项目中加载样式表

我正在使用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>

---

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

不幸的是，这不起作用。请显示index.html代码确保您的html全部有效。我看到

标签包装了大部分内容，甚至可能没有在正确的位置关闭。它还将

放在

内部，而

不是valid@charlietfl我认为这与

ng style

解析问题有关。控制台中的错误是404个关于找不到图像的错误，但是刷新后，它们都消失了。