母版页上的 CSS 和图像
我遇到了这个非常普遍的问题,但未能找到有效的解决方案。
基本上,我使用的是母版页(/Masterpages/Default.master),其中包括
<link href="../css/style.css" rel="stylesheet" type="text/css />
并且它还包括一些具有相同相对链接的图像。
但是,当我将母版页应用到内容页面(在不同的文件夹级别)时,CSS 格式和图像会丢失。
是否有办法使用母版页动态解决所有内容页面的 css 和图像的文件夹级链接?
提前致谢
更新:
还有一个额外的问题。让输出在浏览器和 Visual Studio 的设计视图中正确呈现是很棘手的。
我通过对母版页中的图像使用 asp:image 解决方案并通过在母版页中双重链接 css 使其工作,使其在 VS 中呈现,一个使其能够正确渲染浏览网站。
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />
I have this quite popular problem, but have failed to find a solution that works.
Basicly, I am using a Master Page (/Masterpages/Default.master), that includes
<link href="../css/style.css" rel="stylesheet" type="text/css />
And it also includes some images with the same relative linking.
But when I apply the Master Page to content pages (in diffrent folderlevels) the css formating and images is lost.
Is there anyway to dynamicaly solve the folderlevel links to css and images to all content pages using the masterpage?
Thanks in advance
UPDATE:
There is an additional problem. It's tricky to get the output to render correctly in both the browser and in design view in Visual Studio.
I got it to work by using the asp:image solution for the images in the masterpage and by double linking the css in the masterpage, one to make it render in VS and one to make it render correctly browsing the site.
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(8)
最好使用:
因为这将处理 iis 应用程序根,不像:
best to use:
since this will cope with iis application roots unlike:
您可以使链接运行于“server”并使用波形符映射来使 CSS 路径相对于站点根目录。
CSS 中引用的图像应相对于 CSS 文件的位置,并且在正确包含 CSS 文件本身后应正常解析。对于页面上标记中的图像,您需要使用 ASP:Image 控件,并再次使用波形符映射来获取相对于根的路径。
You can make your link runat="server" and use tilde mapping to make the CSS path relative to the site root.
The images referenced in the CSS should be relative to the location of the CSS file and should resolve normally once the CSS file itself is included properly. For images in tags on the page, you would need to use the ASP:Image control and, again, use the tilde mapping for a path relative to the root.
相当确定这会起作用
/带您到网站的根目录
Fairly sure this will work
/ takes you to the root of your site
您可以使用波形符使链接在任何地方都可以使用。这也适用于图像。
You can use the tilde to get the link to work from anywhere. This will work in Images as well.
CSS 中的图像与引用它们的文件相关。
(一个例外是 Internet Explorer 中用于修复 PNG 的“过滤器”规则。这种情况下的图像是相对于 HTML 文档的。)
Images in CSS are relative to the file they are referenced from.
(An exception from this is the "filter" rule in Internet Explorer which is used for PNG fixes. The images in this case are relative to the HTML document.)
是的,问题是 materpage 使用相对 url 来加载 CSS:
您需要将其更改为站点根目录(取决于 css 文件的位置),例如:
比所有不同的文件夹级别都可以使用相同的网址。
Yes, the problem is that the materpage is using a relative url to load the CSS:
you need to change this to the site root (depending on the location of your css files) something like:
than all the various folder levels can use the same url.
实际上,母版页会自动为您重新设置 css 文件的基准,而无需添加 runat="server"。确保您的 css 文件位于您指定的文件夹的下一级目录中。
您可以使用 css 文件的绝对路径,但当您执行此操作时,Visual Studio 似乎不会在设计视图中渲染样式。另外,有时您不知道是否要在虚拟目录中运行,因此使用绝对路径并不总是理想的。
另外,使用 css 文件本身到图像资源的相对链接 - 无论您如何链接到样式表,这都将起作用。
Actually, master pages will rebase css files for you automatically, without you having to add runat="server". Be sure that your css file is located one directory down in the folder you specified.
You can use an absolute path to the css file, but visual studio doesn't seem to render the styles in design view when you do this. Also, sometime you won't know if you're going to be running in a virtual directory, so it's not always ideal to use the absolute path.
Also, use relative links to your image assests from the css file itself - which will work irrespective of how you link to your stylesheet.
您可能还对研究主题和皮肤感兴趣。
ASP.NET 主题和外观概述
You might also be interested in looking into themes and skins.
ASP.NET Themes and Skins Overview