在每个页面中保持相同的样式，但有时具有稍微不同的元素

Question

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

#imagevertical {
}

#imagehorizontal {
}

这看起来并不那么糟糕，但是如果你有很多很多网页，你希望你的图像列表在每个网页上看起来略有不同，那么它可能会相当混乱。

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

谢谢你们

Answer 1

创建一个外部样式表并将样式放在每个页面中，然后通过CSS提示略有不同。

external < internal < inline

您也可以使用!important。

如果您在样式中创建冲突，则样式会有所不同。

Answer 2

您不需要在每个页面上更改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>

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