使用 css 设置动态菜单的样式答案

【问题标题】：Using css for styling a dynamic menu使用 css 设置动态菜单的样式
【发布时间】：2019-10-11 06:16:34
【问题描述】：

我有这个使用 php 的动态菜单的代码：

menu.php:

<?php
    // Get current page file name
    $page = basename($_SERVER["PHP_SELF"]);
?>
<?php include "templates/header.php"; ?>
<?php include "templates/footer.php"; ?>

模板/header.php：

    <h1>A Library</h1>
<div id="navigation">
    <ul>
        <li><a href="index.php" <?php if ($page == "index.php") echo 'class="current"' ?>>Products</a></li>
        <li><a href="resume.php" <?php if ($page == "resume.php") echo 'class="current"' ?>>Resume</a></li>
        <li><a href="photography.php" <?php if ($page == "photography.php") echo 'class="current"' ?>>Photography</a></li>
        <li><a href="about.php" <?php if ($page == "about.php") echo 'class="current"' ?>>About</a></li>
        <li><a href="contact.php" <?php if ($page == "contact.php") echo 'class="current"' ?>>Contact</a></li>
    </ul>
</div>
 </body>
</html>

模板/页脚.php：

</body>
</html>

menu.php 和文件模板在同一目录中

这段代码创建了一个简单而小尺寸的菜单。我怎样才能使用 css 使它更好一点？

我写了这段 css 代码，但我不知道如何将它与菜单联系起来：

#navigation ul li a.current {
    background-color: #FFF;
    border-bottom: 1px solid #FFF;
}

【问题讨论】：

https://www.w3schools.com/css/css_howto.asp 应该会有所帮助。
您将其包含在 CSS 文件或 <style> 标记中。有什么问题？
Apply CSS Style to child elements的可能重复

标签： php html css

【解决方案1】：

你应该使用<link>标签来包含带有html / php的css文件

<head>
<link rel='stylesheet' type='text/css' href='CSS/main.css'>
</head>

【讨论】：

很抱歉投了反对票，但您不能将链接放在样式中。样式标签内的任何内容都必须是文字 css
对不起，应该是头。

【解决方案2】：

有多种方法可以包含 CSS，在您的情况下，最简单的方法是创建一个让我们说 style.css 并将其包含在标签内的主模板中：<link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'> 这样它将动态影响您的所有包括 CSS，它应该为可互换的组件锁定类。示例：

<html>
    <head>
        ... other meta tags
        <link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'>
    </head>
    <body>
        your php includes for content
    </body>
 </html>

【讨论】：

那么，这是在标题还是菜单文件中？
这将超出您的标题和菜单（除非您的 <head> 标记在您的 header.php 中。我已经用正确的结构更新了我的答案
我按照你说的做了，但它仍然无法工作。在 chrome 中转到开发选项后，它为 css 文件选择了这个路径：localhost/php-beginner-crud-level-1/css/style.css 但是没有 localhost 文件夹。如果我使用整个路径而不是 css/style.css 它仍然将 localhost 放在前面。关于如何解决这个问题的任何想法？
嗨，localhost 不是一个目录，它是您的主机名（在真实环境中 ir 将是 www.some_domain.com 但在您的本地计算机上它只是引用自身（通常是您正在运行的网络服务器在端口 80)。您的实际路径似乎是 php-beginner-crud-level-1/css/style.css，它必须与您的 index.php 文件相关。