-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
244 lines (204 loc) · 9.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 加个字体 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<title>Halfapear的个人博客</title>
<link rel="stylesheet" href="assets/index-style.css">
<!-- 引入WebSlides的CSS -->
<link rel="stylesheet" href="assets/webslides.css">
<style>
/* 为所有section添加背景封面效果 */
section {
display: flex;
justify-content: center;
align-items: center;
background-size: cover;
height: 100vh;
}
/* 字体加粗并设置颜色 */
h1 {
font-weight: bold;
color: black; /* Halfapear的个人博客的颜色 */
}
h1:not(:first-of-type), p {
font-weight: bold;
color: blue; /* 其他板块的字体颜色 */
}
/* 特定板块的字体颜色 */
.intro h1, .intro p { color: #6A5ACD; } /* 前端板块的颜色 */
.frontend h1, .frontend p { color: #1E90FF; } /* 前端板块的颜色 */
.embedded h1, .embedded p { color: #32CD32; } /* 嵌入式板块的颜色 */
.cybersecurity h1, .cybersecurity p { color: #FF4500; } /* 网安板块的颜色 */
.ai h1, .ai p { color: #fc8600; } /* 人工智能板块的颜色 */
.gaming h1, .gaming p { color: #650af7cb; } /* 游戏板块的颜色 */
.comment h1, .comment p { color: #7ebb95; } /* 评论板块的颜色（我只能改改试试看了） */
/* 调整视频背景 */
/* .video-background {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
} */
.video-background {
position: absolute;
top: 0; /* 使用top和left代替right和bottom，确保视频从左上角开始铺设 */
left: 0;
width: 100%;
height: 100%; /* ！！！成功了 视频只有左上角的问题就是这两行导致的*/
z-index: -100;
background-size: cover;
object-fit: cover; /* 添加这一行，确保视频保持宽高比并填满容器 */
}
</style>
<!-- 最新版本的jQuery 听gpt说的 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!-- 这里好像有个多出来的 -->
<!-- <div class="ws-slides"> -->
<!-- Halfapear的个人博客 -->
<!-- <section style="background: url('path/to/your/background.jpg') no-repeat center center; background-size: cover;">
<h1>Halfapear的个人博客</h1>
<div class="video-background">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="image\miyako_swimsuit.mp4" type="video/mp4">
</video>
</div>
</section> -->
<!-- <section class="aligncenter">
<video class="background-video" autoplay loop muted>
<source src="image\miyako_swimsuit.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h1>Halfapear的个人博客</h1>
</section> -->
<article id="webslides">
<section class="aligncenter">
<h1>Halfapear的个人博客</h1>
<video class="video-background" autoplay loop muted>
<source src="image/miyako_swimsuittrue.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<!-- 注释掉的代码段：
背景设置：使用background属性来设置背景图像，这是为了显示一个静态背景。然后，在这个section内部放置了一个<video>标签作为视频背景。这种方法中，视频是作为内容元素而非背景出现的。
视频定位：通过.video-background类应用的样式（假设在样式表中定义），视频被定位为占满整个section元素。这样的定位可能需要position: absolute;等样式规则来确保视频覆盖整个区域。
样式复杂性：这种方法通常需要更多的CSS规则来精确控制视频和可能的背景图片的布局和表现。
没有注释的代码段：
视频作为背景：直接使用<video>标签并应用类.background-video（假设这个类在CSS中定义了相应的样式），使得视频直接充当背景。这种方法没有使用background属性设置静态背景图像。
简化的HTML结构：不使用额外的div容器来包裹视频，从而简化了HTML结构。视频元素直接放置在section内，可能通过.background-video类控制其样式，如全屏显示、覆盖等。
易于实现和理解：对于创建全屏视频背景的需求，这种方法提供了一个更直接、可能更易于实现和维护的解决方案。 -->
<!-- 导入板块 -->
<section class="intro" style="background-image: url('image/introduce.jpg');">
<h1>简单介绍</h1>
<p>Hello 大家好</p>
<p>我是Halfapear，这是我的个人网站。 </p>
<p>很高兴你来到这里, 你可以在以下的网站找到我</p>
<ul>
<li> <a href="nothing here right now">wait</a> </li>
<li> <a href="https://space.bilibili.com/361194638/dynamic?spm_id_from=444.41.my-info.dyns.click">我的b站动态</a> </li>
</ul>
</section>
<!-- 如果您不希望在新标签页中打开 index.html，可以移除 target="_blank" 属性。-->
<!-- 前端板块 -->
<section class="frontend" style="background-image: url('image/frontend_image.jpg');">
<h1>前端</h1>
<ul>
<li> <a href="front-end.html">界面</a> </li>
</ul>
</section>
<!-- 嵌入式板块 -->
<section class="embedded" style="background-image: url('image/embedded_systems_image.jpg');">
<h1>嵌入式</h1>
<ul>
<li> <a href="">界面</a> </li>
</ul>
</section>
<!-- 网安板块 -->
<section class="cybersecurity" style="background-image: url('image/cybersecurity_image.jpg');">
<h1>网安</h1>
<ul>
<li> <a href="cybersecurity.html">界面</a> </li>
</ul>
</section>
<!-- 人工智能板块 -->
<section class="ai" style="background-image: url('image/artificial_intelligence_image.jpg');">
<h1>人工智能</h1>
<ul>
<li> <a href="">界面</a> </li>
</ul>
</section>
<!-- 游戏板块 -->
<section class="gaming" style="background-image: url('image/game_development_image.jpg');">
<h1>游戏</h1>
<ul>
<li> <a href="game.html">界面</a> </li>
</ul>
</section>
<!-- 评论区试验 -->
<section class="comment" style="background-image: url('');">
<h1></h1>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
<p>disqus挂了 没评论了QWQ</p>
<!-- 添加disqus评论功能(先删除，我觉得这是罪魁祸首，hold不住) -->
<!-- ps：这是添加延时版的（没什么用） -->
<!-- <div id="disqus_thread"></div>
<script>
setTimeout(function() {
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
*/
var disqus_config = function () {
this.page.url = 'https://halfapear.github.io/'; // 替换成你网页的 URL
this.page.identifier = '{{ page.id }}'; // 替换成页面的唯一标识符
};
// DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-halfapear-github-io.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
}, 1000); // 延迟时间可根据实际情况调整
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> -->
<a href="https://icp.gov.moe/?keyword=20250073" target="_blank">萌ICP备20250073号</a>
</section>
</article>
<!-- 网站人数记录功能 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
<!-- <p>网站总访问人数：<span id="busuanzi_value_site_uv">0</span>人</p> -->
<!-- 引入WebSlides的JS -->
<script src="assets/webslides.js"></script>
<!-- <script>
// 初始化WebSlides
new WebSlides();
</script> -->
<!-- 这个好像是我之前漏掉的（不对啊，前面有的） 它激活了WebSlides的所有功能和行为 -->
<script>
new WebSlides();
</script>
<!-- 试图解决github视频无法播放的问题，应该是给了一个js的判断 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var video = document.querySelector('.video-background');
function playVideo() {
video.play().catch(error => console.error("Video play failed:", error));
}
if (video.readyState >= 3) { // 检查视频是否已加载
playVideo();
} else {
video.addEventListener('canplay', playVideo);
}
});
</script>
</body>
</html>