链接到HTML页面时，CSS不适用

Question

我有这个网页（index.html）：

当我点击第一张图片时，管理指南。我想让它到我的第二页（guide.html） - 它有自己的CSS文件。我是这样做的：<a href="guide.html"><img src="managemant-guides.jpg" /></a>

当我单独加载时，第二个看起来像这样：

然而，当我点击链接时它看起来像这样：

要使它看起来我应该刷新页面。

这是index.html的标题

        <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

     

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">      
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></script>       
     <link href="css/thumbnail-gallery.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>     
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>      
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

    <script src="js/jquery.fullscreen-popup.js"></script>

这是guide.html的一个：

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

 <link rel="stylesheet" type="text/css" href="styles.css">

我想我可以制作一个刷新脚本来运行onLoad，但我想知道为什么会这样。

Answer 1

你可以谷歌搜索“动态加载css”，但最好的办法是只有一个css来整个网站的样式。然后，当您动态加载页面时，已为其设置样式。这将为您的网站带来更好的表现。