info-page-static/css/index.bak.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;  
    }  
}