html - 如何为不同条目创建具有不同背景图像的有序列表 (HTML/CSS)？

Question

我已经设置了这个导航栏菜单，它有一个多层背景，以便在悬停和当前选项卡上改变颜色。但是，到目前为止，我所拥有的配色方案大部分是绿色的，在同一个列表中，我想将下一个选项卡“ block ”设为蓝色，第三个 block 设为红色。我有更多的图像准备多层和东西，但我似乎无法得到该死的东西来覆盖每个 li 条目的背景，因为主要的东西是在 ol 本身上编码的。它实际上只是在“ol#vin a {”和“ol#vin span {”上加载图像；其余选项(悬停、当前等)仅更改背景位置，因此我的多层图像向下转换为适当的状态。

如果有帮助，我基于此:http://blixt.org/articles/tabbed-navigation-using-css#section=bonus他有标签列表，但我有它在左侧垂直向下，带有我自己的背景。

E: 根据要求，代码片段:

<table width="100%" border="0" cellpadding=0 cellspacing=0><tr valign="top">
<td width="260px">
    <ol id="vin">
        <li class="au"><a href="#sc-aaaa"><span>Section A</span></a></li>
        <li class="au"><a href="#sc-bbbb"><span>Section B</span></a></li>
        <li class="au"><a href="#sc-cccc"><span>Section C</span></a></li>
        <li class="au"><a href="#sc-dddd"><span>Section D</span></a></li>
        <li class="au"><a href="#sc-eeee"><span>Section E</span></a></li>
        <li class="au"><a href="#sc-ffff"><span>Section F</span></a></li>
    </ol>
</td><td style="background:#ccc">
    <div class="content" id="sc-aaaa">
        <h2>Section A</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-bbbb">
        <h2>Section B</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-cccc">
        <h2>Section C</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-dddd">
        <h2>Section D</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-eeee">
        <h2>Section E</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-ffff">
        <h2>Section F</h2>
          Content goes here!
    </div>
</td></tr></table>
activatables('section', ['sc-aaaa', 'sc-bbbb', 'sc-cccc', 'sc-dddd', 'sc-eeee', 'sc-ffff']);
</script>
</body>
</html>

和CSS:

ol#vin {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 16px Verdana, sans-serif;
}

ol#vin li {
    margin: 0 0 0 0;
}

ol#vin a {
    color: #ccc;
    display: block;
    height: 25px;
    padding-left: 30px;
    text-decoration: none;
}

ol #vin #au a {background: url(vtabs.png) no-repeat;}
ol #vin #ma a {background: url(vtabs2.png) no-repeat;}

ol#vin a:hover {
    background-position: 0 -52px;
    color: #000;
}

ol#vin a:hover span {
    background-position: 100% -52px;
}

ol#vin li a.active {
    background-position: 0 -26px;
    color: #fff;
    font-weight: bold;
}

ol#vin li a.active span {
    background-position: 100% -26px;
}

ol#vin span {
    display: block;
    line-height: 25px;
    padding-right: 30px;
}

ol#vin #au span {background: url(vtabs2.png) 100% 0;}
ol#vin #ma span {background: url(vtabs2m.png) 100% 0;}

Answer 1

这将有助于为元素定义特定的 ID 或类，然后您可以为每个 ID 或类指定背景图像。

原创

来自链接示例:http://blixt.org/articles/tabbed-navigation-using-css#section=bonus

<ol id="toc">
    <li><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

解决方案

HTML

<ol id="toc">
    <li id="first_li"><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li id="second_li"><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

CSS

/* Usual states */
#toc li#first_li {
    background-image: url('/img/first_background.jpg');
}

#toc li#second_li {
    background-image: url('/img/second_background.jpg');
}

/* Hover states */
#toc li#first_li:hover {
    background-image: url('/img/first_background_highlight.jpg');
}

#toc li#second_li:hover {
    background-image: url('/img/second_background_highlight.jpg');
}