私はCSSでスタイリングのPHPに関する質問があります。下のコードでは、ページ上部のナビゲーションバーに、選択したページが表示されます。下のコードではレイアウトを好む方法ですが、PHPコードでは動作しません。それはatmで動作していますが、リンクカラーのテキストに過ぎません。私はそれがforeachループにあるので、2番目のコードのようなリストを作ることはできません。HTMLのリストを取得するためのCSSのスタイルPHPコード
どうすればいいのですか?
ありがとうございます!
<head>
<title>Website</title>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<?php
// This is your menu
$items = array("pagina1", "pagina2", "pagina3", "pagina4");
foreach ($items as $item)
{
if (isset($_GET['page']) && $_GET['page'] == $item)
{
echo '<a href="?page=' . $item . '" class="active"> ' . $item . '</a>';
$activePage = $item . ".php";
}
else
{
echo '<a href="?page=' . $item . '"> ' . $item . '</a>';
}
}
// Include your page
if (isset($activePage))
{
include $activePage;
}
else
{
include "pagina1.php";
}
?>
</body>
-
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background- color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>