我目前正在开发一个具有多个皮肤的 ASP.NET WebForms 应用程序。我正在考虑解决这个问题的方法是将每个皮肤放在一个完全独立的文件夹中,该文件夹将包含所有图像和 CSS,并且 CSS 将相应地引用图像。
文件夹结构将是这样的:
- /默认.aspx
- /皮肤/Master.css
- /Skins1/Skin1/Skin1.css
- /Skins1/Skin1/图像/ ...
- /Skins1/Skin1/Skin2.css
- /皮肤1/皮肤2/图像/ ...
- /Skins1/Skin1/Skin3.css
- /皮肤1/皮肤3/图像/ ...
因此,例如,我们可能有:
<div id="foo-logo"></div>
<a href="/bar/"><div id="bar-logo"></div></a>
然后在 CSS 中:
#top-logo { height: 100px; width:200px; background:url(images/foo-logo.jpg); }
#bar-logo { height: 50px; width:100px; background:url(images/bar-logo.jpg); }
我背后的逻辑是避免在代码中引用皮肤文件夹,如下所示:
<img src="/skins/<%=Settings.CurrentSkin%>/images/foo-logo.jpg" />
<a href="/bar/"><img src="/skins/<%=Settings.CurrentSkin%>/images/bar-logo.jpg" /></a>
这样,HTML 将保持干净且完全独立,并且可以通过引用不同的 CSS 文件来完全更改皮肤,并且无需更新图像标签。
我能想到的主要缺点是:
- 包含元素上的图像尺寸需要在 CSS 中特别指定,因为它们将作为 CSS 背景图像实现
- 如果重要的品牌元素(例如徽标)仅在 CSS 中可见,则 Web 应用程序可能不会降级
使用这种方法时我还应该注意什么和/或有没有更好的方法来实现这一点?