为什么外部样式表css文件在除索引之外的所有页面上都失败？

问题描述 投票：-1回答：1

我正在建立我的第一个多页网站来完成一项大学任务。我在index.html内部构建一些基本的html代码，并使用外部CSS文本文件尝试了一些布局。

我将索引内容复制到所有页面，非常基础的人员，例如颜色，大小等，只是看它是否有效，而且确实有用。

然后，我继续编码以完成作为所有页面基础的索引内容/样式（使用外部文件）>

然后我将索引的内容复制到所有页面。外部CSS文件已正确加载到索引中，但其他页面似乎根本没有CSS代码。

什么可能导致此问题，我该如何解决？ 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">   
        <title>Home</title> 
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <style>
            header{
                background-image: url("media/header_background.jpg");
                background-size: 100%;
            }

        </style>
    </head>
    <body>

        <div id="container">
        <header>
            <h1>Tesla</h1>
            <p>Home</p>
        </header>
        <section class="sec1">
                <div class="leftbox">
                        <p>
                            fdbgnuafdignbfadsongbbordfsgafdojagfdbfxbfxbfdb
                            fdbgnuafdignbfadsongbbordfsgafdojagfdbfxbfxbfdb
                            fdbgnuafdignbfadsongbbordfsgafdojagfdbfxbfxbfdb
                            fdbgnuafdignbfadsongbbordfsgafdojagfdbfxbfxbfdb
                        </p>
                    </div>

                <div class="rightbox">
                        <ul class="menu">
                          <li><a href="index.html">Home</a></li>
                          <li><a href="pages/history.html">History</a></li>
                          <li><a href="pages/news.html">News</a></li>
                          <li><a href="pages/multimedia.html">Multimedia</a></li>
                          <li><a href="pages/aboutme.html">About</a></li>
                      </ul>
                    </div>   
        </section>
        <section class="sec2">
            <p>
                redkvjrejnkgreentraetgardga
                eftbewtradsebtaesrb
                esbrEWBREWBRTEWN5JRTESNTREWJWRNsE
                 WETernbtARE TRETHNR
            </p>
        </section>
        <footer>
                Tesla 2020
            </div>
        </footer>
    </div>
    </body>

    </html>

body {
    background-color: rgb(117, 117, 112);
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

header {
    background-color: black;
    color: white;
    position: relative;
    border: 1px solid black;
    padding: 20px 0 0 40px;
    height: 400px
}

header p{
    position:absolute;
    top: 7px
}

h1 {
    font-size: 5em;
}
footer{
    background-color: rgb(86, 86, 90);
    padding:4px 0 4px 0;
    text-align: center;
    color: rgb(255, 255, 255);
    border: 1px solid black;

}

.sec1{
    display: flex;
}

.leftbox{
    flex:75%;
    padding-left:30px;
}

.rightbox{
    background-color: rgb(77, 79, 80);
    border: 1px solid black;
    background-image: url("media/menu_background.jpg");
    height: 250px;
    width: 200px;
}

a{
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 1.3em;
    text-align: center;
    font-weight: bold;
}

.menu li{
    background-color: rgb(148, 143, 143);
    padding:3px;
    margin: 7px;
    list-style-type: none;
}

ul li::before {
    content: "\2022";  
    color: rgb(255, 255, 255); 
    font-weight: bold; 
    display: inline-block; 
    width: 1em; 
    margin-left: -1em; 
  }

我知道我有很多错误。这是我第二天学习html / css

我正在建立我的第一个多页网站来完成一项大学任务。我在index.html内部构建一些基本的html代码，并使用外部CSS文本文件尝试了一些布局。我将索引内容复制到所有...

html css external stylesheet
1个回答
-1
投票

您可以在本地添加CSS文件：

<link rel="stylesheet" type="text/css" href="PATHTOCSSHERE">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.