|
|
| （未显示同一用户的59个中间版本） |
| 第1行： |
第1行： |
| <div class="tooltip-wrapper"> | | Create a horizontal layout with flexible boxes: |
| {{{1|[[File:真.时间漩涡.png]]静态悬停}}}
| | <div style="display: flex; gap: 10px; margin: 10px 0;"> |
| <div class="tooltip-content">{{{2|[[File:弹蛋蛋3.gif]]}}}</div> | | <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 1</div> |
| | <div style=" flex: 1; padding: 10px; background: #f0f0f0; border- radius: 5px;"> Box 2</div> |
| </div> | | </div> |
| <div class="tooltip-wrapper"> | | |
| {{{1|[[File:真.时间漩涡.png]]静态悬停}}}
| | Items wrap on smaller screens and have a minimum width: |
| <div class="tooltip-content">{{{2|[[File:真.时间漩涡.png]]我是CEO本体是丁真<br>国服老大哈哈哈从S6玩到S11<br>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵}}}</div> | | <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> |
| | <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 1</div> |
| | <div style=" flex: 1 1 250px; padding: 15px; background: #e3f2fd;"> Item 2< /div> |
| | <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 3</div> |
| </div> | | </div> |
|
| |
|
| <span class="dynamic-tooltip" data-tooltip="我是CEO本体是丁真国服老大哈哈哈从S6玩到S11呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵">[[File:真.时间漩涡.png]]可移动动态悬停</span>
| | Use flex-direction: column for vertical alignment: |
| | | <div style="display: flex; flex-direction: column; gap: 8px; max-width: 300px;"> |
| <div class="tooltip-wrapper">[[File:德鲁伊profile.png]]
| | <div style="padding: 8px; background: #ffebee;">Row 1</div> |
| <div class="tooltip-content">{{{2|[[File:德鲁伊头像.png]]<br><font color=black>认得我不?</font>}}}</div></div> | | <div style="padding: 8px; background: #ffebee;">Row 2</div> |
| | | </div> |
| | |
| <span class="d2-red" style="background-color: #ffeb3b; padding: 2px 5px;">高亮文本</span>
| |
| | |
| 123321
| |
| | |
| {| class="wikitable"
| |
| ! 标题1
| |
| ! 标题2
| |
| ! 标题3
| |
| |-
| |
| | style="background-color: #ffeb3b; padding: 8px;" | 黄色单元格
| |
| | style="background-color: #e3f2fd;" | 蓝色单元格
| |
| | style="background-color: red" | 测试单元格
| |
| |-
| |
| | style="background: linear-gradient(90deg, #ff9a9e, #fad0c4);" | 渐变色单元格
| |
| | style="background-color: #c8e6c9; border: 2px solid #4caf50;" | 带边框的单元格
| |
| | 单元格
| |
| |}
| |
| | |
| {| class="wikitable" style="background-color: #c8e6c9; border: 2px solid #4caf50;"
| |
| ! 标题1
| |
| ! 标题2
| |
| ! 标题3
| |
| |-
| |
| | 黄色单元格
| |
| | 蓝色单元格
| |
| | 测试单元格
| |
| |-
| |
| | 渐变色单元格
| |
| | 带边框的单元格
| |
| | 单元格
| |
| |}
| |
| | |
| {{InputBox
| |
| | type = password
| |
| | placeholder = 输入密码
| |
| | style = width: 200px; border-radius: 4px;
| |
| }}
| |
| | |
| omod = <span class=omod>omod</span><br>
| |
| nmod = <span class=nmod>nmod</span><br>
| |
| emphasis = <span class=emphasis>emphasis</span><br>
| |
| nodrop = <span class=nodrop>nodrop</span><br>
| |
|
| |
|
| <div class="dropdown"> | | Center-align items vertically and horizontally: |
| <span>悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开悬停展开</span>
| | <div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px dashed #ccc;"> |
| <div class="dropdown-content"> | | <div> Centered Content</div> |
| {{#lsth:RWWeapons|力量 Strength}}
| |
| </div> | |
| </div> | | </div> |
|
| |
|
| | | Create a reusable template (e.g., Template:FlexContainer): |
| <div class="custom-dropdown"> | | <includeonly> |
| {{Clickable button 2|Test|点击展开}} | | <div style="display: flex; gap: {{{gap|10px}}}; flex-wrap: {{{wrap|nowrap}}}; margin: {{{margin|10px 0}}};"> |
| <div class="dropdown-content" style="display:none;">
| | {{{1}}} |
| <p>[[链接1]]</p>
| |
| <p>[[链接2]]</p>
| |
| </div>
| |
| </div> | | </div> |
| | </includeonly> |
|
| |
|
| | | Usage in a page: |
| {{red|模板红色字体}}<br> | | {{FlexContainer|wrap=wrap|gap=20px| |
| | <div style="flex: 1;">A</div> |
| | <div style="flex: 1;">B</div> |
| | }} |