萌狼蓝天
+ 乖乖狼科技首席技术官 +From db553270ea6b6b14e9edfa5951ffc0d649a07902 Mon Sep 17 00:00:00 2001 From: xrilang <2952458479@qq.com> Date: Sat, 3 Aug 2024 21:48:13 +0800 Subject: [PATCH] first commit --- README.md | 1 + config/index.yaml | 21 ++++ css/index.bak.css | 219 ++++++++++++++++++++++++++++++++++++ css/index.css | 112 ++++++++++++++++++ css/menu.css | 41 +++++++ index.html | 101 +++++++++++++++++ script/IcoSetting.js | 7 ++ script/bacggroundSetting.js | 23 ++++ script/index.js | 0 script/log.js | 9 ++ script/menu.js | 58 ++++++++++ 11 files changed, 592 insertions(+) create mode 100644 README.md create mode 100644 config/index.yaml create mode 100644 css/index.bak.css create mode 100644 css/index.css create mode 100644 css/menu.css create mode 100644 index.html create mode 100644 script/IcoSetting.js create mode 100644 script/bacggroundSetting.js create mode 100644 script/index.js create mode 100644 script/log.js create mode 100644 script/menu.js 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 @@ + + +
+ + +萌狼蓝天
+ 乖乖狼科技首席技术官 +