220 lines
6.7 KiB
CSS
220 lines
6.7 KiB
CSS
/*
|
||
这个文件不生效，只是备份一些测试样式在这里罢了
|
||
*/
|
||
|
||
/* 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;
|
||
}
|
||
}
|