首頁製作方式
以下開始介紹每行程式碼的運作內容
這行聲明標籤表示這是一個 HTML 文件。
---
```
<!DOCTYPE html>
```
---
開始 HTML 文件的根元素。
---
```
<html>
```
---
`<head> `元素包含了文件的元資料，例如字符編碼和標題（在瀏覽器標籤上顯示）。
---
```
<head>
<meta charset="UTF-8">
<title>Page 2</title>
```
---
`<style> `標籤內的內嵌 CSS 代碼用於定義網頁的樣式。
---
```
<style>
```
---
這段 CSS 代碼樣式化了 <body> 元素，設置了頁面的背景為一個漸變色背景。background 屬性使用了 linear-gradient 函數來指定漸變的角度和顏色。
---
```
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #ffc107, #17a2b8, #dc3545);
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite;
}
```
---
這段 CSS 代碼樣式化了 .image-container 類別，設置了包含圖片的容器的樣式。它使用了 Flexbox 佈局，使圖片在容器中水平和垂直居中。
---
```
.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
}
```
---
這段 CSS 代碼樣式化了 .image-container 內的 <img> 元素，設置了圖片的樣式。max-width 和 max-height 屬性確保圖片在容器中不超過其原始大小，object-fit 屬性設置了圖片如何填充容器，並且使用 transition 屬性添加了圖片的縮放效果。
---
```
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
transform: scale(1);
}
```
---
這段 CSS 代碼設置了當滑鼠懸停在圖片上時的效果，將圖片縮放為原來大小的 1.2 倍。
---
```
.image-container img:hover {
transform: scale(1.2);
}
```
---
這段 CSS 代碼樣式化了 .sidebar 類別，設置了側邊導航欄的樣式。它使用了 position: fixed; 使側邊欄固定在視窗上方，並設置了一些其他屬性，例如高度、寬度和背景顏色。
---
```
.sidebar {
height: 100vh;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: transparent; /* 修改背景顏色為透明 */
padding-top: 20px;
}
```
---
這段 CSS 代碼樣式化了 .sidebar .menu-toggle 類別，設置了側邊欄中的選單切換按鈕的樣式。
---
```
.sidebar .menu-toggle {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
padding: 15px 30px; /* 新增這行以設定按鈕大小 */
font-size: 18px; /* 新增這行以設定按鈕字型大小 */
outline: none;
border: none;
border-radius: 10px;
transition: 0.5s;
background: #1e1e1e;
color: greenyellow;
box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;
}
```
---
這段 CSS 代碼設置了當滑鼠懸停在選單切換按鈕上時的效果，使用了 animation 屬性添加了一個動畫。
---
```
.sidebar .menu-toggle:hover {
animation: a 0.5s 1 linear;
}
```
---
這段 CSS 代碼樣式化了 .sidebar .menu-items 類別，設置了側邊欄中的選單項目的樣式。它將選單項目的顯示設置為隱藏，並設置了一些其他樣式屬性，例如文本對齊和內容的上下間距。
---
```
.sidebar .menu-items {
display: none;
text-align: center; /* 新增這行以置中選單內容 */
padding: 10px 0; /* 新增這行以增加內容的上下間距 */
}
```
---
這段 CSS 代碼設置了當選單項目的 .menu-items 類別擁有 .open 類別時，將其顯示設置為顯示。
---
```
.sidebar .menu-items.open {
display: block;
}
```
---
這段 CSS 代碼樣式化了選單項目中的連結 <a> 元素的樣式。
---
```
.sidebar .menu-items a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
}
```
---
這段 CSS 代碼設置了當滑鼠懸停在選單項目的連結上時的背景顏色。
---
```
.sidebar .menu-items a:hover {
background-color: #63e01b;
}
```
---
這段 CSS 代碼樣式化了 <button> 元素的樣式。
---
```
button {
padding: 15px 30px;
font-size: 18px;
outline: none;
border: none;
border-radius: 10px;
transition: 0.5s;
background: #1e1e1e;
color: greenyellow;
box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;
}
```
---
這段 CSS 代碼設置了當滑鼠懸停在按鈕上時的效果，包括一個動畫和移除按鈕的陰影。
---
```
button:hover {
animation: a 0.5s 1 linear;
box-shadow: none; /* 移除按鈕的陰影 */
}
```
---
這段 CSS 代碼樣式化了 .button 類別，設置了按鈕的樣式，包括邊距、背景和陰影。
---
```
.button {
margin: 0;
height: auto;
background: transparent;
padding: 0;
border: none;
box-shadow: none; /* 移除按鈕的陰影 */
}
```
---
這段 CSS 代碼繼續樣式化了 .button 類別，設置了按鈕的其他樣式屬性，例如邊框寬度、文字描邊顏色和動畫顏色。
---
```
.button {
--border-right: 6px;
--text-stroke-color: rgba(255,255,255,0.6);
--animation-color: #37FF8B;
--fs-size: 2em;
letter-spacing: 3px;
text-decoration: none;
font-size: var(--fs-size);
font-family: "Arial";
position: relative;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px var(--text-stroke-color);
}
```
---
這段 CSS 代碼樣式化了 .hover-text 類別，設置了當滑鼠懸停在按鈕上時的文字效果。
---
```
.hover-text {
position: absolute;
box-sizing: border-box;
content: attr(data-text);
color: var(--animation-color);
width: 0%;
inset: 0;
border-right: var(--border-right) solid var(--animation-color);
overflow: hidden;
transition: 0.5s;
-webkit-text-stroke: 1px var(--animation-color);
}
```
---
這段 CSS 代碼設置了當滑鼠懸停在按鈕上時的文字效果，包括文字的寬度和投影。
---
```
.button:hover .hover-text {
width: 100%;
filter: drop-shadow(0 0 23px var(--animation-color));
}
```
---
這段 CSS 代碼定義了一個名為 gradientAnimation 的動畫，用於控制背景漸變的移動效果。
---
```
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
```
---
這段 CSS 代碼定義了一個名為 gradientAnimation 的動畫，用於控制背景漸變的移動效果。
---
```
@keyframes a {
0% {
transform: translateY(0) rotate(0);
}
25% {
transform: translateY(0.5rem) rotate(2deg);
}
50% {
transform: translateY(0) rotate(-2deg);
}
75% {
transform: translateY(-0.5rem) rotate(2deg);
}
100% {
transform: translateY(0) rotate(0);
}
}
```
---
關閉 CSS 樣式代碼區塊和 <head> 元素。
---
```
</style>
</head>
```
---
這部分是 HTML 文件的主體內容，包括一個圖片容器、一個側邊導航欄和一個按鈕。圖片容器使用了之前定義的 .image-container 類別，側邊導航欄使用了 .sidebar 類別，按鈕使用了 .button 類別。
---
```
<body>
<div class="image-container">
<img src="image.jpg" alt="Image">
</div>
<div class="sidebar">
<div class="menu-toggle">Menu</div>
<div class="menu-items">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>
<button class="button">
<div class="hover-text" data-text="Button"></div>
Hover Me
</button>
</body>
</html>
```
---
就此首頁完成也附上完整程式碼
---
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page 2</title>
<style>
/* CSS for the page body */
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #ffc107, #17a2b8, #dc3545);
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite;
}
/* CSS for the image container */
.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
}
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
transform: scale(1);
}
.image-container img:hover {
transform: scale(1.2);
}
/* CSS for the sidebar navigation */
.sidebar {
height: 100vh;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: transparent; /* 修改背景顏色為透明 */
padding-top: 20px;
}
.sidebar .menu-toggle {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
padding: 15px 30px; /* 新增這行以設定按鈕大小 */
font-size: 18px; /* 新增這行以設定按鈕字型大小 */
outline: none;
border: none;
border-radius: 10px;
transition: 0.5s;
background: #1e1e1e;
color: greenyellow;
box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;
}
.sidebar .menu-toggle:hover {
animation: a 0.5s 1 linear;
}
.sidebar .menu-toggle .icon:before,
.sidebar .menu-toggle .icon:after {
content: "";
display: block;
width: 20px;
height: 5px;
background-color: #1f2937; /* 暗色按鈕顏色 */
}
.sidebar .menu-toggle .icon:before {
transform: translateY(-5px);
}
.sidebar .menu-toggle .icon:after {
transform: translateY(3px);
}
.sidebar .menu-items {
display: none;
text-align: center; /* 新增這行以置中選單內容 */
padding: 10px 0; /* 新增這行以增加內容的上下間距 */
}
.sidebar .menu-items.open {
display: block;
}
.sidebar .menu-items a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
}
.sidebar .menu-items a:hover {
background-color: #63e01b;
}
button {
padding: 15px 30px;
font-size: 18px;
outline: none;
border: none;
border-radius: 10px;
transition: 0.5s;
background: #1e1e1e;
color: greenyellow;
box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;
}
button:hover {
animation: a 0.5s 1 linear;
box-shadow: none; /* 移除按鈕的陰影 */
}
/* CSS for the button */
.button {
margin: 0;
height: auto;
background: transparent;
padding: 0;
border: none;
box-shadow: none; /* 移除按鈕的陰影 */
}
.button {
--border-right: 6px;
--text-stroke-color: rgba(255,255,255,0.6);
--animation-color: #37FF8B;
--fs-size: 2em;
letter-spacing: 3px;
text-decoration: none;
font-size: var(--fs-size);
font-family: "Arial";
position: relative;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px var(--text-stroke-color);
}
/* this is the text, when you hover on button */
.hover-text {
position: absolute;
box-sizing: border-box;
content: attr(data-text);
color: var(--animation-color);
width: 0%;
inset: 0;
border-right: var(--border-right) solid var(--animation-color);
overflow: hidden;
transition: 0.5s;
-webkit-text-stroke: 1px var(--animation-color);
}
/* hover */
.button:hover .hover-text {
width: 100%;
filter: drop-shadow(0 0 23px var(--animation-color))
}
@keyframes a {
0% {
transform: scale(0.7, 1.3);
}
25% {
transform: scale(1.3, 0.7);
}
50% {
transform: scale(0.7, 1.3);
}
75% {
transform: scale(1.3, 0.7);
}
100% {
transform: scale(1, 1);
}
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.menu-toggle');
const menuItems = document.querySelector('.menu-items');
menuToggle.addEventListener('click', function() {
menuItems.classList.toggle('open');
});
});
</script>
</head>
<body>
<div class="image-container">
<button data-text="Awesome" class="button">
<span class="actual-text"> start </span>
<a href="about me.html" class="hover-text" aria-hidden="true"> start </a>
</button>
</div>
<div class="sidebar">
<div class="menu-toggle">
Menu
</div>
<div class="menu-items">
<a href="about me.html">關於我</a>
<a href="photo.html">h5p圖片測驗</a>
<a href="video.html">h5p影片測驗</a>
<a href="project.html">課堂學習呈現</a>
</div>
</div>
<div class="image-container">
<button data-text="Awesome" class="button">
<span class="actual-text"> start </span>
<span class="hover-text" aria-hidden="true"> start </span>
</button>
</div>
</body>
</html>
```
---
再來我們介紹關於我這頁的製作方式
因篇幅問題我們改為為註解方式介紹並附上完整程式碼
因檔案問題這裡附上圖檔連結
https://cdn.discordapp.com/attachments/881023379442909204/1113141591197106257/image.png
---
```
1. `<!DOCTYPE html>`：聲明文件類型為HTML。
2. `<html>`：HTML文件的根元素。
3. `<head>`：包含了該網頁的元設定和引入的資源。
4. `<meta charset="UTF-8">`：設定文件的字符編碼為UTF-8，以支援多國語言。
5. `<title>Page 1</title>`：設定網頁標題為"Page 1"。
6. `<style>`：開始CSS樣式區塊，用於定義網頁的樣式。
7. `body`：選擇所有`<body>`元素，設定網頁主體的樣式。
8. `.image-container`：選擇具有`image-container`類別的元素，設定圖片容器的樣式。
9. `.image-container img`：選擇圖片容器中的圖片元素，設定圖片的樣式。
10. `.image-container img:hover`：選擇鼠標懸停在圖片上時的樣式。
11. `.sidebar`：選擇具有`sidebar`類別的元素，設定側邊導航欄的樣式。
12. `.sidebar .menu-toggle`：選擇側邊導航欄中的`.menu-toggle`元素，設定菜單切換按鈕的樣式。
13. `.sidebar .menu-toggle:hover`：選擇鼠標懸停在菜單切換按鈕上時的樣式。
14. `.sidebar .menu-toggle .icon:before`、`.sidebar .menu-toggle .icon:after`：選擇菜單切換按鈕中的`.icon:before`和`.icon:after`元素，設定菜單切換按鈕的樣式。
15. `.sidebar .menu-items`：選擇側邊導航欄中的`.menu-items`元素，設定菜單項目的樣式。
16. `.sidebar .menu-items.open`：選擇側邊導航欄中`.menu-items`元素在打開狀態下的樣式。
17. `.sidebar .menu-items a`：選擇菜單項目中的超連結元素，設定超連結的樣式。
18. `.myCard`：選擇具有`myCard`類別的元素，設定卡片容器的樣式。
19. `.title`：選擇所有擁有`title`類別的元素，設定標題的樣式。
20. `.innerCard`：選擇具有`innerCard`類別的元素，設定內部卡片的樣式。
21. `.myCard:hover .innerCard`：選擇鼠標懸停在卡片容器上時的內部卡片的樣式。
22. `.frontSide`、`.backSide`：選擇前面和背面卡片的樣式。
23. `.backSide`：設定背面卡片旋轉180度，使其顯示在前面。
24. `.frontSide::before`、`.backSide::before`：選擇前面和背面卡片的前景樣式，設定漸變背景。
25. `@keyframes animate`：定義一個名為`animate`的關鍵幀動畫。
26. `@keyframes gradientAnimation`：定義一個名為`gradientAnimation`的關鍵幀動畫。
27. `@keyframes a`：定義一個名為`a`的關鍵幀動畫。
28. `<script>`：開始JavaScript腳本區塊，用於網頁的互動行為。
29. `document.addEventListener('DOMContentLoaded', function() { ... });`：在DOM加載完成後執行內容。
30. `const menuToggle = document.querySelector('.menu-toggle');`：獲取具有`.menu-toggle`類別的元素。
31. `const menuItems = document.querySelector('.menu-items');`：獲取具有`.menu-items`類別的元素。
32. `menuToggle.addEventListener('click', function() { ... });`：為菜單切換按鈕添加點擊事件監聽器。
33. `menuItems.classList.toggle('open');`：切換`.menu-items`元素的`open`類別，用於控制菜單項目的顯示與隱藏。
該程式碼的功能包括設定網頁樣式、創建側邊導航欄、建立圖片卡片並添加互動效果。
```
---
並附上完整程式碼
---
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page 1</title>
<style>
/* CSS for the page body */
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #ffc107, #17a2b8, #dc3545);
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite;
}
/* CSS for the image container */
.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
transition: opacity 0.5s ease; /* 添加過渡效果 */
}
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
transform: scale(1);
}
.image-container img:hover {
transform: scale(1.2);
}
/* CSS for the sidebar navigation */
.sidebar {
height: 100vh;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: transparent; /* 修改背景顏色為透明 */
padding-top: 20px;
transition: width 0.5s ease; /* 添加過渡效果 */
}
.sidebar .menu-toggle {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
padding: 15px 30px; /* 新增這行以設定按鈕大小 */
font-size: 18px; /* 新增這行以設定按鈕字型大小 */
outline: none;
border: none;
border-radius: 10px;
transition: 0.5s;
background: #1e1e1e;
color: greenyellow;
box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;
}
.sidebar .menu-toggle:hover {
animation: a 0.5s 1 linear;
}
.sidebar .menu-toggle .icon:before,
.sidebar .menu-toggle .icon:after {
content: "";
display: block;
width: 20px;
height: 5px;
background-color: #1f2937; /* 暗色按鈕顏色 */
}
.sidebar .menu-toggle .icon:before {
transform: translateY(-5px);
}
.sidebar .menu-toggle .icon:after {
transform: translateY(3px);
}
.sidebar .menu-items {
display: none;
text-align: center; /* 新增這行以置中選單內容 */
padding: 10px 0; /* 新增這行以增加內容的上下間距 */
}
.sidebar .menu-items.open {
display: block;
}
.sidebar .menu-items a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
}
.sidebar .menu-items a:hover {
background-color: #63e01b;
}
.myCard {
background-color: transparent;
width: 380px;
height: 508px;
perspective: 1000px;
margin: auto; /* 將卡片置中 */
}
.title {
font-size: 1.5em;
font-weight: 900;
text-align: center;
margin: 0;
}
.innerCard {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
cursor: pointer;
}
.myCard:hover .innerCard {
transform: rotateY(180deg);
}
.frontSide,
.backSide {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 1rem;
color: white;
box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.5);
font-weight: 700;
}
.frontSide,
.frontSide::before {
background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}
.backSide,
.backSide::before {
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
.backSide {
transform: rotateY(180deg);
}
.backSide h2.title {
font-size: 44px; /* 標題字體大小為 18 像素 */
}
.backSide p {
font-size: 32px; /* 段落字體大小為 14 像素 */
}
.backSide h1 {
font-size: 24px; /* 大標題字體大小為 24 像素 */
}
.frontSide::before,
.backSide::before {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: '';
width: 110%;
height: 110%;
position: absolute;
z-index: -1;
border-radius: 1em;
filter: blur(20px);
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
opacity: 0.3;
}
80% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes a {
0% {
transform: scale(0.7, 1.3);
}
25% {
transform: scale(1.3, 0.7);
}
50% {
transform: scale(0.7, 1.3);
}
75% {
transform: scale(1.3, 0.7);
}
100% {
transform: scale(1, 1);
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.menu-toggle');
const menuItems = document.querySelector('.menu-items');
menuToggle.addEventListener('click', function() {
menuItems.classList.toggle('open');
});
});
</script>
</head>
<body>
<div class="sidebar">
<div class="menu-toggle">
Menu
</div>
<div class="menu-items">
<a href="index.html">首頁</a>
<a href="photo.html">h5p圖片測驗</a>
<a href="video.html">h5p影片測驗</a>
<a href="project.html">課堂學習呈現</a>
</div>
</div>
<div class="image-container">
<div class="myCard">
<div class="innerCard">
<div class="frontSide">
<h2 class="title"></h2>
<img src="https://media.discordapp.net/attachments/881023379442909204/1100461644036976740/F983B27A-EBE3-4A04-AA1C-03BF0AE073E9.jpg?width=351&height=468" alt="Your Image" style="width: 80%; height: 80%;">
</div>
<div class="backSide">
<h2 class="title">吳昀璟</h2>
<p>淡江教育科技學系</p>
<h1>興趣:探索並發現自己還不會是事物</h1>
</div>
</div>
</div>
</div>
</body>
</html>
```
---
再來我們介紹h5p圖片及影片測驗
同樣因為檔案關係我們附上圖檔連結
https://cdn.discordapp.com/attachments/881023379442909204/1113142236138438837/image.png
首先我們先介紹怎麼把lumi的檔案匯出到github並放到程式碼裡
在lumi製作完成後點擊儲存並匯出
如圖
並且點擊輸出
之後到github開啟新專案
打標題然後點擊儲存
然後點擊匯入檔案
把整個資料夾拖進去按儲存
之後到這個畫面之後點擊setting
並點擊pages把none改成main按儲存
之後等待一到兩分鐘並會出現連結
之後變是把連結複製下來貼到這段程式碼裡面
而影片的操作方式則跟圖片一樣
其中差異只有連結不一樣
---
```
這段程式碼是一個基本的HTML網頁，以下是每行的功能解釋：
1. `<!DOCTYPE html>`：聲明文件類型為HTML。
2. `<html>`：HTML文件的根元素。
3. `<head>`：包含了該網頁的元設定和引入的資源。
4. `<meta charset="UTF-8">`：設定文件的字符編碼為UTF-8，以支援多國語言。
5. `<title>Page 2</title>`：設定網頁標題為"Page 2"。
6. `<style>`：開始CSS樣式區塊，用於定義網頁的樣式。
7. `body`：選擇所有`<body>`元素，設定網頁主體的樣式。
8. `.image-container`：選擇具有`image-container`類別的元素，設定圖片容器的樣式。
9. `.image-container img`：選擇圖片容器中的圖片元素，設定圖片的樣式。
10. `.image-container img:hover`：選擇鼠標懸停在圖片上時的樣式。
11. `.sidebar`：選擇具有`sidebar`類別的元素，設定側邊導航欄的樣式。
12. `.sidebar .menu-toggle`：選擇側邊導航欄中的`.menu-toggle`元素，設定菜單切換按鈕的樣式。
13. `.sidebar .menu-toggle:hover`：選擇鼠標懸停在菜單切換按鈕上時的樣式。
14. `.sidebar .menu-toggle .icon:before`、`.sidebar .menu-toggle .icon:after`：選擇菜單切換按鈕中的`.icon:before`和`.icon:after`元素，設定菜單切換按鈕的樣式。
15. `.sidebar .menu-items`：選擇側邊導航欄中的`.menu-items`元素，設定菜單項目的樣式。
16. `.sidebar .menu-items.open`：選擇側邊導航欄中`.menu-items`元素在打開狀態下的樣式。
17. `.sidebar .menu-items a`：選擇菜單項目中的超連結元素，設定超連結的樣式。
18. `button`：選擇所有的`button`元素，設定按鈕的樣式。
19. `button:hover`：選擇鼠標懸
停在按鈕上時的樣式。
20. `@keyframes a`：定義一個名為`a`的關鍵幀動畫。
21. `@keyframes gradientAnimation`：定義一個名為`gradientAnimation`的關鍵幀動畫。
22. `<script>`：開始JavaScript腳本區塊，用於網頁的互動行為。
23. `document.addEventListener('DOMContentLoaded', function() { ... });`：在DOM加載完成後執行內容。
24. `const menuToggle = document.querySelector('.menu-toggle');`：獲取具有`.menu-toggle`類別的元素。
25. `const menuItems = document.querySelector('.menu-items');`：獲取具有`.menu-items`類別的元素。
26. `menuToggle.addEventListener('click', function() { ... });`：為菜單切換按鈕添加點擊事件監聽器。
27. `menuItems.classList.toggle('open');`：切換`.menu-items`元素的`open`類別，用於控制菜單項目的顯示與隱藏。
28. `</head>`：結束`<head>`元素。
29. `<body>`：HTML文件的主體部分。
30. `<div class="sidebar">`：創建具有`sidebar`類別的`<div>`元素，用於側邊導航欄。
31. `<div class="menu-toggle">`：創建具有`menu-toggle`類別的`<div>`元素，用於菜單切換按鈕。
32. `<div class="menu-items">`：創建具有`menu-items`類別的`<div>`元素，用於菜單項目。
33. `<a href="index.html">首頁</a>`：創建一個超連結到`index.html`的菜單項目。
34. `<a href="about me.html">關於我</a>`：創建一個超連結到`about me.html`的菜單項目。
35. `<a href="video.html">h5p影片測驗</a>`：創建一個超連結到`video.html`的菜單項目。
36. `<a href="project.html">課堂學習呈現</a>`：創建一個超連結到`project.html`的菜單項目。
37. `</div>`：結束`<div class="menu-items">`元素。
38. `</div>`：結束`<div class="sidebar">`元素。
39. `<div class="image-container">`：創建具有`image-container`類別的`<div>`元素，用於圖片容器。
40. `<iframe src="https://olyueen.github.io/fffff/" style="width:
50%; height: 80%;"></iframe>`：創建一個嵌入的`<iframe>`元素，顯示來自"https://olyueen.github.io/fffff/"的網頁內容。
41. `</div>`：結束`<div class="image-container">`元素。
42. `</body>`：結束`<body>`元素。
43. `</html>`：結束`<html>`元素。
這段程式碼創建了一個具有側邊導航欄和圖片容器的網頁，側邊導航欄包含一個選單切換按鈕和幾個菜單項目，點擊選單切換按鈕可以切換選單項目的顯示與隱藏。圖片容器中嵌入了一個`<iframe>`元素，顯示"https://olyueen.github.io/fffff/"網頁的內容。整個網頁的樣式使用CSS進行定制，並添加了一些動畫效果。
```
---
最後附上完整程式碼
---
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page 2</title>
<style>
/* CSS for the page body */
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #ffc107, #17a2b8, #dc3545);
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite;
}
/* CSS for the image container */
.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
}
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
transform: scale(1);
}
.image-container img:hover {
transform: scale(1.2);
}
/* CSS for the sidebar navigation */
.sidebar {
height: 100vh;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: transparent; /* 修改背景顏色為透明 */
padding-top: 20px;
}
.sidebar .menu-toggle {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
padding: 15px 30px; /* 新增這行以設定按鈕大小 */
font-size: 18px; /* 新增這行以設定按鈕字型大小 */
outline: none;
border: none;
border-radius: 10px;
transition: 0.5s;
background: #1e1e1e;
color: greenyellow;
box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;
}
.sidebar .menu-toggle:hover {
animation: a 0.5s 1 linear;
}
.sidebar .menu-toggle .icon:before,
.sidebar .menu-toggle .icon:after {
content: "";
display: block;
width: 20px;
height: 5px;
background-color: #1f2937; /* 暗色按鈕顏色 */
}
.sidebar .menu-toggle .icon:before {
transform: translateY(-5px);
}
.sidebar .menu-toggle .icon:after {
transform: translateY(3px);
}
.sidebar .menu-items {
display: none;
text-align: center; /* 新增這行以置中選單內容 */
padding: 10px 0; /* 新增這行以增加內容的上下間距 */
}
.sidebar .menu-items.open {
display: block;
}
.sidebar .menu-items a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
}
.sidebar .menu-items a:hover {
background-color: #63e01b;
}
button {
padding: 15px 30px;
font-size: 18px;
outline: none;
border: none;
border-radius: 10px;
transition: 0.5s;
background: #1e1e1e;
color: greenyellow;
box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;
}
button:hover {
animation: a 0.5s 1 linear;
}
@keyframes a {
0% {
transform: scale(0.7, 1.3);
}
25% {
transform: scale(1.3, 0.7);
}
50% {
transform: scale(0.7, 1.3);
}
75% {
transform: scale(1.3, 0.7);
}
100% {
transform: scale(1, 1);
}
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.menu-toggle');
const menuItems = document.querySelector('.menu-items');
menuToggle.addEventListener('click', function() {
menuItems.classList.toggle('open');
});
});
</script>
</head>
<body>
<div class="sidebar">
<div class="menu-toggle">
Menu
</div>
<div class="menu-items">
<a href="index.html">首頁</a>
<a href="about me.html">關於我</a>
<a href="video.html">h5p影片測驗</a>
<a href="project.html">課堂學習呈現</a>
</div>
</div>
<div class="image-container">
<iframe src="https://olyueen.github.io/fffff/" style="width: 50%; height: 80%;"></iframe>
</div>
<div class="image-container">
</div>
</body>
</html>
```
---
最後介紹課堂學習表現
此圖檔也因檔案過大改由連結
https://cdn.discordapp.com/attachments/881023379442909204/1113146341917458442/image.png
這是整段程式碼的基本架構
---
```
<!DOCTYPE html>
<html>
<head>
<!-- 引入 Swiper CSS顯示格式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<style>
/* CSS 樣式的定義 */
</style>
<script>
/* JavaScript 程式碼的定義 */
</script>
</head>
<body>
<!-- 頁面內容 -->
</body>
</html>
```
---
CSS 部分：
---
```
<!DOCTYPE html>：聲明文件類型為 HTML。
<html>：HTML 文件的根元素。
<head>：包含了與文件相關的元資料和連結的部分。
<link rel="stylesheet" href="...">：通過該連結引入了一個名為 Swiper 的 CSS 樣式庫，用於顯示格式。
<style>：在該標籤內定義了一些 CSS 樣式。
<script>：在該標籤內定義了一些 JavaScript 程式碼。
<body>：包含了實際顯示在頁面上的內容。
定義了一些元素的樣式，包括背景、尺寸、對齊方式等。
```
---
剩下的程式碼個使用了 Swiper 輪播庫的 HTML、CSS 和 JavaScript 範例。我將逐行解釋程式碼的功能：
這段程式碼是一個使用了 Swiper 輪播庫的 HTML、CSS 和 JavaScript 範例。我將逐行解釋程式碼的功能：
---
```
<div class="sidebar">
<div class="menu-toggle">
<button class="menu-button">Menu</button>
</div>
<div class="menu-items">
<a href="index.html">首頁</a>
<a href="about me.html">關於我</a>
<a href="photo.html">h5p圖片測驗</a>
<a href="video.html">h5p影片測驗</a>
</div>
</div>
```
---
這部分代碼使用了 Swiper 輪播庫，創建了一個輪播區域，其中包含了幾個輪播卡片。每個輪播卡片都有一個圖片、標題、描述和相關連結。
---
```
<div id="app">
<div class="swiper carousel">
<div class="swiper-wrapper">
<!-- Card 1 -->
<div class="swiper-slide">
<div class="card">
<img src="https://media.discordapp.net/attachments/881023379442909204/1100461644036976740/F983B27A-EBE3-4A04-AA1C-03BF0AE073E9.jpg" alt="My Photo">
<div class="content">
<h2 class="title">吳昀璟<br><span>淡江教育科技學系</span></h2>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="swiper-slide">
<div class="card">
<img src="https://media.discordapp.net/attachments/881023379442909204/1112814513331372042/873d2e85606dd6e9.png?width=940&height=468" alt="My Photo">
<div class="content">
<div class="swiper-description">
<h2>大一下期末程式</h2>
<p style="color: rgb(255, 255, 255);">這段程式碼可以透過滑鼠鼠標的移動改變背景線條的排列方式跟形狀 其中最為重要的是在點擊鼠標後會切換為3D文字</p>
<div class="nav">
<h5>
<a href="https://openprocessing.org/sketch/1530876" target="_blank">了解更多</a>
</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="swiper-slide">
<div class="card">
<img src="https://cdn.discordapp.com/attachments/881023379442909204/1113050977499623444/2.png" alt="My Photo">
<div class="content">
<div class="swiper-description">
<h2>大一練習</h2>
<p style="color: rgb(255, 255, 255);">這段程式碼主要可以複製輸入的內容並且可透過滾輪改變大小且可透過顏色選擇器改變顏色 按鈕改變文字表現形式</p>
<div class="nav">
<h5>
<a href="https://openprocessing.org/sketch/1598117" target="_blank">了解更多</a>
</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="swiper-slide">
<div class="card">
<img src="https://cdn.discordapp.com/attachments/881023379442909204/1113052320847122462/image.png" alt="My Photo">
<div class="content">
<div class="swiper-description">
<h2>大一下期末程式</h2>
<p style="color: rgb(255, 255, 255);">這段程式碼可以透過滑鼠鼠標的移動改變背景線條的排列方式跟形狀 其中最為重要的是在點擊鼠標後會切換為3D文字</p>
<div class="nav">
<h5>
<a href="https://openprocessing.org/sketch/1530876" target="_blank">了解更多</a>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
```
---
這部分代碼創建了輪播的切換按鈕和分頁器，用於在輪播區域中進行切換和指示當前頁面。
---
```
<div class="swiper-buttons">
<button class="swiper-button-prev"></button>
<button class="swiper-button-next"></button>
</div>
<!-- 添加分頁器 -->
<div class="swiper-pagination"></div>
</div>
```
---
這部分代碼引入了 Swiper JavaScript 庫並初始化了輪播。通過指定相應的選項，如每頁顯示的幻燈片數量、間距、導航按鈕和分頁器的元素，設定了輪播的配置。
---
```
<!-- 引入 Swiper JS腳本 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
// 初始化Swiper輪播
var swiper = new Swiper(".swiper.carousel", {
slidesPerView: 1,
spaceBetween: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
```
---
總結來說，這段程式碼創建了一個帶有輪播功能的網頁元素，其中包含了一個側邊欄菜單、輪播區域和相應的切換按鈕和分頁器。每個輪播卡片都有圖片、標題、描述和連結，用於展示不同的內容或項目。
Sign in with Wallet
Connect another wallet