commit db553270ea6b6b14e9edfa5951ffc0d649a07902
Author: xrilang <2952458479@qq.com>
Date: Sat Aug 3 21:48:13 2024 +0800
first commit
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a7ae2f2
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+@萌狼蓝天
\ No newline at end of file
diff --git a/config/index.yaml b/config/index.yaml
new file mode 100644
index 0000000..fc709ef
--- /dev/null
+++ b/config/index.yaml
@@ -0,0 +1,21 @@
+# config/index.yaml
+
+# 网站标题 - 显示在浏览器标签栏中
+title: "个人介绍"
+# 网站图标
+ico: https://q2.qlogo.cn/g?b=qq&nk=2952458479&s=100
+
+# 背景设置
+# 参数支持:
+# 图片: img
+# 颜色: color
+# 渐变颜色: color-cg
+background:
+ # 背景类型
+ bgType: color
+ # 如果背景类型为 img，则填写图片路径
+ bgImg: https://www.dmoe.cc/random.php
+ # 如果背景类型为 color，则填写颜色值（例如：#ffffff）
+ bgColor: "#DDE3F1"
+ # 如果背景类型为 color-cg，则填写渐变颜色值（例如：linear-gradient(135deg, #f2c3fb 0%, #a65df0 100%)）
+ bgColorCg: "linear-gradient(135deg, #f2c3fb 0%, #a65df0 100%)"
\ No newline at end of file
diff --git a/css/index.bak.css b/css/index.bak.css
new file mode 100644
index 0000000..bf6911d
--- /dev/null
+++ b/css/index.bak.css
@@ -0,0 +1,219 @@
+/*
+这个文件不生效，只是备份一些测试样式在这里罢了
+*/
+
+/* v3 */
+
+/* 通用样式，现在使用 Flexbox 而不是 Grid */
+.grid-container {
+ display: flex;
+ flex-wrap: wrap; /* 允许子项换行 */
+ gap: 1em; /* 格子之间的间距 */
+ /* width: 100%; */
+ height: auto; /* 如果需要，可以调整为 auto 或其他值 */
+ /* 为网格项提供一些空间以避免紧贴边缘 */
+ /* padding: 0.5em; */
+ justify-content: center; /* 或者 center，根据你的需要调整 */
+ align-items: center; /* flex-start 或者 stretch/center/flex-end，根据你的需要调整 */
+}
+
+.box_width {
+ display: flex;
+ width: 90%;
+
+ margin: 1em auto;
+ min-height: 400px;
+ align-items: center; /* 垂直居中 */
+ justify-content: space-between; /* 水平分布 */
+ padding: 0.5em; /* 为盒子提供一些空间以避免紧贴边缘 */
+ box-sizing: border-box;
+}
+
+.box_mini {
+ /* 盒子样式，主要是大小自适应的问题 */
+ background-color: #f0f0f0; /* 盒子背景色，可根据需要调整 */
+ padding: 0.5em;
+ box-sizing: border-box;
+
+ /* 使用百分比宽度，但设置 max-width 以限制最大宽度 */
+ /* 假设你想每行放 3 个 box，减去间隙 */
+ width: calc(33.333% - 1em);
+ max-width: 375px; /* 最大宽度限制 */
+ min-width: 300px; /* 最小宽度限制 */
+ min-height: 350px;
+}
+
+/* 媒体查询示例，针对手机和小屏幕设备 */
+@media (max-width: 768px) {
+ .box_mini,.box_width {
+ /* 在小屏幕上，你可能想要每个 box 占据整行 */
+ width: calc(100% - 1em); /* 减去间隙 */
+ min-height: 300px; /* 可选：调整小屏幕上的最小高度 */
+ }
+}
+
+/* 对于更大的屏幕，你也可以添加媒体查询来进一步调整样式 */
+@media (min-width: 768px) {
+ .box_width{
+ /* padding: 0.5em; */
+ }
+
+ .box_mini {
+ /* 在大屏幕上的样式调整 */
+ /* padding: 0.5em; */
+ /* 注意：如果你在这里改变了 padding，可能也需要调整 width 的 calc 值 */
+ }
+}
+
+
+/** v2 **/
+
+
+body, html {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ /* overflow: hidden; */
+}
+
+/* 应用背景 */
+body {
+ background: var(--bg-color);
+ background-image: var(--bg-image);
+ background-size: cover;
+ background-position: center;
+}
+
+
+
+/* 通用样式，现在使用 Flexbox 而不是 Grid */
+.grid-container {
+ display: flex;
+ flex-wrap: wrap; /* 允许子项换行 */
+ gap: 1em; /* 格子之间的间距 */
+ /* width: 100%; */
+ height:auto; /* 如果需要，可以调整为 auto 或其他值 */
+ padding: 0.5em; /* 为网格项提供一些空间以避免紧贴边缘 */
+ justify-content: center; /* 或者 center，根据你的需要调整 */
+ align-items: center; /* flex-star或者 stretch/center/flex-end，根据你的需要调整 */
+}
+.box_width{
+ display: flex;
+ width: 90%; /* 占据整个容器的宽度 */
+ margin: auto;
+ max-width: 1140px;
+ min-height: 400px;
+ align-items: center; /* 垂直居中 */
+ justify-content: space-between; /* 水平分布 */
+ padding: 0.5em; /* 为盒子提供一些空间以避免紧贴边缘 */
+}
+.box_mini {
+ /* 盒子样式，主要是大小自适应的问题 */
+ background-color: #f0f0f0; /* 盒子背景色，可根据需要调整 */
+ padding: 0.5em;
+ box-sizing: border-box;
+
+ /* 使用百分比宽度，但设置 max-width 以限制最大宽度 */
+ /* 假设你想每行放 3 个 box，减去间隙 */
+ width: calc(33.333% - 1em);
+ max-width: 375px; /* 最大宽度限制 */
+ min-width: 300px; /* 最小宽度限制 */
+ min-height: 350px;
+
+ /* 注意：这里使用 calc 来计算宽度时，需要考虑到 gap 的影响。
+ 但是，由于 gap 是在项目之间添加的，并且不是项目本身的一部分，
+ 所以上面的 calc 可能需要根据你的具体布局进行调整。
+ 更简单的方法是直接设置 width 为百分比，并通过媒体查询来调整不同屏幕尺寸下的宽度。
+ */
+}
+
+/* 媒体查询示例，针对手机和小屏幕设备 */
+@media (max-width: 768px) {
+ .box_mini {
+ /* 在小屏幕上，你可能想要每个 box 占据整行 */
+ width: calc(100% - 1em); /* 减去间隙 */
+ min-height: 300px; /* 可选：调整小屏幕上的最小高度 */
+ }
+}
+
+/* 对于更大的屏幕，你也可以添加媒体查询来进一步调整样式 */
+@media (min-width: 1200px) {
+ .box_mini {
+ /* 在大屏幕上的样式调整 */
+ padding: 0.5em;
+ /* 注意：如果你在这里改变了 padding，可能也需要调整 width 的 calc 值 */
+ }
+}
+
+
+/*阴影效果*/
+.shadow {
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 水平和垂直偏移量，模糊半径，和颜色 */
+}
+/*背景模糊*/
+.mh {
+ backdrop-filter: blur(10px); /* 模糊背后的内容 */
+ /* 为了看到模糊效果，可能需要设置背景透明 */
+ background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
+}
+/*圆角效果*/
+.round{
+ border-radius: 15px;
+}
+
+
+/** v1 **/
+
+/* 通用样式 */
+.grid-container {
+ display: grid;
+ /* 根据容器宽度自动填充列，每列至少200px宽 */
+ grid-template-columns: repeat(auto-fill, minmax(375, 1fr));
+ gap: 1em; /* 格子之间的间距 */
+ width: 100%;
+ height: 100%; /* 根据需要设置高度 */
+ min-height: 100%;
+ justify-content: center; /* 确保网格项居中 */
+ padding: 0.5em; /* 为网格项提供一些空间以避免紧贴边缘 */
+
+}
+
+
+.box{
+ /*盒子样式 主要是大小自适应的问题*/
+ /*当存在多个盒子的时候，能以瀑布流进行排列*/
+ background-color: #f0f0f0; /* 盒子背景色，可根据需要调整 */
+ /* 其他样式如padding, margin等 */
+ /* margin: 1em auto; */
+ padding: 0.5em;
+ box-sizing: border-box;
+
+ width: 90%;
+ max-width: 375px;
+ min-width: 300px;
+ min-height: 350px;
+
+
+}
+
+/* 媒体查询示例，针对手机和小屏幕设备 */
+@media (max-width: 768px) {
+ .grid-container {
+ grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); /* 在小屏幕上，每行一个box */
+ }
+ .box {
+ /* 在小屏幕上调整样式，例如减少内边距或最小高度 */
+ padding: 0.5em;
+ min-height: 300px;
+ }
+}
+
+/* 对于更大的屏幕，您也可以添加媒体查询来进一步调整样式 */
+@media (min-width: 1200px) {
+ .box {
+ /* 在大屏幕上的样式调整 */
+ padding: 1.5em;
+ min-height: 350px;
+ }
+}
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..b08ef11
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,112 @@
+body, html {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ /* overflow: hidden; */
+}
+
+/* 应用背景 */
+body {
+ background: var(--bg-color);
+ background-image: var(--bg-image);
+ background-size: cover;
+ background-position: center;
+}
+
+
+/* 阴影效果 */
+.shadow {
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 水平和垂直偏移量，模糊半径，和颜色 */
+}
+
+/* 背景模糊 */
+.mh {
+ backdrop-filter: blur(10px); /* 模糊背后的内容 */
+ /* 为了看到模糊效果，可能需要设置背景透明 */
+ background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
+}
+
+/* 圆角效果 */
+.round {
+ border-radius: 15px;
+}
+
+.container{
+ display: flex; /* 添加 Flex 容器 */
+ height: 100%;
+ min-height: 100vh;
+ flex-direction: column; /* 子元素垂直排列 */
+ justify-content: space-between; /* 顶部和底部的子元素之间留有足够的空间 */
+}
+/* 如果需要，可以为主要内容区域设置一个类名 */
+.main-content {
+ flex-grow: 1; /* 使主要内容区域扩展以填充剩余的空间 */
+}
+.header{
+ width: 90%;
+ min-width: 350px;
+ /* 调整高度以适应剩余的空间 */
+ height: 50px;
+ margin: 16px auto;
+ padding: 0.5em;
+ box-sizing: border-box;
+}
+.jianjie{
+ display: flex;
+}
+.xiangmu,.wangzhan,.gongsi{
+ display: none;
+}
+.jianjie,.xiangmu,.wangzhan,.gongsi{
+ width: 90%;
+ min-width: 350px;
+ /* 调整高度以适应剩余的空间 */
+ height: 85%;
+ margin: 16px auto;
+ padding: 0.5em;
+ box-sizing: border-box;
+ /* 添加以下样式以实现内部滚动条 */
+ overflow-y: auto; /* 当内容超过 div 高度时显示滚动条 */
+}
+footer {
+ width: 100%;
+ height: 2.5em;
+ padding: 0.5em;
+ font-size: 16px;
+ box-sizing: border-box;
+ text-align: center;
+}
+footer a{
+ outline: none;
+ color: black;
+ text-decoration: none;
+}
+footer a:hover{
+ color: rgb(62, 173, 238);
+}
+.box-profile{
+ display: flex;
+ /* margin: 1em auto; */
+ align-items: center; /* 垂直居中 */
+ height: 100px;
+}
+.profile{
+ margin-left: 1em;
+ width: 50px;
+ height: 50px;
+ border-radius: 50px;
+}
+.profile-about{
+ margin: 0;
+ padding: 0;
+}
+.profile-name{
+ font-size:20px;
+ margin: 0;
+ font-weight: bold;
+}
+.profile-text{
+ margin-left: 0.5em;
+
+}
\ No newline at end of file
diff --git a/css/menu.css b/css/menu.css
new file mode 100644
index 0000000..1c7ed76
--- /dev/null
+++ b/css/menu.css
@@ -0,0 +1,41 @@
+.menu-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+.menu {
+ border-radius: 5px;
+ padding: 6px 10px;
+ /* border: 1px solid rgba(0, 0, 0, 0.5); */
+ color:white;
+ background-color: rgba(0, 0, 0, 0.8);
+ cursor: pointer;
+}
+.menu:hover{
+ color:rgba(0, 0, 0, 0.8);
+ background-color: rgba(255, 255, 255, 0.8);
+}
+/* 响应式设计 - 当屏幕宽度小于等于 768px 时，隐藏菜单并显示折叠按钮 */
+@media (max-width: 768px) {
+ /* .menu-container {
+ display: none;
+ }
+ */
+
+ .menu-icon {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ width: 30px;
+ height: 20px;
+ cursor: pointer;
+ }
+
+ /* .menu-icon span {
+ display: block;
+ width: 100%;
+ height: 2px;
+ background-color: black;
+ } */
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..eac2e4d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,101 @@
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+2
+
+
+3
+
+
+4
+
+
+
+
+
+
+