Skip to content

Commit 5f05bc7

Browse files
PythonnotJavaPythonnotJava
committed
Suc
0 parents  commit 5f05bc7

40 files changed

Lines changed: 17391 additions & 0 deletions

‎main.html‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<!--//网站上显示logo图标-->
4+
<link rel="shortcut icon" href="src/logo/logo.ico" type="image/x-icon">
5+
<!--//收藏用logo图标-->
6+
<link rel="bookmark" href="src/logo/logo.ico" type="image/x-icon">
7+
8+
<head>
9+
<meta charset="UTF-8">
10+
<title>A little cookie</title>
11+
<!-- 引入 Bootstrap 样式 -->
12+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
13+
<link href="src/css/main.css" rel="stylesheet">
14+
</head>
15+
16+
<body>
17+
18+
<video autoplay muted loop id="bg-video">
19+
<source src="src/logo/logo.mp4" type="video/mp4">
20+
</video>
21+
22+
<!-- 导航栏 -->
23+
<nav id="leader" class="navbar navbar-expand-lg navbar-light bg-light" style="padding-left: 110px">
24+
<a class="navbar-brand" href="https://blog.csdn.net/qq_54554848?spm=1000.2115.3001.5343" target="_blank"><img alt="" src="src/logo/title.jpg" width="100" height="100"></a>
25+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target= "#navbarNav"
26+
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
27+
<span class="navbar-toggler-icon"></span>
28+
</button>
29+
<div class="collapse navbar-collapse" id="navbarNav">
30+
<ul class="navbar-nav ml-auto">
31+
<li class="nav-item">
32+
<a class="nav-link" href="#home">首页</a>
33+
</li>
34+
<li class="nav-item">
35+
<a class="nav-link" href="#articles">文章</a>
36+
</li>
37+
<li class="nav-item">
38+
<a class="nav-link" href="#software">软件</a>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="https://space.bilibili.com/1673577344?spm_id_from=333.1007.0.0" target="_blank">
42+
<img width="80" height="80" class="ico-link" src="https://is4-ssl.mzstatic.com/image/thumb/Purple124/v4/42/c1/96/42c196db-d305-e2d9-2ae0-f3ed6c72b98e/AppIcon-1x_U007emarketing-0-6-0-0-sRGB-85-220.png/1024x1024bb.png" alt="Bilibili">
43+
</a>
44+
</li>
45+
<li class="nav-item">
46+
<a class="nav-link" href="https://gitee.com/PythonnotJava" target="_blank">
47+
<img width="80" height="80" class="ico-link" src="https://l1yp.com/img/gitee-logo_themecolor.png" alt="Gitee">
48+
</a>
49+
</li>
50+
<li class="nav-item">
51+
<a class="nav-link" href="https://www.github.com/PythonnotJava" target="_blank">
52+
<img width="80" height="80" class="ico-link" src="https://www.macobserver.com/wp-content/uploads/2019/05/workfeatured-GitHub-2.png" alt="GitHub">
53+
</a>
54+
</li>
55+
</ul>
56+
</div>
57+
</nav>
58+
59+
<!-- 主界面 -->
60+
<div id="home" class="container mt-5">
61+
<h1 id="my-blogs">PythonnotJava's Blog Platform</h1>
62+
<p id="my-blogs-about">Github开源地址 ： <a href="https://github.com/PythonnotJava">https://github.com/PythonnotJava</a></p>
63+
</div>
64+
65+
<!-- 文章区 -->
66+
<div id="articles" class="container mt-5">
67+
<h2>文章</h2>
68+
<div class="row">
69+
<!-- 文章块1 -->
70+
<div class="col-lg-4 col-md-6 mb-4">
71+
<div class="card">
72+
<img src="src/img/sjjg.png" class="card-img-top" alt="文章1封面图" width="600" height="400">
73+
<div class="card-body">
74+
<h5 class="card-title">数据结构与算法</h5>
75+
<p class="card-text">此处包含了基于C/C++实现的部分数据结构与算法模型。</p>
76+
<a href="src/index/article/Implementation_of_data%20_structures_and_algorithms.html" class="btn btn-outline-primary">阅读更多</a>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<!-- 文章块2 -->
82+
<div class="col-lg-4 col-md-6 mb-4">
83+
<div class="card">
84+
<img src="src/img/qtpy.webp" class="card-img-top" alt="文章2封面图" width="600" height="400">
85+
<div class="card-body">
86+
<h5 class="card-title">Qt for Python</h5>
87+
<p class="card-text">Qt for Python，是包含了PySide2、PySide6、PyQt5以及PyQt6的Python版主流Qt设计框架。</p>
88+
<a href="src/index/article/qt.html" class="btn btn-outline-primary">阅读更多</a>
89+
</div>
90+
</div>
91+
</div>
92+
93+
94+
<!-- 文章块3 -->
95+
<div class="col-lg-4 col-md-6 mb-4">
96+
<div class="card">
97+
<img src="src/img/idea.jpg" class="card-img-top" alt="文章3封面图" width="600" height="400">
98+
<div class="card-body">
99+
<h5 class="card-title">其他</h5>
100+
<p class="card-text">其他方面的心得以及经验分享——例如电脑知识、数据可视化等等等。</p>
101+
<a href="src/index/article/others.html" class="btn btn-outline-primary">阅读更多</a>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
<!-- 查看更多文章之弹出框-->
107+
<!--<a href="" target="_blank" class="btn btn-primary">查看更多文章</a>-->
108+
<button class="btn btn-primary" id="showPopup" onclick="showPopup()">查看更多文章</button>
109+
<div id="overlay">
110+
<div class="popup">
111+
<p class="popup_title">提示</p>
112+
<p class="popup_content">作者拼命更新中🤔🤔🤔……</p>
113+
<div class="popup_btn">
114+
<button class="cancelBtn" onclick="hidePopup()">知道了</button>
115+
<button class="confirmBtn" onclick="hidePopup()">确认</button>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
121+
<!-- 软件区 -->
122+
<div id="software" class="container mt-5">
123+
<h2>软件</h2>
124+
<div class="row">
125+
<!-- 软件块1 -->
126+
<div class="col-lg-4 col-md-6 mb-4">
127+
<div class="card">
128+
<img src="src/index/software/img/3.png" class="card-img-top" alt="文章1封面图" width="600" height="400">
129+
<div class="card-body">
130+
<h5 class="card-title">简雅Pad++</h5>
131+
<p class="card-text">简雅Pad++是一款基于Scintilla开发，用于Python入门的代码编辑器</p>
132+
<a href="src/index/software/简雅Pad++%20for%20Python.html" class="btn btn-outline-primary">了解更多</a>
133+
</div>
134+
</div>
135+
</div>
136+
<!-- 软件块2 -->
137+
<div class="col-lg-4 col-md-6 mb-4">
138+
<div class="card">
139+
<img src="src/index/software/img/4.png" class="card-img-top" alt="文章2封面图" width="600" height="400">
140+
<div class="card-body">
141+
<h5 class="card-title">WordTansfer</h5>
142+
<p class="card-text">WordTansfer是基于Pillow开发的Word转手写字图片的利器。</p>
143+
<a href="src/index/software/WordTransfer.html" class="btn btn-outline-primary">了解更多</a>
144+
</div>
145+
</div>
146+
</div>
147+
148+
<!-- 软件块3 -->
149+
<div class="col-lg-4 col-md-6 mb-4">
150+
<div class="card">
151+
<img src="src/img/more.jpg" class="card-img-top" alt="文章3封面图" width="600" height="400">
152+
<div class="card-body">
153+
<h5 class="card-title">努力更新中……</h5>
154+
<p class="card-text">作者还在努力更新技术与激发想象力与创造力中，丝毫不敢懈怠……</p>
155+
<a href="" class="btn btn-outline-primary">了解更多</a>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
<a href="#" target="_blank" class="btn btn-primary">查看更多软件</a>
161+
162+
</div>
163+
<!-- Footer -->
164+
<footer class="bg-dark text-light py-3">
165+
<div class="container text-center">
166+
<!-- <p>&copy; 2023 My Blog. All Rights Reserved. | <a href="#">隐私政策</a> | <a href="#">使用条款</a></p>-->
167+
<p>&copy; 2023 PythonnotJava's Blog. All Rights Reserved.</p>
168+
</div>
169+
</footer>
170+
<!-- Bilibili、YouTube、GitHub图标连接按钮 -->
171+
<div class="fixed-icons">
172+
<a href="#" class="icon-link"><i class="fab fa-bilibili"></i></a>
173+
<a href="#" class="icon-link"><i class="fab fa-youtube"></i></a>
174+
<a href="#" class="icon-link"><i class="fab fa-github"></i></a>
175+
</div>
176+
<!-- JavaScript部分 -->
177+
<!-- jQuery和Popper.js，可以从CDN引入或者本地引入 -->
178+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
179+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.15.0/dist/umd/popper.min.js"></script>
180+
<!-- Bootstrap JavaScript，可以从CDN引入或者本地引入 -->
181+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
182+
<!-- Font Awesome JavaScript，可以从CDN引入或者本地引入 -->
183+
<script src="https://kit.fontawesome.com/your-kits-id.js"></script>
184+
<script>
185+
function showPopup(){
186+
const overlay = document.getElementById("overlay");
187+
overlay.style.display = "block";
188+
}
189+
function hidePopup(){
190+
const overlay = document.getElementById("overlay");
191+
overlay.style.display = "none";
192+
}
193+
194+
</script>
195+
</body>
196+
</html>

‎src/css/main.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
.nav-link{
2+
font-style: normal;
3+
font-size: 48px;
4+
font-weight: bolder;
5+
text-shadow: 2px 2px 5px red;
6+
}
7+
8+
9+
#my-blogs-about{
10+
font-size: 24px;
11+
font-weight: bolder;
12+
}
13+
14+
body {
15+
background-image: url("../img/ne.jpg");
16+
background-size:100%;
17+
background-attachment: fixed
18+
}
19+
#bg-video {
20+
position: fixed;
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
object-fit: cover;
26+
z-index: -1;
27+
}
28+
29+
30+
/* 导航栏中的链接样式 */
31+
.navbar-nav .nav-link {
32+
color: red; /* 文字颜色设置为白色 */
33+
}
34+
35+
/* 导航栏中的链接悬停时的样式 */
36+
.navbar-nav .nav-link:hover {
37+
color: #eee; /* 鼠标悬停时文字颜色设置为淡白色 */
38+
}
39+
40+
#leader {
41+
background-image: linear-gradient(to right, #eeeeee, skyblue); /* 渐变色背景 */
42+
43+
}
44+
45+
.card{
46+
height: 500px;
47+
}
48+
49+
/* 遮罩层 */
50+
#overlay {
51+
position: fixed;
52+
left: 0px;
53+
top: 0px;
54+
width: 100%;
55+
height: 100%;
56+
font-size: 16px;
57+
/* IE9以下不支持rgba模式 */
58+
background-color: rgba(0, 0, 0, 0.5);
59+
/* 兼容IE8及以下 */
60+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
61+
display: none;
62+
}
63+
/* 弹出框主体 */
64+
.popup {
65+
background-color: #ffffff;
66+
max-width: 400px;
67+
min-width: 200px;
68+
height: 240px;
69+
border-radius: 5px;
70+
margin: 100px auto;
71+
text-align: center;
72+
}
73+
/* 弹出框的标题 */
74+
.popup_title {
75+
height: 60px;
76+
line-height: 60px;
77+
border-bottom: solid 1px #cccccc;
78+
}
79+
/* 弹出框的内容 */
80+
.popup_content {
81+
height: 50px;
82+
line-height: 50px;
83+
padding: 15px 20px;
84+
}
85+
/* 弹出框的按钮栏 */
86+
.popup_btn {
87+
padding-bottom: 10px;
88+
}
89+
/* 弹出框的按钮 */
90+
.popup_btn button {
91+
/*color: #778899;*/
92+
width: 40%;
93+
height: 40px;
94+
cursor: pointer;
95+
border: solid 1px #cccccc;
96+
border-radius: 5px;
97+
margin: 5px 10px;
98+
color: #ffffff;
99+
background-color: #337ab7;
100+
}
101+
102+
.ico-link{
103+
border-radius: 15px;
104+
}

0 commit comments

Comments
 (0)