本文連結
請參考上次上課內容「連結點我」
程式碼內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Your Website</title> <style> /* 可以在這裡添加自定義的 CSS 樣式 */ /* 例如,調整標題橫幅的高度、寬度、對齊方式等 */ .banner { width: 100%; height: 200px; /* 調整標題橫幅的高度 */ background-image: url('dragonPig.PNG'); /* 替換 'dragonPig.PNG' 為你的圖片文件名 */ background-size: cover; background-position: center; text-align: center; color: #fff; /* 標題文字顏色 */ font-size: 24px; /* 標題文字大小 */ padding-top: 50px; /* 調整文字與標題橫幅上邊緣的距離 */ } </style> </head> <body> <div class="banner"> <!-- 在這裡添加標題文字或其他內容 --> <h1>Welcome to Your Website</h1> <!-- 如果你希望添加其他元素,例如標題下的按鈕,可以在這裡添加 --> <a href="#about" class="btn">Learn More</a> </div> <!-- 這裡是網站的其他內容,例如導航菜單、主要內容區塊等 --> <nav> <!-- 導航菜單 --> </nav> <section id="about"> <!-- 主要內容區塊 --> </section> </body> </html>
網站結果如下
透過iFrame 嵌入影片
請參考下面程式碼貼入
<iframe width="560" height="315" src="https://www.youtube.com/embed/x8hBGNMH2v8" frameborder="0" allowfullscreen></iframe>