模板:Test/styles.css:修订间差异
外观
< 模板:Test
创建页面,内容为“.tabs-container .tabs-pages { margin: 0; padding: 0; display: flex; list-style: none; } .tabs-container .tab { padding: 0.5em 1em; cursor: pointer; border: 1px solid #ccc; background: #f8f9fa; margin-right: 2px; } .tabs-container .tab.active { background: #fff; border-bottom-color: transparent; z-index: 2; } .tabs-container .tabs-contents { border: 1px solid #ccc; margin-top: -1px; padding: 1em; } .tab…” |
小无编辑摘要 |
||
| 第1行: | 第1行: | ||
.tabs-container | /* 分页tabs */ | ||
.tabs-container { | |||
width: 100%; | |||
margin-bottom: 20px; | |||
} | } | ||
.tabs- | |||
.tabs-pages { | |||
display: flex; | |||
list-style: none !important; | |||
background-color: #e2e9f6; | |||
border-radius: 4px; | |||
padding: 0; | |||
} | } | ||
.tab { | |||
padding: 0.5em 1em; | |||
color: #244786; | |||
font-size: 16px; | |||
margin: 0 0 0 1em; | |||
transition: background-color 0.2s; | |||
} | } | ||
. | |||
.tab:focus, | |||
.tab:hover { | |||
cursor: pointer; | |||
background-color: #a4c2f8; | |||
} | } | ||
. | |||
.tab.active { | |||
background-color: #c3d8fc; | |||
} | } | ||
.tabs- | |||
.tabs-contents { | |||
width: 100%; | |||
height: auto; | |||
} | |||
.tab-c { | |||
display: none; | |||
width: 100%; | |||
height: auto; | |||
} | |||
.tab-c.active { | |||
display: block; | |||
} | |||
.inner-content { | |||
padding: .5em; | |||
column-count: 3; | |||
border: solid #e2e9f6; | |||
border-radius: 0 0 4px 4px; | |||
border-width: 0 3px 3px; | |||
} | } | ||
2026年1月27日 (二) 03:57的版本
/* 分页tabs */
.tabs-container {
width: 100%;
margin-bottom: 20px;
}
.tabs-pages {
display: flex;
list-style: none !important;
background-color: #e2e9f6;
border-radius: 4px;
padding: 0;
}
.tab {
padding: 0.5em 1em;
color: #244786;
font-size: 16px;
margin: 0 0 0 1em;
transition: background-color 0.2s;
}
.tab:focus,
.tab:hover {
cursor: pointer;
background-color: #a4c2f8;
}
.tab.active {
background-color: #c3d8fc;
}
.tabs-contents {
width: 100%;
height: auto;
}
.tab-c {
display: none;
width: 100%;
height: auto;
}
.tab-c.active {
display: block;
}
.inner-content {
padding: .5em;
column-count: 3;
border: solid #e2e9f6;
border-radius: 0 0 4px 4px;
border-width: 0 3px 3px;
}