抗日勝利80周年 | HTML頁面

飛翔的和平鴿;屹立的人民英雄紀念碑;倒下的日本國旗;旋轉的金色勛章無不代表著我們勝利了!!!

在這里插入圖片描述

HTML源代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>中國人民抗日戰爭勝利80周年</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {min-height: 100vh;background: linear-gradient(135deg, #0f0f10 0%, #0e0f10 100%);display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px;font-family: "SimHei", "Microsoft YaHei", sans-serif;color: #333;}.container {position: relative;width: 90%;max-width: 900px;border: 12px solid #8b0000;box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);background-color: #fff9e6;overflow: hidden;}h1 {text-align: center;color: #8b0000;margin: 25px 0 10px;font-size: 2.5rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);background: linear-gradient(to right, #8b0000, #ff0000);-webkit-background-clip: text;color: transparent;}.subtitle {text-align: center;color: #8b0000;margin-bottom: 25px;font-size: 1.3rem;font-weight: bold;}.flag-container {position: relative;width: 100%;height: 450px;background-color: #8b0000;overflow: hidden;}.flag {width: 60%;height: 70%;background-color: #de2910;position: relative;margin: 50px auto;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);}.star {position: absolute;background-color: #ffde00;clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}.big-star {width: 90px;height: 90px;top: 25px;left: 25px;}.small-star {width: 30px;height: 30px;}.star-1 {top: 10px;left: 120px;transform: rotate(15deg);}.star-2 {top: 40px;left: 140px;transform: rotate(-15deg);}.star-3 {top: 70px;left: 140px;transform: rotate(-5deg);}.star-4 {top: 100px;left: 120px;transform: rotate(-40deg);}.victory-elements {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;}.peace-dove {position: absolute;color: white;font-size: 1.8rem;animation: fly 20s linear infinite;z-index: 10;}.dove1 {top: 30px;left: -50px;animation-delay: 0s;}.dove2 {top: 150px;left: -50px;animation-delay: 5s;}.dove3 {top: 80px;left: -50px;animation-delay: 2s;}.dove4 {top: 200px;left: -50px;animation-delay: 7s;}.dove5 {top: 120px;left: -50px;animation-delay: 3s;}.timeline {display: flex;justify-content: space-around;padding: 30px 20px;background-color: #8b0000;color: white;position: relative;}.timeline::before {content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 4px;height: 100%;background: linear-gradient(to bottom, #ffde00, #8b0000);}.timeline-item {width: 22%;text-align: center;padding: 15px;background-color: rgba(255, 255, 255, 0.1);border-radius: 10px;position: relative;border: 2px solid #ffde00;}.timeline-year {font-size: 1.3rem;font-weight: bold;margin-bottom: 10px;color: #ffde00;}.monument-container {position: absolute;bottom: 10px;right: 30px;width: 140px;height: 280px;z-index: 5;animation: monumentGlow 3s ease-in-out infinite alternate;}.monument-base-1 {position: absolute;bottom: 0;left: 0;width: 100%;height: 12px;background-color: #595959;border-radius: 2px;}.monument-base-2 {position: absolute;bottom: 12px;left: 5%;width: 90%;height: 12px;background-color: #4d4d4d;border-radius: 2px;}.monument-base-3 {position: absolute;bottom: 24px;left: 10%;width: 80%;height: 12px;background-color: #404040;border-radius: 2px;}.monument-pedestal {position: absolute;bottom: 36px;left: 15%;width: 70%;height: 60px;background-color: #333;z-index: 2;border-top: 8px solid #4d4d4d;}.pedestal-top {position: absolute;top: -8px;left: -5%;width: 110%;height: 8px;background-color: #4d4d4d;border-radius: 2px 2px 0 0;}.monument-column {position: absolute;bottom: 96px;left: 25%;width: 50%;height: 150px;background: linear-gradient(to top, #555, #666);box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);z-index: 3;border-left: 3px solid rgba(139, 0, 0, 0.3);border-right: 3px solid rgba(139, 0, 0, 0.3);}.column-inscription {text-align: center;color: rgba(224, 207, 58, 0.76);font-weight: bold;font-size: 0.8rem;line-height: 1.2;text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);writing-mode: vertical-rl;margin-left: 15px;}.main-inscription {display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;height: 100px;margin-bottom: 10px;}.inscription-char {width: 45%;height: 45%;display: flex;align-items: center;justify-content: center;font-family: "SimSun", serif;font-size: 12px;font-weight: bold;color: #8b0000;background-color: rgba(255, 222, 0, 0.1);border: 1px solid rgba(139, 0, 0, 0.2);writing-mode: vertical-rl;text-orientation: upright;}.monument-inscription {display: flex;flex-direction: column;justify-content: flex-end;align-items: center;height: 100%;font-size: 10px;padding-bottom: 1px;}.sub-inscription {font-family: "SimSun", serif;font-size: 0.45rem;color: #000;text-align: center;line-height: 1.2;margin-top: 5px;}.monument-crown {position: absolute;bottom: 246px;left: 20%;width: 60%;height: 20px;background-color: #bfbfbf;z-index: 4;border-radius: 2px 2px 0 0;}.crown-top {position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 70%;height: 12px;background-color: #b3b3b3;clip-path: polygon(0 100%, 50% 0, 100% 100%);}.japanese-defeat {position: absolute;bottom: 20px;left: 20px;width: 150px;height: 80px;animation: defeatFlag 3s ease-in-out infinite alternate;}.japanese-flag {width: 80px;height: 50px;background-color: white;border-radius: 5px;position: relative;transform: rotate(30deg);box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}.japanese-flag::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background-color: #bc002d;border-radius: 50%;}.fallen-flag {width: 2px;height: 60px;background-color: #333;position: absolute;top: 40px;left: 75px;transform: rotate(45deg);}.medal {position: absolute;top: 20px;right: 20px;width: 60px;height: 60px;background-color: #ffde00;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #8b0000;font-size: 2rem;box-shadow: 0 0 15px rgba(255, 222, 0, 0.7);animation: medalRotate 8s linear infinite;}.history-text {padding: 30px;text-align: center;line-height: 2;position: relative;}.history-text p {margin-bottom: 20px;font-size: 1.2rem;}.highlight {color: #8b0000;font-weight: bold;font-size: 1.3rem;background-color: rgba(255, 222, 0, 0.2);padding: 5px 10px;border-radius: 5px;}.year {text-align: center;font-size: 3.5rem;font-weight: bold;color: #8b0000;margin: 20px 0;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);position: relative;}.year::before,.year::after {content: '★★';color: #ffde00;position: absolute;top: 50%;transform: translateY(-50%);}.year::before {left: 20%;}.year::after {right: 20%;}.peace-slogan {text-align: center;font-size: 1.4rem;color: #2e8b57;margin: 20px 0;font-style: italic;}@keyframes fly {0% {transform: translateX(0) rotate(0deg);opacity: 0;}10% {opacity: 1;}90% {opacity: 1;}100% {transform: translateX(1000px) rotate(20deg);opacity: 0;}}@keyframes monumentGlow {from {filter: drop-shadow(0 0 5px rgba(255, 222, 0, 0.7));}to {filter: drop-shadow(0 0 15px rgba(255, 222, 0, 0.9));}}@keyframes medalRotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}@keyframes defeatFlag {0%, 100% {transform: translateY(0) rotate(5deg);}50% {transform: translateY(-5px) rotate(0deg);}}@media (max-width: 768px) {.container {width: 95%;}h1 {font-size: 2rem;}.flag-container {height: 350px;}.flag {width: 80%;margin: 40px auto;}.big-star {width: 70px;height: 70px;}.small-star {width: 25px;height: 25px;}.star-1 {top: 10px;left: 100px;}.star-2 {top: 35px;left: 120px;}.star-3 {top: 60px;left: 115px;}.star-4 {top: 80px;left: 95px;}.timeline {flex-direction: column;align-items: center;}.timeline::before {left: 20px;transform: none;}.timeline-item {width: 80%;margin: 10px 0;}.year {font-size: 2.5rem;}.monument, .japanese-defeat, .medal {display: none;}}</style>
</head>
<body>
<div class="container"><h1>中國人民抗日戰爭勝利80周年</h1><div class="subtitle">銘記歷史 · 緬懷先烈 · 珍愛和平 · 開創未來</div><div class="flag-container"><div class="flag"><!-- 五角星 --><div class="star big-star"></div><div class="star small-star star-1"></div><div class="star small-star star-2"></div><div class="star small-star star-3"></div><div class="star small-star star-4"></div></div><div class="victory-elements"><!-- 和平鴿 --><div class="peace-dove dove1"><i class="fas fa-dove"></i></div><div class="peace-dove dove2"><i class="fas fa-dove"></i></div><div class="peace-dove dove3"><i class="fas fa-dove"></i></div><div class="peace-dove dove4"><i class="fas fa-dove"></i></div><div class="peace-dove dove5"><i class="fas fa-dove"></i></div><!-- 人民英雄紀念碑 --><div class="monument-container"><!-- 紀念碑基座三層 --><div class="monument-base-3"></div><div class="monument-base-2"></div><div class="monument-base-1"></div><!-- 碑座與碑身連接部分 --><div class="monument-pedestal"><div class="pedestal-top"></div><div class="pedestal-relief front-relief"></div><div class="pedestal-relief side-relief left"></div><div class="pedestal-relief side-relief right"></div></div><!-- 碑身主體 --><div class="monument-column"><div class="column-inscription"><div class="main-inscription"><div class="monument-inscription">人民英雄永垂不朽</div></div><div class="sub-inscription"><div>三年以來</div><div>在人民解放戰爭和人民革命中</div><div>犧牲的人民英雄們永垂不朽</div></div></div></div><!-- 碑頂 --><div class="monument-crown"><div class="crown-top"></div></div></div><!-- 小日子國旗 --><div class="japanese-defeat"><div class="fallen-flag"></div><div class="japanese-flag"></div></div><!-- 勝利勛章 --><div class="medal"><i class="fas fa-star"></i></div></div></div><div class="year">1945-2025</div><div class="peace-slogan">"和平像陽光一樣溫暖,像鮮花一樣美麗"</div><div class="history-text"><p>1945年9月2日,日本在投降書上簽字,標志著中國人民經過14年艱苦卓絕的抗日戰爭,終于取得了偉大勝利。</p><p>這是近代以來中國抗擊外敵入侵的第一次完全勝利,洗刷了近代以來中國抗擊外來侵略屢戰屢敗的民族恥辱。</p><p class="highlight">這場勝利重新確立了中國在世界上的大國地位,開辟了中華民族偉大復興的光明前景。</p><p>我們銘記歷史,不是為了延續仇恨,而是為了從歷史中汲取智慧和力量,防止悲劇重演,共創和平未來。</p></div><div class="timeline"><div class="timeline-item"><div class="timeline-year">1931年</div><div>九一八事變爆發,抗日戰爭開始</div></div><div class="timeline-item"><div class="timeline-year">1937年</div><div>七七事變,全面抗戰爆發</div></div><div class="timeline-item"><div class="timeline-year">1945年</div><div>日本投降,抗戰勝利結束</div></div><div class="timeline-item"><div class="timeline-year">2025年</div><div>中國抗日勝利80周年</div></div></div>
</div>
</body>
</html>

銘記歷史,吾輩自強

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/93209.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/93209.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/93209.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

web仿寫網站

一、完成自己學習的官網&#xff0c;至少三個不同的頁面。1、界面1&#xff08;1&#xff09;代碼<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wid…

基于element-plus和IndexedDB數據庫的基礎表單

本文介紹了基于Vue 3和Element Plus的表單項目配置頁面實現。頁面包含搜索欄、操作按鈕、數據表格和分頁組件&#xff0c;使用IndexedDB進行本地數據存儲。主要功能包括&#xff1a;1) 通過模糊查詢搜索項目&#xff1b;2) 分頁顯示項目數據&#xff1b;3) 添加/編輯/刪除項目操…

paimon實時數據湖教程-主鍵表更新機制

在上一章&#xff0c;我們學習了 Paimon 如何保證每一次寫入的原子性和一致性。但數據倉庫的核心需求不僅是寫入&#xff0c;更重要的是更新。想象一個場景&#xff1a;我們需要實時更新用戶的最新信息&#xff0c;或者實時累加計算用戶的消費總額。傳統的 Hive 數據湖對此無能…

第十六屆藍橋杯青少組C++省賽[2025.8.9]第二部分編程題(4、矩陣圈層交錯旋轉)

參考程序&#xff1a;#include <bits/stdc.h> using namespace std;const int MAXN 105; int a[MAXN][MAXN];int main() {int n;if (!(cin >> n)) return 0;for (int i 0; i < n; i)for (int j 0; j < n; j)cin >> a[i][j];int layers n / 2; // 每…

【FastGTP?】[01] 使用 FastGPT 搭建簡易 AI 應用

簡易應用&#xff1a;英語單詞解釋 例句 1. 前言 FastGPT 是一個低代碼 AI 應用構建平臺&#xff0c;可以通過簡單配置快速創建自己的 AI 應用。 本文將帶你用 FastGPT 搭建一個 英語單詞解釋 例句 的 AI 工具&#xff0c;輸入英文單詞后&#xff0c;輸出&#xff1a; 單詞…

【Mysql語句練習】

MysqlMysql語句練習一、建庫建表二、插入數據三、查詢Mysql語句練習 一、建庫建表 1、創建數據庫mydb11_stu&#xff0c;并使用數據庫 # 創建數據庫mydb11_stu mysql> create database mydb11_stu; Query OK, 1 row affected (0.00 sec) # 使用數據庫 mysql> use mydb1…

用Python Scrapy征服網絡爬蟲(反爬技術深入剖析)

目錄 第1章:Scrapy是個啥?為什么它是你爬蟲路上的最佳拍檔? 1.1 Scrapy的核心亮點 1.2 啥時候用Scrapy? 1.3 安裝Scrapy 第2章:動手寫你的第一個Scrapy爬蟲 2.1 創建Scrapy項目 2.2 定義數據結構(Items) 2.3 編寫爬蟲邏輯 2.4 運行爬蟲 2.5 小技巧:調試爬蟲 …

解決Electron透明窗口點擊不影響其他應用

遇到的問題&#xff1a;在electron透明窗口點擊&#xff0c;影響窗口下的應用接受不到點擊事件解決方案&#xff1a;CSSIgnoreMouseEvents實現原理&#xff1a;主進程默認設置禁用目標窗口鼠標事件&#xff08;禁用之后能檢測到mousemove&#xff09;&#xff0c;UI進程檢測頁面…

C# 泛型(Generics)詳解

泛型是 C# 2.0 引入的核心特性&#xff0c;它允許在定義類、接口、方法、委托等時使用未指定的類型參數&#xff0c;在使用時再指定具體類型。這種機制可以顯著提高代碼的復用性、類型安全性和性能。一、泛型的核心概念類型參數化泛型允許將類型作為 "參數" 傳遞給類…

Spring中存在兩個相同的Bean是否會報錯?

第一種情況&#xff1a;使用XML的方式設置Bean&#xff0c;這種情況在Spring啟動時就會報錯&#xff0c;因為ID在Spring中是Bean的唯一標識&#xff0c;Spring容器在啟動時會校驗唯一性&#xff0c;一旦發現重復就會報錯。但是如果是在兩個不同的XML文件中定義兩個相同的Bean&a…

【新手入門】Android基礎知識(一):系統架構

目 錄 Android 系統架構圖 1. 應用 2. JAVA API 框架 3. 原生 C/C 庫 4. Android 運行時&#xff08;Android Runtime&#xff09; 5. 硬件抽象層 (HAL) 6. Linux 內核 參考資料 Android 系統架構圖 Android底層內核空間以Linux Kernel作為基石&#xff0c;上層用戶空…

晶振電路的負載電容、電阻參數設計

系列文章目錄 文章目錄系列文章目錄前言一、晶振主要參數二、有源與無源區別三、無源晶振四、有源晶振總結前言 在硬件電路的設計中&#xff0c;晶振電路是必不可少的&#xff0c;它充當了整個電路心臟的作用。在這個晶振電路的設計中負載電容、電阻參數的選型是很重要的&…

電腦上練打字用什么軟件最好:10款打字軟件評測

現在孩子們在電腦上練打字&#xff0c;軟件一搜一大把&#xff0c;可好多家長和老師都犯愁&#xff1a;到底哪個管用&#xff1f;我帶200多個小學生練過字&#xff0c;前前后后試了十款軟件&#xff0c;今天就掏心窩子說說——有的看著花哨其實沒用&#xff0c;有的專業是專業但…

第五天~提取Arxml的模板信息

?? ARXML模板信息提取:解鎖汽車軟件的樂高魔法 在汽車電子的世界里,AUTOSAR(汽車開放系統架構)如同無形的神經系統,而ARXML文件正是承載這套神經系統藍圖的數字載體。當工程師們需要批量創建或修改ECU(電子控制單元)配置時,模板信息提取便成為了一項至關重要的核心技…

react+antd+vite自動引入組件、圖標等

前言&#xff1a;react在使用antd的時候&#xff0c;也是需要每個組件都在界面上按需引入的&#xff0c;那能不能自動生成&#xff0c;按需使用呢&#xff1f;我們這里說一說這個。安裝插件&#xff0c;組件按需引入unplugin-antd-resolverunplugin-auto-importnpm install unp…

深度學習與遙感入門(六)|輕量化 MobileNetV2 高光譜分類

系列回顧&#xff1a; &#xff08;一&#xff09;CNN 基礎&#xff1a;高光譜圖像分類可視化全流程 &#xff08;二&#xff09;HybridNet&#xff08;CNNTransformer&#xff09;&#xff1a;提升全局感受野 &#xff08;三&#xff09;GCN 入門實戰&#xff1a;基于光譜 KNN…

第4節 神經網絡從公式簡化到卷積神經網絡(CNN)的進化之路

?? 深度學習的"玄學進化史" 從CNN用卷積層池化層處理圖片,循環網絡RNN如何利用上下文處理序列數據,到注意力機制讓Transformer橫空出世,現在的大語言模型已經能寫能畫能決策!每個新技巧都讓人驚呼"還能這么玩",難怪說深度學習像玄學——但這玄學,…

最新去水印小程序系統 前端+后端全套源碼 多套模版 免授權(源碼下載)

最新去水印小程序系統 前端后端全套源碼 多套模版 免授權 源碼下載&#xff1a;https://download.csdn.net/download/m0_66047725/91669468 更多資源下載&#xff1a;關注我

TCP Socket 編程實戰:實現簡易英譯漢服務

前言&#xff1a;TCP&#xff08;傳輸控制協議&#xff09;是一種面向連接、可靠的流式傳輸協議&#xff0c;與 UDP 的無連接特性不同&#xff0c;它通過三次握手建立連接、四次揮手斷開連接&#xff0c;提供數據確認、重傳機制&#xff0c;保證數據有序且完整傳輸。本文將基于…

CF566C Logistical Questions Solution

Description 給定一棵 nnn 個點的樹 TTT&#xff0c;點有點權 aia_iai?&#xff0c;邊有邊權 www. 定義 dist?(u,v)\operatorname{dist}(u,v)dist(u,v) 為 u→vu\to vu→v 的簡單路徑上的邊權和. 找到一個節點 uuu&#xff0c;使得 W∑i1ndist?(u,i)32aiW\sum\limits_{i1}^n…