0

我认为标题具有误导性……因为它想不出一个合适的标题。

我有 4 个要演示的网页..

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

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

当我在第 1 页时..第 1 页按钮为粗体，其余三个为浅色..当我在第 2 页时..第 2 页按钮为粗体，依此类推..

并且他们每个人都相互链接。

有什么建议么

4

1 回答 1

2 
<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 按钮

于 2013-03-07T11:07:36.930 回答