Question

我觉得这个标题很有误导性......因为我无法想到一个合适的头衔。

我有4个网页，我想要演示..

[page1] [page2] [page3] [page4]

我想要的是......在我的所有页面之上......有4个这样的“按钮”（或其他东西）

当我在第1页...第1页按钮是粗体，其余三个是亮的.. 当我在第2页时..第2页按钮是粗体等等..

并且每个人都相互联系。

任何建议

Answer 1

<style>

button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #123d54;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #afd9fa 0%,
        #588fad);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#afd9fa),
        to(#588fad));
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #003366;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.7),
        0px 1px 0px rgba(255,255,255,0.3);
    }

button.current {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #faafaf 0%,
        #d11919);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#faafaf),
        to(#d11919));
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #003366;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(255,255,255,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.7),
        0px 1px 0px rgba(255,255,255,0.3);
}
</style>

<a href="/page1.html">
    <button class="current">Demo Page 1</button>
</a>

<a href="/page1.html">
    <button class="">Demo Page 2</button>
</a>

<a href="/page1.html">
    <button class="">Demo Page 3</button>
</a>

<a href="/page1.html">
    <button class="">Demo Page 4</button>
</a>

将上面的内容复制到你所拥有的每一页的顶部，对于第一页，按钮类应该是最新的，对于第二页，第二个按钮应该是当前的，等等。

为了说明目的，生成按钮CSS3 buttons

在html中区分一页与其他页面

1 个答案: