html - 在每个页面中保持相同的样式，但有时会有一个元素略有不同

Question

我有一种情况，我在网站的某些页面上使用图像列表。假设我有一个列表在一个页面中水平显示，但我希望同一个列表在另一个页面中垂直显示，我是否必须创建一个全新的 div，以便一个列表水平显示而另一个列表垂直显示，如下所示:

#imagevertical {
}

#imagehorizontal {
}

这看起来并没有那么糟糕，但是如果您有很多网页，您希望您的图像列表在每个网页中看起来都略有不同，那么它可能会相当困惑。

有没有其他方法可以做到这一点？

谢谢大家

Answer 1

您不需要更改每个页面上的 div 的名称，只需更改应用于它的样式，因此使用名为“imagelist”的 div 并应用样式表中的所有常用样式，然后将额外的样式应用到页面本身。

在 CSS 中:

#imagelist { common styles...}

在一个 HTML 页面中:

<style type="text/css">
    #imagelist { something that makes it vertical... }
</style>

在另一个 HTML 页面中:

<style type="text/css">
    #imagelist { something that makes it horizontal... }
</style>

页内样式会覆盖从外部样式表导入的样式，这样就无需更改 div 的名称并重新指定两者之间的所有通用样式。

或者，您可以为此创建水平和垂直类:

CSS:

 #imagelist { common styles... }
 .horizontal { something that makes it horizontal... }
 .vertical { something that makes it vertical... }

水平页面的 HTML:

 <div id="imagelist" class="horizontal">content...</div>

垂直页面的 HTML:

 <div id="imagelist" class="vertical">content...</div>

我认为这可能是比第一个更好的解决方案。