html 引用文件路径

文件及目录:

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文件中寻找所需要的图片文件 

 

 

阅读更多
换一批

没有更多推荐了,返回首页