设计 【更新至2.0】MediaWiki 导航栏代码，CSS样式设计与分享

终于知道MediaWiki语法{{#if}}了哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
咳咳(这是1.0，2.0请看三楼)
先上CSS

            /*导航栏一般样式*/
      
        ul.tab {
          list-style-type: none;
          margin: 0 auto;
          padding: 0;
          overflow: hidden;
          border: 1px solid #e7e7e7;
          background-color: #f3f3f3;
          display:table;
          text-align:center;
        }
        ul.tab li {float: left;}
        ul.tab li a {
          display: block;
          color: #666;
          text-align: center;
          padding: 5px 16px;
          text-decoration: none;transition-duration: .4s;
        }
        /*鼠标移上去之后的样式*/
        ul.tab li a:hover {background-color: #c5c5c5;}
        /*MediaWiki会自动给当前页面的链接(写在[[]]内的)一个<strong>，这里利用了这一点*/
        ul.tab li strong {
          display: block;
          color: #666;
          text-align: center;
          padding: 5px 16px;
          text-decoration: none;
          color: white;
          background-color: #3b446c;
        }

在普通页面可以插入

<ul class="tab">
    <li>[[(写上链接内容，按正常格式)]]</li>
    <li>[[(写上链接内容，按正常格式)]]</li>
    <!--可以复制多个<li>啥的-->
</ul>

最重要的东西：模板!（怎能只在普通页面罢休呢，当然，可以只止步于上面）
Ps:这些内容需要在名字空间为"Template: "下面写入。

<noinclude>
{{Tab|[[Template:Tab|主页面]]|[[Template:Tab/图片册|图片册]]|[[Template:Tab/其他|其他]]}}
</noinclude>
<includeonly>
<ul class="tab">
    {{#if: {{{1|}}} | <li>{{{1}}}</li> | }}
    {{#if: {{{2|}}} | <li>{{{2}}}</li> | }}
    {{#if: {{{3|}}} | <li>{{{3}}}</li> | }}
    {{#if: {{{4|}}} | <li>{{{4}}}</li> | }}
    {{#if: {{{5|}}} | <li>{{{5}}}</li> | }}
    {{#if: {{{6|}}} | <li>{{{6}}}</li> | }}
    {{#if: {{{7|}}} | <li>{{{7}}}</li> | }}
    {{#if: {{{8|}}} | <li>{{{8}}}</li> | }}
    {{#if: {{{9|}}} | <li>{{{9}}}</li> | }}
    {{#if: {{{10|}}} | <li>{{{10}}}</li> | }}
</ul>
</includeonly>

很好，接下来到普通页面引入就行

{{Tab|[[Template:Tab|主页面]]|[[Template:Tab/图片册|图片册]]|[[Template:Tab/其他|其他]]}}
<!--还可以继续写，最多10个-->

 

[Sonicth0623]

本来想修改一下，输的太彻底啦！！！！！！！！！！！！！！！！！！！！！

 

[Sonicth0623]

2.0新版模板!(当然，得先把CSS样式复制了)
特色:优化易用性

<includeonly>
<ul class="tab">
        <li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}|主页面]]</li>
        {{#if: {{{1|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{1}}}|{{{1}}}]]</li> | }}
        {{#if: {{{2|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{2}}}|{{{2}}}]]</li> | }}
        {{#if: {{{3|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{3}}}|{{{3}}}]]</li> | }}
        {{#if: {{{4|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{4}}}|{{{4}}}]]</li> | }}
        {{#if: {{{5|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{5}}}|{{{5}}}]]</li> | }}
        {{#if: {{{6|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{6}}}|{{{6}}}]]</li> | }}
        {{#if: {{{7|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{7}}}|{{{7}}}]]</li> | }}
        {{#if: {{{8|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{8}}}|{{{8}}}]]</li> | }}
        {{#if: {{{9|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{9}}}|{{{9}}}]]</li> | }}
        {{#if: {{{10|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{10}}}|{{{10}}}]]</li> | }}
</ul>
</includeonly>

以后引用只要这样——

{{Tab|图片册}}
<!--最多10个，按{{Tab|1|2|3|。。。。。。}}格式-->

 

[Sonicth0623]

效果如下