Question

我刚开始使用HTML和PHP，却遇到了以下问题：
使用PHP命令时，网页显示错误的颜色！
使用PHP命令（<?php phpinfo( ); ?>）
没有PHP命令：
很明显，导航栏元素会根据命令更改颜色，但是为什么呢？
无论如何我都无法解决此问题。这是我的其他代码：
PHP源文件：

    <!DOCTYPE HTML>
    <html>
    <head>
        <title>PHP-Info</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
    </head>
    <body>
        <ul class="navbar">
            <li class="navbar"><a class="navbar" href="index.php">Home</a></li>
            <div style="float: right;">
                <li class="navbar"><a class="navbar" href="">Server-Info</a></li>
                <li class="navbar"><a class="navbar active" href="phpinfo.php">PHP-Info</a></li>
            </div>
        </ul>
        <div>
            <?php phpinfo( ); ?>
        </div>
    </body>
    </html>

样式表：

* {
margin: 0;
  padding: 0;
  font-family: Tahoma, sans-serif;
  font-size: 100%;
}
body {
    margin-top: 55px;
}
ul.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5.4%;
  list-style-type: none;
  overflow: hidden;
  background-color: rgba(33, 33, 33, 0.35);
}
li.navbar {
  float: left;
}
li a.navbar {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover.navbar {
    border-bottom: 4px solid dodgerblue;
}
li a.active.navbar {
  background-color: #666666;
  border-bottom: 4px solid #666666;
}

Answer 1

在您的CSS样式表中，我看到您在上课之前有:hover和:active。尝试像这样切换它们：

li a.navbar:hover {
    border-bottom: 4px solid DodgerBlue;
}
li a.navbar:active {
  background-color: #666666;
  border-bottom: 4px solid #666666;
}

编辑：加上您在.之前有句号:而不是冒号active。将颜色名称大写也是一个好主意。 DodgerBlue，而不是dodgerblue。一些浏览器对此要求严格。

PHP在导航栏中更改颜色

1 个答案: