zoukankan      html  css  js  c++  java
  • 母版页中引用图片、外部js、css文件的路径问题

    当嵌套母版页的子页面与母版页不在同一级目录时,往往会牵涉到外部图片、js、css文件引用的路径问题。(以下是引用别人加自己整理)

     

    1. 图片、<a>标签 

    非常好解决  

    <img runat="server"  src='~/images/log.gif'></script>

     <a  href='~/book/buy.aspx' runat="server"></a>    

    加上runat="server" ,路径使用绝对路径~/基本上就OK了。 

    2. CSS文件引用   

     <link rel="stylesheet"  type="text/css"  href='style.css'></script>    

     这里神奇的就是link的文件的href是随着被访问文件的目录结构自动调整,说白了就考虑母版页引用的路径就可以了,其他不用费心。 

    比如在母版页同目录下的一个文件夹内的一个xxx.aspx引用的母版页,那么上面的语句在客户端就自动变为   

     <link rel="stylesheet"  type="text/css"  href='../style.css'></script> 

    前提就是<head runat="server"></head>必须有runat="server"   

     3.  JS文件的引用  

    <script type="text/javascript" src='menu/jquery.min.js'></script>      

    这样的话在其他目录下的页面文件,客户端肯定就引用不到了    

    那么你需要这样处理     

    <script type="text/javascript" src='<%=ResolveUrl(“menu/jquery.min.js”) %>'></script>    

    <script type="text/javascript" src='<%=ResolveClientUrl(“'menu/jquery.min.js”) %>'></script>  

    这是2种方式,在客户端的路径当然也会不一样,分别是:    

    <script type="text/javascript" src='/Example/menu/jquery.min.js'></script>  

    <script type="text/javascript" src='menu/jquery.min.js'></script>    

    那么很明显ResolveClientUrl是相对路径,是比较好用的,当然ResolveUrl也有很多地方需要这样的绝对路径,其中Example是web应用的名字。 

    另外,如果不可用请在<head>标记中添加:runat="server" 

     

     

     当子页面需要引用自己的css、js外部文件时,可以在母版页的<head runat="server" ></head>标记中加添加一个标签

    <asp:contentplaceholder runat="server" id="HeadContent"  >  

     </asp:contentplaceholder>  

    子页面可在此标记中加入自己需要引用的文件

    </asp:Content

    <asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" Runat="Server">

        <link rel="stylesheet" href="css/thickbox.css" type="text/css" />

        <link rel="stylesheet" href="http://www.cnblogs.com/css/common.css" type="text/css" />

        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>   

  • 相关阅读:
    20180420首旅酒店的操作记录
    股票的站上均线和反弹购买的学习
    linux里面的fork函数创建一个新进程
    allegro导入网表过程中出现的错误信息
    海思NB-IOT的SDK添加AT指令方法
    如何在ubuntun中安装pycharm并将图标显示在桌面上
    流畅python学习笔记:第十九章:动态属性和特性
    一起来学linux:目录与路径
    一起来学linux:用户与用户组
    python自动化运维五:pexpect
  • 原文地址:https://www.cnblogs.com/wifi/p/1829132.html
Copyright © 2011-2022 走看看