我的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

這樣可以解決您的問題。

祝您網站運氣佳！