index.html файл не отображает стиль при прямом доступе через браузер

#html #css #visual-studio-code

Вопрос:

Итак, я заметил, когда я хочу проверить свои проекты напрямую, нажав на index.html файл, он просто не будет показывать стиль:

введите описание изображения здесь

Но если я проверю это через VS-код, то он появится

введите описание изображения здесь

Это моя html-голова:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>BMI careers</title>

    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" type="image/png" href="/img/logo.png">

  </head>
  
 

Ответ №1:

Попробуйте убрать первую букву «/» от корней. я имею в виду, что вместо этого:

 <link rel="stylesheet" href="/css/style.css">
 

напиши это:

 <link rel="stylesheet" href="css/style.css">
 

во всех из них.

Ответ №2:

Вы должны сделать пути относительными путями, как это:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>BMI careers</title>
<!-- just add a '.' in front of the path -->

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <link rel="stylesheet" href="./css/style.css">

    <link rel="shortcut icon" type="image/png" href="./img/logo.png">

  </head>
 

Это связано с тем, что / означает корень на вашем компьютере и ./ означает текущую папку, в которой существует этот файл.

Он работает в коде vs, потому что вы запускаете его на локальном сервере, а корень ( » / » ) является корнем сервера, а не корнем вашего компьютера.

Ответ №3:

Попробуйте использовать ./css/style.css и ./css/bootstrap.min.css, а не просто /