为什么我的 CSS 不能在索引以外的其他页面上工作？答案

【问题标题】：Why won't my CSS work on other pages besides the index?为什么我的 CSS 不能在索引以外的其他页面上工作？
【发布时间】：2020-05-16 21:54:26
【问题描述】：

我现在正在 Adobe Dreamweaver 中开发一个简单的文本和选项按钮游戏。索引是故事的第一部分，我在顶部链接了我的外部 CSS 文件，它在屏幕左侧设置文本，在右侧设置图像和选项按钮，同时，你知道，设置样式.这些按钮链接到分叉的“路径”文件（路径 1、路径 2 等），这些文件在样式上与索引完全相同，但在故事文本和选项文本方面有所不同。在我的索引页面上，CSS 可以工作，但每当我预览不同的路径页面时，它都不会出现。奇怪的是，我从字面上将 CSS 文件的链接从我的索引页面复制并粘贴到我的 path1 和 path2 文件中。

起初我以为这可能是因为我在 path1 文件上使用了 Dreamweaver 模板功能，所以我在没有使用模板的情况下创建了 path2 以查看是否是问题所在，但这并没有解决任何问题。 path1 和 path2 都没有出现 CSS。

这是我现在的代码：

<title>Path 2</title>
<link rel="stylesheet" href="stylesheets/mpStyles.css">
<link rel="stylesheet" href="https://use.typekit.net/kxy7nko.css">
<script type="text/javascript" src="mpScripts.js"></script>
</head>

<body>
    <main>
        <section class="leftsection">
            <article> 
                <div class="story-section">
                    <p>New text </p>
                </div>
            </article>
        </section>
        <section class="rightsection">
            <article>
    <!--- etc etc -->

（这里是index.htmlvvv）

<title>Midnight Project</title>
<link rel="stylesheet" href="mpStyles.css">
<link rel="stylesheet" href="https://use.typekit.net/kxy7nko.css">
<script type="text/javascript" src="mpScripts.js"></script>
</head>

<body>
    <main>
        <section class="leftsection">
            <article> 
                <div class="story-section">
                    <p>The place looks no more abandoned than the rest of the city. You know you're taking a risk by going another night without a roof over your head, so... </p>
                </div>
            </article>
        </section>
        <section class="rightsection">
            <article>
<!--- etc, etc -->

我看到一个与此类似的问题，建议输入这样的路径：(link rel="stylesheet" href="/stylesheets/mpStyles.css") 但这也不起作用。我大约四个月前才开始使用 HTML，所以请耐心等待。我想念的东西可能非常明显。

【问题讨论】：

那么 Index.html 的 css 加载了吗？其他 html 页面是否在不同的文件夹中？

标签： html css dreamweaver dreamweaver-templates

【解决方案1】：

更改对 CSS 文件的引用以包含前面的正斜杠：

<link rel="stylesheet" href="/stylesheets/mpStyles.css">

如果这不起作用，这表明您的根目录设置为不同于预期的文件夹。

如果您将上面的链接更新为下面的链接，这是否有效？显然将 project-name 替换为您的项目文件夹的名称。

<link rel="stylesheet" href="/project-name/stylesheets/mpStyles.css">

【讨论】：