Question

我正在尝试设置通用导航栏。我使用include将menu.php导入index.php。当我这样做，它工作正常;但是，当我在menu.php包含后添加内容时，会继续使用菜单的CSS规则。

的index.php

<!DOCTYPE HTML>
<html>
<head>
    <link rel=stylesheet href="css/style.css" />
    <title>Home | Website</title>
</head>
<body>
    <?php include 'menu.php'; ?>
    <p>Test</p>
</body>
</html>

menu.php

<head>
    <title>Menu | Website</title>
    <style>
        // menu-only styles...
    </style>
</head>
<body>
    <a href="/">Home</a>
</body>
<?php return; ?>

Answer 1

您实际上是在HTML页面中包含HTML页面。

要让CSS仅定位您的菜单，请将其保存在style.css文件中，但要使div具有“菜单”类。

我相信，像这样的事情应该做你正在寻找的事情。

的index.html

<!DOCTYPE HTML>
<html>
<head>
  <link rel=stylesheet href="css/style.css" />
  <title>Dare Network | Home</title>
</head>
<body>
  <?php include 'menu.php'; ?>
  <p>Test</p>
</body>
</html>

的style.css

html,body {
  padding: 0;
  margin: 0;
  background-color: #777777;
}

.menu {
  /* padding: top&&bottom left&&right; */
  padding:10px 0;
  background-color: #7786ff;
  text-align: center;
}

.menu a {
  /* merge transitions into one line to make both functional */
  transition: background-color .25s ease-in-out, padding-bottom .25s ease-in-out;
  background-color: #b20000;
  color: #ffffff;
  text-decoration: none;
  /* padding:top right bottom left */
  padding:10px 10px 5px 10px;
}

.menu a:hover {
  background-color: #cc0000;
  padding-bottom: 10px;
}

menu.php

<div class="menu">
  <a href="/">Home</a>
</div>

Answer 2

这不是PHP问题

您在menu.php中的CSS后来在DOM中比实际样式表更新，因此被覆盖。将menu.php样式与一些包含元素进行定位，或者将您的菜单CSS代码放在DOM的前面（如在style.css之前）

Answer 3

您几乎更接近您的代码。 HTML页面只能有一个html，head，title，body标签。

从menu.php中删除这些html，head，title，body标签

的index.html

<!DOCTYPE HTML>
<html>
  <head>
     <link rel=stylesheet href="css/style.css" />
     <title>Dare Network | Home</title>
  </head>
  <body>
    <?php include 'menu.php'; ?>
    <p>Test
  </body>
</html>

的style.css

html,body {
    padding: 0;
    margin: 0;
    background-color: #777777;
}

menu.php

<style>
    body {
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #7786ff;
        text-align: center;
    }

    a {
        transition: background-color .25s ease-in-out;
        transition: padding-bottom .25s ease-in-out;
        background-color: #b20000;
        color: #ffffff;
        text-decoration: none;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
    }

    a:hover {
        background-color: #cc0000;
        padding-bottom: 10px;
    }

</style>

<a href="/">Home</a>

<?php return; ?>

'include'不包含样式

3 个答案: