使用CSS设置动态菜单的样式

Question

我有此代码用于使用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>

模板/ footer.php：

</body>
</html>

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

这段代码创建了一个简单而小巧的菜单。如何使用CSS使它更好一点？

我写了这个CSS代码，但我不知道如何将其与菜单连接：

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

Answer 1

包含CSS的方法有多种，在您的情况下，最简单的方法是创建一个let声明的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>

Answer 2

您应该使用<link>标记在html / php包含CSS文件

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

使用CSS设置动态菜单的样式

问题描述

2 个解决方案

解决方案1
1 2019-05-24 16:18:07

解决方案2
0 2019-05-24 16:16:12

使用CSS设置动态菜单的样式

问题描述

2 个解决方案

解决方案1 1 2019-05-24 16:18:07

解决方案2 0 2019-05-24 16:16:12

解决方案1
1 2019-05-24 16:18:07

解决方案2
0 2019-05-24 16:16:12