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>   

  • 相关阅读:
    PAT (Advanced Level) Practice 1100 Mars Numbers (20分)
    PAT (Advanced Level) Practice 1107 Social Clusters (30分) (并查集)
    PAT (Advanced Level) Practice 1105 Spiral Matrix (25分)
    PAT (Advanced Level) Practice 1104 Sum of Number Segments (20分)
    PAT (Advanced Level) Practice 1111 Online Map (30分) (两次迪杰斯特拉混合)
    PAT (Advanced Level) Practice 1110 Complete Binary Tree (25分) (完全二叉树的判断+分享致命婴幼儿错误)
    PAT (Advanced Level) Practice 1109 Group Photo (25分)
    PAT (Advanced Level) Practice 1108 Finding Average (20分)
    P6225 [eJOI2019]异或橙子 树状数组 异或 位运算
    P4124 [CQOI2016]手机号码 数位DP
  • 原文地址:https://www.cnblogs.com/wifi/p/1829132.html
Copyright © 2011-2022 走看看