|
|
| 第74行： |
第74行： |
| | | |
| <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;"> | | <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;"> |
| <h3>CSS动画与变换</h3> | | |
| <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
| |
| <div class="hover-demo" style="width: 100px; height: 100px; background: #007bff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin: 10px; transition: all 0.3s ease;">
| |
| 悬停效果
| |
| </div>
| |
|
| |
| <div class="pulse-demo" style="width: 100px; height: 100px; background: #6f42c1; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; margin: 10px;">
| |
| 脉动动画
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | | |
| <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;"> | | <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;"> |
| 第95行： |
第85行： |
| </div> | | </div> |
| | | |
| <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
| |
| <h3>高级表单元素</h3>
| |
| <div style="background: #e9ecef; padding: 15px; border-radius: 8px;">
| |
| <label for="demo-range">范围滑块:</label>
| |
| <input type="range" id="demo-range" min="0" max="100" style="width: 100%;">
| |
|
| |
| <label for="demo-color" style="display: block; margin-top: 15px;">颜色选择器:</label>
| |
| <input type="color" id="demo-color" value="#ff0000" style="width: 100%; height: 40px;">
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
|
| <!-- 右侧：解析器函数展示 --> | | <!-- 右侧：解析器函数展示 --> |
| 第165行： |
第144行： |
| </div> | | </div> |
|
| |
|
| <!-- 底部信息区 -->
| | |
| <div style="background: #343a40; color: white; padding: 20px; border-radius: 0 0 15px 15px; margin-top: 20px; text-align: center;">
| |
| <h3>技术统计</h3>
| |
| <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
| |
| <div style="margin: 10px;">
| |
| <div style="font-size: 2em; font-weight: bold;">{{#expr: {{CURRENTHOUR}}*60 + {{CURRENTMINUTE}}}}</div>
| |
| <div>今日已过分钟数</div>
| |
| </div>
| |
| <div style="margin: 10px;">
| |
| <div style="font-size: 2em; font-weight: bold;">{{#time: z}}</div>
| |
| <div>年内第几天</div>
| |
| </div>
| |
| <div style="margin: 10px;">
| |
| <div style="font-size: 2em; font-weight: bold;">{{CURRENTTIMESTAMP}}</div>
| |
| <div>当前时间戳</div>
| |
| </div>
| |
| </div>
| |
| | | |
| <div style="margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px;"> | | <div style="margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px;"> |
示例模板A - 技术展示
这是一个展示MediaWiki所有核心技术的综合性演示模板。
使用方法
{{示例模板A}}
{{示例模板A|参数1|参数2|red}}
参数说明
- 参数1
- 任意文本 - 用于演示条件判断和参数使用
- 参数2
- 任意文本 - 用于演示比较和条件判断
- 参数3
- 可选值: red, blue, green - 用于演示switch函数和主题切换
技术特性
此模板展示了以下MediaWiki技术:
- Wikitext标记语言
- HTML5语义化标签
- CSS3样式和动画
- 解析器函数和逻辑操作
- 响应式网页设计
- 魔术字和变量使用
