模板:Navbox/styles.css:修订间差异
来自陋室
更多操作
删除的内容 添加的内容
小 测试样式 |
小 格式化代码 |
||
| 第10行: | 第10行: | ||
max-width: 800px; /* 限制最大宽度,避免过宽 */ |
max-width: 800px; /* 限制最大宽度,避免过宽 */ |
||
display: flex; /* 使用 flexbox 代替 table 布局 */ |
display: flex; /* 使用 flexbox 代替 table 布局 */ |
||
flex-direction: column; /* 使子元素垂直排列 */ |
|||
justify-content: center; /* 水平居中 */ |
justify-content: center; /* 水平居中 */ |
||
align-items: center; /* 垂直居中 */ |
align-items: center; /* 垂直居中 */ |
||
| 第19行: | 第20行: | ||
text-align: center; /* 水平居中 */ |
text-align: center; /* 水平居中 */ |
||
vertical-align: middle; /* 垂直居中 */ |
vertical-align: middle; /* 垂直居中 */ |
||
padding: |
padding: 4px 8px; /* 调整内边距,使内容不那么拥挤 */ |
||
} |
} |
||
| 第36行: | 第37行: | ||
max-width: 300px; /* 设置信息框的最大宽度 */ |
max-width: 300px; /* 设置信息框的最大宽度 */ |
||
width: 100%; /* 允许其在容器内自适应 */ |
width: 100%; /* 允许其在容器内自适应 */ |
||
margin: 0 auto; /* 使 .infobox 居中 */ |
|||
border: 1px solid #ddd; /* 添加一个轻微的边框 */ |
|||
border-radius: 8px; /* 让边框变得圆润 */ |
|||
background-color: #f9f9f9; /* 设置轻微的背景色 */ |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 为 .infobox 添加阴影效果 */ |
|||
padding: 10px; /* 增加内边距使内容不显得紧凑 */ |
|||
} |
} |
||
| 第43行: | 第50行: | ||
width: 12em; /* 增加第一列宽度 */ |
width: 12em; /* 增加第一列宽度 */ |
||
min-width: 12em; /* 确保不会缩小 */ |
min-width: 12em; /* 确保不会缩小 */ |
||
} |
|||
/* ============================= */ |
|||
/* 辅助样式(可选) */ |
|||
/* ============================= */ |
|||
/* 确保文本居中 */ |
|||
.center-text { |
|||
text-align: center; |
|||
} |
|||
/* 为链接增加悬停效果 */ |
|||
.navbox a:hover { |
|||
color: #005a99; /* 将链接颜色更改为深蓝色 */ |
|||
text-decoration: underline; /* 添加下划线效果 */ |
|||
} |
} |
||