0

I have a situation where I am using a list of images on certain pages of my website. Say I have a list that appears horizontally in one page but I want the same list to appear vertically in another page, would I have to create a whole new div so that one list appears horizontally and the other vertically like this:

#imagevertical {
}

#imagehorizontal {
}

This doesn't seem that bad but where you have lots and lots of web pages that you want your image list appearing slightly different in each one, it can be fairly messy.

Is there any alternative ways of doing this?

Thanks guys

4

2 回答 2

1

制作一个外部样式表并将样式放在每个页面中，您可以通过 CSS 提供略有不同。

external < internal < inline

您也可以使用!important.

如果你在风格上产生冲突，风格就会不同。

于 2012-09-25T09:28:04.350 回答
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>

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

于 2012-09-25T10:42:34.960 回答