https://sls.wiki/index.php?action=history&feed=atom&title=MediaWiki%3AGadget-Timeline.css 2026-05-30T20:27:42Z 本wiki上该页面的版本历史 MediaWiki 1.43.0 https://sls.wiki/index.php?title=MediaWiki:Gadget-Timeline.css&diff=2143&oldid=prev 2023-01-20T11:00:37Z

<p>创建页面，内容为“.tbui-timeline-container { margin: 0 auto; width: 100%; max-width: 768px; } .tbui-timeline-container::after { <span class="autocomment">clear：​</span> clear: both; display: table; content: &#039;&#039;; } .tbui-timeline { position: relative; <span class="autocomment">外层容器的上下外边距和内边距：​</span> margin-top: 2em; margin-bottom: 2em; padding: 2em 0; } .tbui-timeline::before { <span class="autocomment">时间线主体（竖线）：​</span> position: absolute; top: 0; left: 18px; height: 100%; content: &#039;&#039;; /*配置…”</p> <p><b>新页面</b></p><div>.tbui-timeline-container {<br /> margin: 0 auto;<br /> width: 100%;<br /> max-width: 768px;<br /> }<br /> <br /> .tbui-timeline-container::after {<br /> /* clear */<br /> clear: both;<br /> display: table;<br /> content: &#039;&#039;;<br /> }<br /> .tbui-timeline {<br /> position: relative;<br /> /*外层容器的上下外边距和内边距*/<br /> margin-top: 2em;<br /> margin-bottom: 2em;<br /> padding: 2em 0;<br /> }<br /> <br /> .tbui-timeline::before {<br /> /* 时间线主体（竖线） */<br /> position: absolute;<br /> top: 0;<br /> left: 18px;<br /> height: 100%;<br /> content: &#039;&#039;;<br /> /*配置主体时间线的宽度和颜色。*/<br /> background: #cccccc;<br /> width: 4px;<br /> <br /> }<br /> <br /> @media only screen and (min-width: 768px) {<br /> /*双侧布局修正*/<br /> .tbui-timeline::before {<br /> left: 50%;<br /> margin-left: -2px;<br /> }<br /> }<br /> <br /> .tbui-timeline-item {<br /> position: relative;<br /> /*单个节点容器的外边距*/<br /> margin: 2em 0;<br /> }<br /> <br /> .tbui-timeline-item:after {<br /> clear: both;<br /> display: table;<br /> content: &quot;&quot;;<br /> }<br /> <br /> .tbui-timeline-item:first-child {<br /> margin-top: 0;<br /> }<br /> <br /> .tbui-timeline-item:last-child {<br /> margin-bottom: 0;<br /> }<br /> .tbui-timeline-node {<br /> position: absolute;<br /> /*时间线上圆点的样式（窄屏）*/<br /> top: 12px;<br /> left: 10px;<br /> width: 20px;<br /> height: 20px;<br /> border-radius: 50%;<br /> background: #cccccc;<br /> box-shadow: 0 0 0 2px #333333;<br /> color: #333333;<br /> vertical-align: middle;<br /> text-align: center;<br /> font-size: 14px;<br /> line-height: 20px;<br /> }<br /> <br /> @media only screen and (min-width: 768px) {<br /> .tbui-timeline-node {<br /> left: 50%;<br /> margin-left: -10px;<br /> /*时间线上圆点的样式（宽屏）*/<br /> top:5px;<br /> }<br /> }<br /> .tbui-timeline-content .tbui-timeline-more, .tbui-timeline-content .tbui-timeline-date {<br /> display: inline-block;<br /> }<br /> .tbui-timeline-content {<br /> position: relative;<br /> /*内容区域（窄屏）*/<br /> margin-left: 60px;<br /> padding: 1em;<br /> border:1px solid #CCCCCC;<br /> background: #f7f7f9;<br /> }<br /> .tbui-timeline-content:after {<br /> clear: both;<br /> display: table;<br /> content: &quot;&quot;;<br /> }<br /> <br /> <br /> .tbui-timeline-content::before {<br /> position: absolute;<br /> top: 16px;<br /> right: 100%;<br /> width: 0;<br /> height: 0;<br /> border: 7px solid transparent;<br /> border-right: 7px solid #CCCCCC;<br /> content: &#039;&#039;;<br /> }<br /> <br /> .tbui-timeline-content .tbui-timeline-title {<br /> display: block;<br /> /*内容标题*/<br /> margin: 0 0 10px;<br /> border-left: 6px solid #428bca;<br /> color: #333333;<br /> text-indent: 0.4em;<br /> font-size: 18px;<br /> line-height: 18px;<br /> }<br /> .tbui-timeline-content .tbui-timeline-date {<br /> float: left;<br /> /*日期样式*/<br /> padding: .8em 0 .4em;<br /> color: #666666;<br /> }<br /> @media only screen and (min-width: 768px) {<br /> .tbui-timeline-content {<br /> margin-left: 0;<br /> padding: 1em;<br /> width: 45%;<br /> }<br /> .tbui-timeline-content::before {<br /> top: 8px;<br /> left: 100%;<br /> border-color: transparent;<br /> /*内容框体尖角颜色*/<br /> border-left-color: #e1e1e8;<br /> }<br /> .tbui-timeline-content .tbui-timeline-date {<br /> /*在宽屏下使日期飞出框架*/<br /> position: absolute;<br /> top: 4px;<br /> left: 122%;<br /> padding: 0;<br /> width: 100%;<br /> font-size: 16px;<br /> }<br /> /*宽屏下按奇偶数左右排列*/<br /> .tbui-timeline-item:nth-child(even) .tbui-timeline-content {<br /> float: right;<br /> }<br /> .tbui-timeline-item:nth-child(even) .tbui-timeline-content::before {<br /> top: 8px;<br /> right: 100%;<br /> left: auto;<br /> border-color: transparent;<br /> /*内容框体尖角颜色*/<br /> border-right-color: #CCCCCC;<br /> }<br /> .tbui-timeline-item:nth-child(even) .tbui-timeline-content .tbui-timeline-date {<br /> right: 122%;<br /> left: auto;<br /> text-align: right;<br /> }<br /> }</div>

Kesager