Question

我的目标是在顶部有一个类似的栏：http://www.keltainenporssi.fi/ 当前站点的颜色为红色，而其他站点为黑色。

你怎么达到我的目标？也许是通过php？

伪代码中的语法可能是

if $site = A
    use-styleA
if $site = B
    use-styleB
else
    use-FinalStyle

Answer 1

通常使用PHP等服务器端脚本来做这样的事情。例如：

<?PHP

echo '<ul id="top-nav">';

foreach($page as $pageId => $text) {
    echo '<li';
    if($curPage == $pageId)
        echo ' class="active"';
    echo '>';
    echo '<a href="pages/' . htmlspecialchars($pageId) . '">';
    echo htmlspecialchars($text);
    echo '</a>';
    echo '</li>';
}

echo '</ul>';

?>

这将产生如下输出：（格式化为可读性）

<ul id="top-nav">
    <li><a href="pages/home">Home</a></li>
    <li class="active"><a href="pages/one">Page one</a></li>
    <li><a href="pages/two">Page two</a></li>
</ul>

Answer 2

您可以为该栏提供一个css，其中所有域都将被提取。确保在该css上添加！重要规则，这样它的规则就不会被其他任何东西覆盖。否则，通过在list / div上添加id或者用于实现它的任何内容来屏蔽“命名空间”中的栏。

Answer 3

非动态方法：

您可以为每个网站使用CSS规则，例如：

/* site-one.css */
#top-nav li.site-one a {
    color: red;
}

/* site-two.css */
#top-nav li.site-two a {
    color: red;
}

/* site-three.css */
#top-nav li.site-three a {
    color: red;
}

HTML：

<ul id="top-nav">
    <li class="page-one"><a href="pages/one">Page one</a></li>
    <li class="page-two"><a href="pages/two">Page two</a></li>
    <li class="page-three"><a href="pages/three">Page three</a></li>
</ul>

Answer 4

是的，您可以根据当前站点分配锚元素的类。

检查网站并决定CSS风格？

4 个答案: