HTML Navbar

html navbar

qazaq54321 2022-12-06 10:51:48 ‧ 828 瀏覽

分享至

我想讓我的導覽列變得像鳥哥的網站

目前在哪個標籤，那個標籤就會有特殊樣式，但我嘗試用active，他只會在我點著的時候有變色

這是指著的時候

這是按著的時候

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style>
    .flex-nav {
        display: flex;
        justify-content: space-around;
    }

    nav ul {
        background-color: white;
        list-style: none; /* 移除項目符號 */
        margin: 0;
        padding: 0;
    }

    nav a {
        color: inherit; /* 移除超連結顏色 */
        display: block; /* 讓 <a> 填滿 <li> */
        font-size: 25px;
        padding: 10px;
        text-decoration: none; /* 移除超連結底線 */
    }

    nav a:hover {
        background-color: rgb(76,255, 0);
        color: white;
    }

    nav ul li a:active {
        background: gray;
        color: white;
    }
</style>
<body style="font-family: Microsoft JhengHei;">
    <nav>
        <ul class="flex-nav">
            <li><a href="#">ABC</a></li>
            <li><a href="#">DEF</a></li>
        </ul>
    </nav>

    <table style="margin: 40px;" bgcolor="white">
            <td>
                <div style="border: 5px; border-style: outset; width: 200px; height: 350px; position: relative; ">
                    <div>
                        <img src="#" style="display: block; margin: auto; width: 200px; height: 130px;">
                    </div>
                    <br>
                    <div>
                        <p style="text-align:center">AAA</p>
                        <p style="text-align:center">Hello World!</p>
                    </div>
                    <div style="position: absolute; left: 0; bottom: 0; width: 100px; height: 20px;">
                        <a href="測試程式碼用2.html">點我進入介紹</a>
                    </div>
                </div>
            </td>
    </table>
</body>
</html>

懇請大大授教