You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
3.0 KiB
46 lines
3.0 KiB
<!DOCTYPE html>
|
|
<html lang="zh - CN">
|
|
|
|
<head>
|
|
<meta charset="UTF - 8">
|
|
<meta name="viewport" content="width=device-width, initial - scale=1.0">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700&display=swap" rel="stylesheet">
|
|
<title>风景视图</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="tab-container">
|
|
|
|
<div class="tab-nav">
|
|
<button class="tab-item active" data-target="content1">标签一</button>
|
|
<button class="tab-item" data-target="content2">标签二</button>
|
|
<button class="tab-item" data-target="content3">标签三</button>
|
|
<button class="tab-item" data-target="content4">标签四</button>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<div id="content1" class="content-panel active">
|
|
<p>在湖畔的黄昏里，天空与山脉共舞，云霞映照出生命的绚烂。站在码头的尽头，我们都是这宇宙中的微小尘埃，却也能感受到大自然的壮丽与宁静。每一刻的美丽，都是生命对我们的馈赠，让我们学会珍惜，学会欣赏。</p>
|
|
<img src="./imgs/1-lakes.jpg" alt="示例图片">
|
|
</div>
|
|
<div id="content2" class="content-panel">
|
|
<p>在这片静谧的自然角落，两只鸟儿相互依偎，彼此间的默契如同它们头顶上那金色的羽冠般闪耀。它们的存在是对抗孤独的力量，也是对和谐共生最美好的诠释。在这个瞬息万变的世界里，唯有真挚的情感才能跨越一切界限，让心灵得以栖息。</p>
|
|
<img src="./imgs/2-brown.jpg" alt="示例图片">
|
|
</div>
|
|
<div id="content3" class="content-panel">
|
|
<p>在这幅画面中，火烈鸟们优雅地站立着，它们的羽毛呈现出鲜艳的粉红色调，仿佛是大自然赋予的色彩盛宴。背景是一片翠绿的竹林，与火烈鸟形成了鲜明的对比。阳光透过树叶洒下斑驳的光影，为整个场景增添了一丝神秘的氛围。这两只火烈鸟似乎正在享受彼此的陪伴，它们的姿态亲密而温馨，让人感受到自然界中那份纯真的美好。</p>
|
|
<img src="./imgs/3-birds.jpg" alt="示例图片">
|
|
</div>
|
|
<div id="content4" class="content-panel">
|
|
<p>在这片宁静的山谷中，湖水清澈见底，倒映着巍峨的山峰和苍翠的森林。山峰被夕阳染成了金黄色，与蓝天白云相映成趣。这里是大自然的杰作，是人类心灵的净土。在这里，我们可以感受到生命的美好，领悟到人与自然的和谐共生。让我们珍惜这片土地，守护这份宁静，让大自然永远绽放它的光彩。</p>
|
|
<img src="./imgs/4-lake-mount.jpg" alt="示例图片">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
|
|
</html> |