3

我的 CSS 有问题。

在主页上它加载正常，但是当我转到我网站上的链接时，css 无法正确加载。所以基本上下面的代码在 index.html 上可以正常工作，但是当我转到下面指示的任何链接时，它就会出错。

所有链接都有完全相同的代码，所以我不明白为什么它不起作用。

这是我的源代码：

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <LINK href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
            <div id ="leftcol">
                <a href="content/practice.html"><div class ="left-column-item">Practice!</div></a>
                <a href="content/AboutUs.html"><div class ="left-column-item">About Us!</div></a>
                <a href="content/contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
            </div>
        <div id="left-placeholder"></div>
        <div id ="left-pusher"></div>
        <div id ="content">Math Practice Site <br> hello</div>
    </body>
</html>

//the css file:

/* 
    Document   : styles
    Created on : Nov 2, 2012, 11:50:48 PM
    Author     : me
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
#leftcol a{text-decoration: none;}
#leftcol{   
    left: 10%;
    width: 200px;
    height: 100%;
    margin-top: 0px;
    position: absolute;
    opacity:0.6;
    color: white;
    font-size: 2em;
}
#left-placeholder{
    height: 100%;
    width: 10%;
    float: left;
}
#left-pusher{
    height: 100%;
    width: 200px;
    float: left;
}
.left-column-item{
    background: url('images/bgnav.jpg');
    height: 33.334%;
    background-size: 100%;
    opacity:0.6;
    color: white;
}
.left-column-item:hover{
    background: url('images/bgnav.jpg');
    height: 33.334%;
    background-size: 100%;
    opacity: 1;
}
#content{
    text-align: center;
    color: white;
    font-size: 5em;
    height: 100%;
    width: 70%;
    float:left;
}

body{
    background: url('images/background.jpg');
    background-size: 100%;
    margin: 0;
    min-height: 100%;
    width: 100%}
html, body
{
    height: 100%;
}

这是我的练习页面：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <LINK href="../styles.css" rel="stylesheet" type="text/css">
        <script type ="text/javascript">

        </script>
    </head>
    <body>
            <div id ="leftcol">
                <a href="practice.html"><div class ="left-column-item">Practice!</div></a>
                <a href="aboutUs.html"><div class ="left-column-item">About Us!</div></a>
                <a href="contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
            </div>
        <div id="left-placeholder"></div>
        <div id ="left-pusher"></div>
        <div id ="content">Practice!</div>
    </body>
</html>
4

5 回答 5

1

您的 css 文件未使用绝对路径。如果您的链接在您网站的子文件夹中，则 css 路径不再正确。

因此，假设您的 css 文件位于站点的根目录，将 HTML 更改为以下内容：

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

那应该可以解决问题。

编辑 我知道你说一切都很好，但是你正在使用你的 CSS 的相对路径，所以你很可能有 2 个版本的 css 文件 - 一个是正确的，另一个不完全相同，这可以解释对于“错误加载”css文件。您可以通过使用基于根路径的正确 css 文件位置来完全消除这种可能性。如果有的话，我至少会从那里开始控制局势。如果仍然存在问题，那么您至少可以知道您已经消除了这种可能性 - 并且考虑到这里的大多数答案都指向同一个问题，我不得不说这是最有可能的罪魁祸首。

此外，您的练习页面使用

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

因此，除非您的练习页面位于帖子第一页的子文件夹中，否则这两个页面不会使用相同的 css 文件。

于 2012-11-03T15:05:34.647 回答
0

最可能的原因是您没有在 HTML<link>标记中使用相对路径。

因此，当您的 HTML 代码被调用以响应单击您的链接时，我希望它会将您带到另一个目录并且它不再能够找到您的 css。

使用 ../ 表示法指定相对路径。这意味着浏览器从您现在所在的位置向下查看一个目录级别，以找到在 ../ 之后指定的文件和目录组合

例如考虑以下结构：

root
  _public
     _admin
         myTest.html
     _css
         myTestStyles.css

myTest.html 中的链接语句将是

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

笔记

../../ 表示开始往下看 2 个级别等。

于 2012-11-03T15:36:08.083 回答
0

你的路径是错误的。因为index.html它在根目录中查找 css。当您转到 时content/，它会在content/.

使用绝对路径，或../styles.css用于第一级子目录中的那些文件。

于 2012-11-03T15:06:36.443 回答
0

这是一个简单的错误。当您单击链接时，它基本上会进入“内容”文件夹并打开其中一个 html 文件，但您的 css 文件位于根文件夹中。因此，在内容文件夹中，您需要更改每个文件的 css 路径。

所以，去内容文件夹

代替

 styles.css

和

 ../styles.css
于 2012-11-03T15:09:40.177 回答
0

css 未加载的原因是浏览器无法从content/您的 html 所在的文件夹中找到它。

您可以在子文件夹中的 html 文件中使用相对路径，如下所示

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

您还可以定义base href所有链接引用的位置。这可能会导致其他链接的行为有所不同，因此如果需要，请修复它们

<head>
<base href="http://www.myawesomesite.com/">
</head>
<LINK href="styles.css" rel="stylesheet" type="text/css">

设置基本 href 后，无论您的 html 文件在哪里，浏览器都会始终将该链接指向 www.myawesomesite.com/styles.css。

于 2012-11-03T15:11:48.887 回答