CSSm3HTML交互練習

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="navStyle.css">
    
</head>

<body>
    <nav class="navBar">
        <ul>
            <li><a href="<https://www.w3schools.com/html/default.asp>">html</a></li>
            <li><a href="<https://www.w3schools.com/css/default.asp>">CSS</a></li>
            <li><a href="<https://www.w3schools.com/js/default.asp>">JavaScript</a></li>
        </ul>
    </nav>
    <!-- 參照 42_pseudo_class_完成圖.png，建立一組導覽列 -->

    <!-- step1. 加入 <nav>、<ul>、<li> -->
    <!-- step2. 設定點選項目的時候，會對應到 w3schools 的各項連結 -->
    <!-- HTML: <https://www.w3schools.com/html/default.asp> -->
    <!-- CSS: <https://www.w3schools.com/css/default.asp> -->
    <!-- JavaScript: <https://www.w3schools.com/js/default.asp> -->

    <!-- step3. 引用 navStyle.css -->
    <!-- step4. 對照 navStyle.css 設定網頁元素 -->
    
    
    <!-- 補充 : HTML Semantic Elements -->
    <!-- <https://www.w3schools.com/html/html5_semantic_elements.asp> -->
    
</body>

</html>

CSS

.navBar {
    /* 設置導航欄的樣式 */
    list-style-type: none;
    text-align: center;
    background-color: #000000;
}

.navBar li {
    /* 設置導航欄項目的樣式 */
    display: inline-block;
    padding: 20px;
}

.navBar li:hover {
    /* 設置導航欄項目懸停時的背景顏色 */
    background-color: #656565;
}

.navBar li a {
    /* 設置導航欄項目鏈接的樣式 */
    color: white;
    text-align: center;
    text-decoration: none;
}    color: white;
    text-align: center;
    text-decoration: none;
}    color: white;
    text-align: center;
    text-decoration: none;
}