html 引用文件路径

最新推荐文章于 2024-05-04 16:26:10 发布

zzginfo

最新推荐文章于 2024-05-04 16:26:10 发布

阅读量8.9k

点赞数 1

分类专栏： Asp.net(C#)

本文链接：https://blog.csdn.net/zzginfo/article/details/8132847

版权

Asp.net(C#) 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文件及目录：

Assets\Css\Test.css

Assets\Images\Button_Audit.png

BUS\TestURLPath.aspx

源代码：

Test.Css

.div1
{
    background-image:url("/Assets/Images/Button_Audit.png");
    background-repeat:no-repeat;
}

.div2
{
    background-image:url("../Images/Button_Audit.png");
    background-repeat:no-repeat;
}

TestURLPath.aspx

<html>
<head runat="server">
    <title></title>
    <link href="../Assets/Css/Test.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1">

    <img src="/assets/images/Button_Audit.png" /><!-- 1 -->
     <br/>
    <img src="../../assets/images/Button_Audit.png" /><!-- 2 -->
    <br/>
    <br/>
    <br/>

    <div style="height:50px;" class="div1">div1</div><!-- 3 -->

    <div style="height:50px;" class="div2">div2</div><!-- 4 -->

    </form>
</body>
</html>

现象：

1.程序作为一个独立的网站发布

代码1、2、3、4都工作正常

2.程序作为网站下的一个应用程序发布（应用程序名称：TestURLPath）

代码1工作异常

代码2工作正常

代码3工作异常

代码4工作正常

总结：

一.从代码4可以看出，css（如：Test.css）对图片的引用路径，只与css文件本身所在目录有关系，与引用css文件的页面（如：TestURLPath.aspx）所在目录无关。

二.从代码1,、2两种发布方式的工作结果看来，代码1 的写法很不可靠。在javascript与html中引入文件时，最好还是不要使用斜杠” / “开头的方式。

工作原理：

(1)对于js脚本,html是把脚本加载到页面中一起解析(就跟你的js脚本直接写在这个页面是一样的)

(2)而对css文件,则仅仅是提供一个连接,并不会将其加载到html页面中,如在本例中,html根据链接去css文件中寻找所需要的图片文件

zzginfo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 引用文件路径

文件及目录：Assets\Css\Test.cssAssets\Images\Button_Audit.pngBUS\TestURLPath.aspx 源代码：Test.Css.div1{ background-image:url("/Assets/Images/Button_Audit.png"); background-repeat:no-repe
复制链接

扫一扫

专栏目录