The editors' meeting has been canceled for technical reasons.
直播记录/styles.css:修订间差异
< 直播记录
小无编辑摘要 标签:移动版编辑 移动版网页编辑 |
无编辑摘要 标签:移动版编辑 移动版网页编辑 |
||
第109行: | 第109行: | ||
/* 表格页通用样式 */ | /* 表格页通用样式 */ | ||
@media only screen and (max-width: 768px) { | |||
@media screen | /* 表格宽度自适应屏幕 */ | ||
table { | table { | ||
width: 100%; /* 表格宽度填充屏幕 */ | |||
border-collapse: collapse; /* 合并边框 */ | |||
min-width: 100%; /* 确保表格不会小于屏幕 */ | |||
} | } | ||
/* 单元格样式 */ | |||
th, td { | |||
word-wrap: break-word; /* 长单词换行 */ | |||
white-space: normal; /* 允许文字换行 */ | |||
font-size: calc(10px + 0.5vw); /* 根据屏幕宽度动态调整字体大小 */ | |||
padding: 6px; /* 减少内边距以适配小屏幕 */ | |||
text-align: left; /* 文本左对齐 */ | |||
} | } | ||
/* 表头样式 */ | |||
th { | |||
background-color: #f2f2f2; /* 给表头加背景色 */ | |||
font-weight: bold; /* 表头加粗 */ | |||
} | } | ||
/* 表格容器,增加滚动支持 */ | |||
.table-wrapper { | |||
overflow-x: auto; /* 启用横向滚动 */ | |||
} | } | ||
} | } |
2024年12月3日 (二) 11:46的版本
.title_block{ padding: 2px; padding-left: 8px; background-color: #9147ff; display: flex; box-shadow: 0 2px 5px #aaa; height: 32px; align-items: center; color: #fff; } /* 父容器样式 */ .base_block { border: 2px outset #9147ff; background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 5px #aaa; display: flex; justify-content: space-between; /* 确保子元素均匀分布 */ flex-wrap: wrap; /* 允许子元素换行 */ padding: 15px; gap: 10px; /* 子元素之间的间距 */ } /* 子元素样式 */ .item { flex: 1 1 20%; /* 每行最多 4 个子元素 */ max-width: 360px; /* 最大宽度 */ min-width: 290px; /* 最小宽度 */ height: 124px; padding: 0; display: flex; box-shadow: 0 2px 5px #aaa; transition: all 0.3s ease-in-out; overflow: hidden; position: relative; margin: 3px; } .item1{ background-color: rgba(145, 71, 255, 0.8); } .item2{ background-color: rgba(255, 50, 80, 0.8); } .item3{ background-color: rgba(50, 100, 255, 0.8); } .item4{ background-color: rgba(255, 220, 50, 0.8); } .item5{ background-color: rgba(50, 255, 150, 0.8); } .item6{ background-color: rgba(50, 230, 255, 0.8); } .item7{ background-color: rgba(120, 120, 120, 0.8); } .item > a{ position: relative; display: flex; width: 100%; height: 100%; justify-content: right; align-items: flex-end; font-size: 42px; color: #ffffff; transition: all 0.3s ease-in-out; padding-right:0; text-decoration: none; } .item:hover > a{ padding-right:26px; text-decoration: none; } a > .long{ max-width:90%; font-size: 24px; text-align: right; } .item:hover{ background-color: rgba(0, 0, 0, 0.6); } .item > .img{ position: absolute; mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); transition: all 1.3s ease-in-out; } .item:hover > .img{ mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } @media screen and (max-width: 1770px) { .base_block { padding-left:15px; padding-right:15px; } .item7{ max-width:100%; } } @media screen and (min-width: 1770px) { .base_block { padding-left:250px; padding-right:250px; } .item7{ max-width:46.5%; } } /* 表格页通用样式 */ @media only screen and (max-width: 768px) { /* 表格宽度自适应屏幕 */ table { width: 100%; /* 表格宽度填充屏幕 */ border-collapse: collapse; /* 合并边框 */ min-width: 100%; /* 确保表格不会小于屏幕 */ } /* 单元格样式 */ th, td { word-wrap: break-word; /* 长单词换行 */ white-space: normal; /* 允许文字换行 */ font-size: calc(10px + 0.5vw); /* 根据屏幕宽度动态调整字体大小 */ padding: 6px; /* 减少内边距以适配小屏幕 */ text-align: left; /* 文本左对齐 */ } /* 表头样式 */ th { background-color: #f2f2f2; /* 给表头加背景色 */ font-weight: bold; /* 表头加粗 */ } /* 表格容器,增加滚动支持 */ .table-wrapper { overflow-x: auto; /* 启用横向滚动 */ } }