Question

我是编程的新手，希望有人可以帮助我解决这个问题。

我有多个页面，希望它们都是不同的颜色。我将所有代码包装在一个类中，然后将其样式设置为：

.tech_page{   
    background-color: #F4C0CC;
}

身体看起来像这样：

 <body>

    <div class="tech_page">

       <div class="nav-bar"> 
           <nav> <a href="/"><p class="nav-home"> Home </a> </nav>
           <nav> <a href='/tech'><p class="nav-tech"> Tech </p></a> </nav> 
           <nav> <a href='/about'><p class="nav-about"> About </p></a> </nav>
           <nav> <a href='/mindmap'><p class="nav-mindmap"> Mind Map </p></a> </nav> 
           <nav> <a href='/projects'><p class="nav-projects"> Projects </p></a> </nav>
        </div>

    </div>

</body>

但是只有导航栏会获得背景颜色！其他所有东西保持白色。如果我在正文上放置一个类，但是页面的整个范围都变成了背景色，但是我认为那不是干净的代码。有人有什么想法吗？

Answer 1

如果您希望所有人都使用class tech_page，则应添加

<body class='tech_page'>

    <div class="projects_page">

       <div class="nav-bar"> 
           <nav> <a href="/"><p class="nav-home"> Home </a> </nav>
           <nav> <a href='/tech'><p class="nav-tech"> Tech </p></a> </nav> 
           <nav> <a href='/about'><p class="nav-about"> About </p></a> </nav>
           <nav> <a href='/mindmap'><p class="nav-mindmap"> Mind Map </p></a> </nav> 
           <nav> <a href='/projects'><p class="nav-projects"> Projects </p></a> </nav>
        </div>

    </div>

</body>

或者您可以使用

body {
    width: 100%;
    height: 100%;
}
.tech_page{   
    background-color: #F4C0CC;
    width: 100%;
    height: 100%;
}

和html

<body>

    <div class="tech_page">

       <div class="nav-bar"> 
           <nav> <a href="/"><p class="nav-home"> Home </a> </nav>
           <nav> <a href='/tech'><p class="nav-tech"> Tech </p></a> </nav> 
           <nav> <a href='/about'><p class="nav-about"> About </p></a> </nav>
           <nav> <a href='/mindmap'><p class="nav-mindmap"> Mind Map </p></a> </nav> 
           <nav> <a href='/projects'><p class="nav-projects"> Projects </p></a> </nav>
        </div>

    </div>

</body>

Answer 2

通过在您的tech_page类中添加height:100vh应该可以解决您的问题。

Answer 3

可以在任何css文件中写入css或在以下样式标签中写入相同的代码，您可以为新创建的页面编写类似的css注意：最佳实践是创建一个css文件并编写css。这里仅是tech_page类背景已更改，如果要更改整个页面背景，则可以为顶级div类的元素css编写css。尝试一下。

<html>
    <head>
    <title></title>
     <style type="text/css">
     .tech_page{   
        background-color: #F4C0CC;
    }
     </style>
    </head>
    <body>

        <div class="tech_page">

           <div class="nav-bar"> 
               <nav> <a href="/tech"><p class="nav-home"> Home </a> </nav>
               <nav> <a href='/tech'><p class="nav-tech"> Tech </p></a> </nav> 
               <nav> <a href='/about'><p class="nav-about"> About </p></a> </nav>
               <nav> <a href='/mindmap'><p class="nav-mindmap"> Mind Map </p></a> </nav> 
               <nav> <a href='/projects'><p class="nav-projects"> Projects </p></a> </nav>
            </div>

        </div>

    </body>
    </html>

背景颜色跨越了我的导航栏的宽度，而不是整个背景

3 个答案: