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;
|
|||
|
}
|
|||
|
}
|