我的CSS样式表中只有一个起作用，而DIV背景图像不起作用？

Question

第一次编写我自己的网站，然后第一次上传。 基本上是第一次。 是的，我有多个CSS样式表，我的某些页面具有不同的布局。

我的网站可以在本地驱动器上正常运行，但是当我通过FileZilla将其上传到Host Gator时，它当然会崩溃。 我确保我对链接/目录/图像等保持区分大小写。

我相信只是索引页面上的DIV背景图像无法正确加载，然后CSS样式表未应用于我的网站的其余部分，但仍可用于主页。 我确认您直接输入网址时可以访问这些图片。

我不知道为什么只有一个css样式表可以工作，而其余的都不可以，为什么我的DIV背景图像无法正确加载。 任何建议都将不胜感激，我只希望我的网站最终上线！

随时查看：www.alanphunt.com，让我知道您的想法。 我只上了一学期的Web开发入门课程，所以轻松一点吧！

Answer 1

最可能的问题是相对和绝对路径使用情况。 检查是否可以从页面的源代码中打开给定的CSS。 如果不能，则表示您的浏览器也无法执行。 如果可以，则应加载CSS。

Answer 2

毫无疑问，这是将CSS连接到HTML或路径的问题。 您应该仔细检查代码中的每个路径，有时我会粘贴一些东西而忘记更改路径，请加以注意。

Answer 3

正如其他答案所述，问题是相对路径。

路径的一般规则

• images / image.jpg （无斜杠）-从当前文件的位置开始
• /images/image.jpg-从站点根目录开始，无论当前文件位于何处。 根目录是您仅输入域名时Web服务器查找的目录。 在Hostgator上，这称为public_html（对于您的主域；如果您有多个域或子域，它可能会稍微复杂一些。）其他常用名称是www或htdocs。
• ../images/image.jpg-从当前文件开始上一层。 您也可以执行../../images/image.jpg来启动两个级别，依此类推。 （但是，如果您发现自己升了五个或六个级别，则可能是一个应该从根开始的迹象。）
• http://example.com/images/image.jpg-在此确切网址下查找图像。 也可以使用无协议的网址，例如//example.com/images/image.jpg

关于您的特定问题：在主页上，背景图像images/alan.jpg和images/seemennt.jpg在images/seemennt.jpg中设置。 因为路径不是以正斜杠开头，所以它们将尝试相对于样式表的位置（在本例中为“ css”文件夹）进行加载。 （您可以在浏览器中按F12键，然后在控制台上进行确认。这也将有助于准确诊断未加载的内容。）

尝试将路径更改为../images/alan.jpg ，它应该可以工作。

资料来源

• https://css-tricks.com/quick-reminder-about-file-paths/
• https://phpdelusions.net/articles/paths （以PHP为重点，但具有一些一般有用的信息）

Answer 4

您在使用Google Chrome吗？ 如果是，请前往：

1. 主页
2. 右键点击
3. 查看页面源代码

在这里，您将能够查看浏览器用来显示网站的输出HTML。

浏览完首页的源代码后，我可以看到以下URL，用于您的样式表：

css/indexcss.css?v=version2

我选择了该URL，它调出了样式表。 然后，我签出了其他页面的源代码（“摄影”，“音乐”，“ DJ Life”和“ Reach Out”），然后可以看到您的样式表输入错误。 您需要执行以下更改：

• photography.css到css/photography.css
• musiccss.css到css/musiccss.css
• djcss.css到css/djcss.css
• reachoutcss.css到css/reachoutcss.css

这样可以解决您的问题。

祝您网站运气佳！