CSS 文件只是運行部分代碼

Question

我正在建立一個網站，但我的 HTML 和 CSS 正在竊聽。 當我通過 Github 頁面或本地文件加載我的網站時，我可以看到我的 HTML 並且一切正常。 問題是，我的 CSS 只有一部分正在加載。

在我的網站中，我制作了一個側邊欄，當我通過本地文件對其進行測試時，它運行良好。 昨天我打開 Notepad++（我無法在這台電腦上安裝 VSCode）並打開我的網站來測試什么尺寸的字體是最好的。

當我打開它時，有些 CSS 不起作用。 我的背景圖片不見了，我的側邊欄被移到了我的文本下方，它也擴大了整個屏幕。 我的所有顏色也從我的側邊欄中刪除。 我用 github 頁面嘗試了這個，但它也被他們的竊聽。

我的一些 CSS 仍在工作，但大約一半不工作。 我制作了一個新的 CSS 和 HTML 文檔並復制了所有代碼，更改了鏈接，但仍然存在問題。


<html> 
<head>
<link rel="stylesheet" href="GithubTestCSS.css">
        
    <h1 style="text-align:center; color: #fff; font-size: 40px;  font-family: Comic Sans MS; margin-left: 425px; "> Text <h1>
        <div class="main-text">
            <p> text</p>
            <p> text</p>
            <p> text </p>
            <p> text </p>
            <p> text </p>
        
        </div>

</head>
<body>

  <header class="header" role="banner">
  
  <div class="logo">
    <a href="#">Home</a>
  </div>
  
  <div class="nav-wrap">
    <nav class="main-nav" role="navigation">
    
      <ul class="unstyled list-hover-slide">
      
        <li><a href="#">Poems</a></li>
        <li><a href="#">Collages</a></li>
        <li><a href="#">Art</a></li>
        <li><a href="#">Infographics</a></li>
        
      </ul>
      
    </nav>
   </div>
   
</head>
</body>
</html>

  
  .bg-text {
  position: center;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.6); /* Black w/ slight opacity see-through */
  color: white;
  font-weight: bold;
  font-size: 28px;
  border: 5px solid #f1f1f1; 
  position: fixed;
  margin-right: 50px;
  margin-top: 50px;
  margin-bottom: 20px;
  padding: 5px; 
}
 
  
  
  
  
  .unstyled a {
    text-decoration: none;
  }
  
  .list-inline {
    overflow: hidden;
  }
  .list-inline li {
    float: left;
  }
  
  
  .logo {
    font: 100 1em "Source Sans Pro", Helvetica, Arial, sans-serif;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  
  /* The logo (top of sidebar*/
  
  .logo a {
    display: block;
    padding: 1em 0;
    color: #03A062;
    text-decoration: none;
    transition: .75s linear color;
  }
  
  
  /* The sidebar */
  
  .main-nav ul {
    border-top: solid 1px #3C3735;
  }
  .main-nav li {
    border-bottom: solid 1px #3C3735;
  }
  .main-nav a {
    padding: 1.1em 0;
    color: #03A062;
    font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
    text-align: center;
  }
  .main-nav a:hover {
    color: #03A062;
  }
  
  
  .list-hover-slide li {
    position: relative;
    overflow: hidden; 
  }
  .list-hover-slide a {
    display: block;
    position: relative;
    z-index: 1;
    transition: .75s ease color;
  }
  .list-hover-slide a:before {
    content: '';
    display: block;
    z-index: -1;
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: solid 5px #03A062;
    background: #3C3735;
    transition: .75s ease left;
  }
  .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
    left: 0;
  } 
  .testing-text{
      text-align: center;
      color: #fff;
  }

Answer 1

首先你不能像 header 那樣把 HTML 放進去。 把它全部放在<body>標記中。
您沒有關閉<h1>標記。
您沒有關閉<header>標記。
然后你在底部的 html 中有錯誤：“ </head></body></html> ”..你已經關閉了頭部。

所以它會是這樣的：

<html>
<head>
    <link rel="stylesheet" href="GithubTestCSS.css">
</head>
<body>

    <h1 style="text-align:center; color: #fff; font-size: 40px;  font-family: Comic Sans MS; margin-left: 425px; "> Text </h1>
    <div class="main-text">
        <p> text</p>
        <p> text</p>
        <p> text </p>
        <p> text </p>
        <p> text </p>

    </div>
    <header class="header" role="banner">
        <div class="logo">
            <a href="#">Home</a>
        </div>

        <div class="nav-wrap">
            <nav class="main-nav" role="navigation">

                <ul class="unstyled list-hover-slide">
                    <li><a href="#">Poems</a></li>
                    <li><a href="#">Collages</a></li>
                    <li><a href="#">Art</a></li>
                    <li><a href="#">Infographics</a></li>
                </ul>
            </nav>
        </div>
    </header>

</body>
</html>

Answer 2

還有一些其他的東西，例如Comic Sans Serif 周圍沒有引號。

 <html> <head> <link rel="stylesheet" href="GithubTestCSS.css"> <title></title> </head> <body> <h1 style="text-align: center; color: #fff; font-size: 40px; font-family: 'Comic Sans MS'; margin-left: 425px;"> Text </h1> <div class="main-text"> <p> text </p> <p> text </p> <p> text </p> <p> text </p> <p> text </p> </div> <header class="header" role="banner"> <div class="logo"> <a href="#">Home</a> </div> <div class="nav-wrap"> <nav class="main-nav" role="navigation"> <ul class="unstyled list-hover-slide"> <li><a href="#">Poems</a></li> <li><a href="#">Collages</a></li> <li><a href="#">Art</a></li> <li><a href="#">Infographics</a></li> </ul> </nav> </div> </header> </body> </html>

CSS 文件只是運行部分代碼

問題描述

2 個解決方案

解決方案1
1 2022-01-21 18:37:39

解決方案2
0 2022-01-31 23:38:40

CSS 文件只是運行部分代碼

問題描述

2 個解決方案

解決方案1 1 2022-01-21 18:37:39

解決方案2 0 2022-01-31 23:38:40

解決方案1
1 2022-01-21 18:37:39

解決方案2
0 2022-01-31 23:38:40