|
}
/* 软件信息表格的整体样式主容器 */
.software-info {
display: flex;
width: auto; /* 自适应宽度,根据内容决定 */
flex-direction: column; /* 默认移动端纵向 */
border-collapse: collapse; /* 合并表格边框,避免多重边框 */
align-items: center; /* 垂直居中对齐 */ ▼
gap: 10px; /* 每个分类块之间的间距 */
}
/* 软件信息分类(桌面端横向排列) */
/* LOGO 单元格样式 */
@media (min-width: 768px) {
.software-info-logo {
width: 300px; /* 设置LOGO区域宽度 */
height flex-direction: 300pxrow; /* 设置LOGO区域高度桌面端横向排列 */
text flex-alignwrap: centerwrap; /* 文字居中对齐超出屏幕时换行 */
justify-content: center; /* 水平居中对齐 */▼
vertical-align: middle; /* 垂直居中对齐 */
}
}
.software-info- no-imagesection { ▼
/* 无 LOGO 时的占位内容样式 */
flex: 1; /* 让每个分类块等宽 */
▲.software-info-no-image {
display min-width: flex200px; /* 使用flex布局,使避免内容居中太窄 */
}
▲ justify-content: center; /* 水平居中对齐 */
▲ align-items: center; /* 垂直居中对齐 */
width: 300px; /* 设置占位区宽度 */
height: 300px; /* 设置占位区高度 */
font-size: 14px; /* 字体大小 */
color: #888; /* 字体颜色,设置为淡灰色,确保内容不突兀 */
background-color: #f5f5f5; /* 背景色设置为淡灰色,突出显示占位内容 */
border: 1px dashed #ccc; /* 虚线边框,便于区分与其他内容 */
}
/* 表头单元格(标题行)的样式 */
.software-info-section thtable {
backgroundwidth: #f2f2f2100%; /* 背景颜色浅灰色,区分让表头与其他部格填充分类块 */
border-collapse: collapse;
text-align: left; /* 表头文字左对齐 */
padding: 8px; /* 增加内边距,提高可读性 */
}
/* 分类标题(合并行)样式,居中并带背景色 */
.software-info-categorysection table caption {
font-weight: bold;
text-align: center; /* 文字居中对齐 */
background: #e6e6e6; /* 背景色浅灰色 */
padding: 5px;
font-weight: bold; /* 加粗字体,使其作为类别标题更突出 */
}
/* 所有单元格的样式 */
.software-info-section th,
.software-info-section td {
border: 1px solid #cccvar(--mw-border-color); /* 为单元格添加边框,颜色为浅灰色 */
padding: 8px; /* 增加内边距,使内容更清晰 */
}
|