這個影片說明如何用Copilot來完成網頁，包括圖片的插入，輕鬆快速！

影片完成的程式如下：

<html>
<head>
<style>
  /* 這裡是 CSS 的部分，你可以修改它來改變網頁的外觀 */
  body {
    font-family: Arial, sans-serif;
    background-color: #d6fdcc;
  }
  h1 {
    text-align: center;
    color: #333;
    margin:20px;
  }
  select {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 40px;
    font-size: 20px;
  }
  img {
    display: block;
    margin: 20px auto;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  p {
    text-align: center;
    font-size: 18px;
    color: #666;
  }
</style>
</head>
<body>
<h1>選擇一種網頁技術</h1>
<select id="tech">
  <option value="">請選擇</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>
<img id="img" src="https://th.bing.com/th/id/OIG.OqBfWdZgaxYtLzbpZZs1?pid=ImgGn" alt="">
<p id="desc"></p>
<script>
  // 這裡是 JavaScript 的部分，你可以修改它來改變網頁的行為
  // 獲取網頁元素的參考
  var tech = document.getElementById("tech");
  var img = document.getElementById("img");
  var desc = document.getElementById("desc");
  // 定義一個函數，根據選擇的選項，顯示相應的圖片和介紹
  function showInfo() {
    // 獲取選擇的選項的值
    var value = tech.value;
    // 根據不同的值，設定圖片的來源和介紹的文字
    if (value == "html") {
      img.src = "https://th.bing.com/th/id/OIG.S_Fu_0m11gNudD1z4zij?pid=ImgGn"; // 這裡你可以用自己的圖片
      desc.innerHTML = "HTML 是超文本標記語言，它是網頁的基礎，用來定義網頁的結構和內容。";
    } else if (value == "css") {
      img.src = "https://th.bing.com/th/id/OIG.OqBfWdZgaxYtLzbpZZs1?pid=ImgGn"; // 這裡你可以用自己的圖片
      desc.innerHTML = "CSS 是層疊樣式表，它是網頁的裝飾，用來定義網頁的外觀和佈局。";
    } else if (value == "js") {
      img.src = "https://th.bing.com/th/id/OIG.cZLxOv3PTpUNabh6OEwu?pid=ImgGn"; // 這裡你可以用自己的圖片
      desc.innerHTML = "JavaScript 是一種腳本語言，它是網頁的靈魂，用來定義網頁的行為和互動。";
    } else {
      img.src = "";
      desc.innerHTML = "";
    }
  }
  // 為選擇框添加一個事件監聽器，當選擇發生變化時，調用函數
  tech.addEventListener("change", showInfo);
</script>
</body>
</html>

發表迴響