6

我试图找到最简单的方法来为我网站中的每个页面（来自我的 NavBar）提供一个“不同的”照片背景。似乎一旦选择了背景，它对于所有后续页面都保持不变。

我的导航栏中有主页、关于和联系我的链接。我的目标是当访问者点击我的主页时有一个照片背景，当他们点击关于页面时有另一个照片背景，当他们点击我的联系页面时有第三个照片背景，等等。

是否有捷径可寻？

到目前为止，这是我的代码：

<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

我的 CSS 看起来像这样：

body {background-image:url(greentea.jpg);}
4

4 回答 4

6

您可以将类分配给身体，例如

主页

<body class="home">

关于我们页面

<body class="about">

你可以使用css

body.home{background-image:url(greentea.jpg);}
body.about{background-image:url(greentea.jpg);}
于 2013-05-20T09:56:33.910 回答
3

给每个标签一个唯一的页面 ID。在我们的应用程序中，我们使用 ruby​​ on rails，所以它是 id="<%=controller-view%>" 类型的架构。

如果您的网站是静态的，只需在 ID 中进行硬编码。

<body id="about">

然后在 CSS

body#about {background...}
于 2013-05-20T09:55:05.857 回答
1

我选择这样做的方式是<body>根据当前页面在元素上分配不同的类。

这样，您可以使用 CSS 以可维护的方式使用特定于页面的资产（例如背景）来定位每个页面。

大多数 CMS 是否可以只使用页面的 id（可以是 slug、节点 id，甚至是经过清理的路径）。

于 2013-05-20T09:53:59.580 回答
1

body {background-image:url(greentea.jpg);}在每个页面的标签中使用您已经 ( ) 的 CSS 行，<head><style></style></head>只需更改每个页面上的背景图像。请注意，建议使用单独的 CSS 文件以避免任何内联样式。

于 2013-05-20T09:56:44.990 回答