diff --git a/Assignment1/frontend/content.html b/Assignment1/frontend/content.html new file mode 100644 index 0000000..69cb92f --- /dev/null +++ b/Assignment1/frontend/content.html @@ -0,0 +1,46 @@ + + + + + + + + + 风景视图 + + + + +
+ +
+ + + + +
+ +
+
+

在湖畔的黄昏里，天空与山脉共舞，云霞映照出生命的绚烂。站在码头的尽头，我们都是这宇宙中的微小尘埃，却也能感受到大自然的壮丽与宁静。每一刻的美丽，都是生命对我们的馈赠，让我们学会珍惜，学会欣赏。

+ 示例图片 +
+
+

在这片静谧的自然角落，两只鸟儿相互依偎，彼此间的默契如同它们头顶上那金色的羽冠般闪耀。它们的存在是对抗孤独的力量，也是对和谐共生最美好的诠释。在这个瞬息万变的世界里，唯有真挚的情感才能跨越一切界限，让心灵得以栖息。

+ 示例图片 +
+
+

在这幅画面中，火烈鸟们优雅地站立着，它们的羽毛呈现出鲜艳的粉红色调，仿佛是大自然赋予的色彩盛宴。背景是一片翠绿的竹林，与火烈鸟形成了鲜明的对比。阳光透过树叶洒下斑驳的光影，为整个场景增添了一丝神秘的氛围。这两只火烈鸟似乎正在享受彼此的陪伴，它们的姿态亲密而温馨，让人感受到自然界中那份纯真的美好。

+ 示例图片 +
+
+

在这片宁静的山谷中，湖水清澈见底，倒映着巍峨的山峰和苍翠的森林。山峰被夕阳染成了金黄色，与蓝天白云相映成趣。这里是大自然的杰作，是人类心灵的净土。在这里，我们可以感受到生命的美好，领悟到人与自然的和谐共生。让我们珍惜这片土地，守护这份宁静，让大自然永远绽放它的光彩。

+ 示例图片 +
+
+
+ + + + + \ No newline at end of file diff --git a/Assignment1/frontend/imgs/1-lakes.jpg b/Assignment1/frontend/imgs/1-lakes.jpg new file mode 100644 index 0000000..1cedf4d Binary files /dev/null and b/Assignment1/frontend/imgs/1-lakes.jpg differ diff --git a/Assignment1/frontend/imgs/2-brown.jpg b/Assignment1/frontend/imgs/2-brown.jpg new file mode 100644 index 0000000..38fb6ba Binary files /dev/null and b/Assignment1/frontend/imgs/2-brown.jpg differ diff --git a/Assignment1/frontend/imgs/3-birds.jpg b/Assignment1/frontend/imgs/3-birds.jpg new file mode 100644 index 0000000..424d719 Binary files /dev/null and b/Assignment1/frontend/imgs/3-birds.jpg differ diff --git a/Assignment1/frontend/imgs/4-lake-mount.jpg b/Assignment1/frontend/imgs/4-lake-mount.jpg new file mode 100644 index 0000000..af09156 Binary files /dev/null and b/Assignment1/frontend/imgs/4-lake-mount.jpg differ diff --git a/Assignment1/frontend/script.js b/Assignment1/frontend/script.js new file mode 100644 index 0000000..2d30e63 --- /dev/null +++ b/Assignment1/frontend/script.js @@ -0,0 +1,16 @@ +document.querySelector('.tab-nav').addEventListener('click', function(e) { + const tabItem = e.target.closest('.tab-item'); + if (!tabItem) return; + + //全部清除acrive状态 + document.querySelectorAll('.tab-item, .content-panel').forEach(el => { + el.classList.remove('active'); + }); + + //标签页active + tabItem.classList.add('active'); + + //将当前的active状态添加到对应的标签内容中 + const targetId = tabItem.dataset.target; + document.getElementById(targetId).classList.add('active'); +}); \ No newline at end of file diff --git a/Assignment1/frontend/styles.css b/Assignment1/frontend/styles.css new file mode 100644 index 0000000..ac16806 --- /dev/null +++ b/Assignment1/frontend/styles.css @@ -0,0 +1,50 @@ +.tab-container { + max-width: 800px; + margin: 20px auto; +} + +.tab-nav { + display: flex; + border-bottom: 2px solid #eee; +} +.tab-item { + padding: 12px 24px; + background: none; + border: none; + cursor: pointer; + transition: all 0.3s; +} +.tab-item.active { + border-bottom: 3px solid #2196F3; + color: #2196F3; +} + +.content-panel { + display: none; + padding: 20px; + animation: fadeIn 0.5s; +} + +.content-panel.active { + display: block; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +.content-panel{ + width: 80%; + height: 80%; +} + +img { + width: 100%; + height: 100%; + object-fit: cover; +} + +body .tab-item{ + font-family: 'Noto Sans SC', sans-serif; +} \ No newline at end of file