2026年1月14日 星期三

導覽列

 <!DOCTYPE html>

<html lang="zh-Hant">

<head>

    <meta charset="UTF-8">

    <title>專業導覽列練習</title>

    <style>

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body { font-family: 'Microsoft JhengHei', sans-serif; background-color: #f4f4f4; }

        

        .navbar {

            background-color: #2c3e50;

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 0 50px;

            height: 70px;

            box-shadow: 0 2px 10px rgba(0,0,0,0.1);

        }


        .logo { color: #ecf0f1; font-size: 24px; letter-spacing: 2px; }


        .nav-links { list-style: none; display: flex; }


        .nav-links li { margin-left: 30px; }


        .nav-links a {

            text-decoration: none;

            color: #bdc3c7;

            font-weight: 500;

            transition: 0.3s;

        }


        .nav-links a:hover { color: white; }

    </style>

</head>

<body>


    <nav class="navbar">

        <div class="logo">GEMINI TECH</div>

        <ul class="nav-links">

            <li><a href="#">首頁</a></li>

            <li><a href="#">課程介紹</a></li>

            <li><a href="#">實作案例</a></li>

            <li><a href="#">加入我們</a></li>

        </ul>

    </nav>


    <div style="padding: 50px; text-align: center;">

        <h2>歡迎來到我的專業頁面</h2>

        <p>請嘗試將滑鼠移到上方導覽列看看效果！</p>

    </div>


</body>

</html>

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)