Introduction of external resource relative path problem Analysis _jsp programming in JSP and CSS

Add base to the JSP page, using relative paths:

Copy Code code as follows:

<%
String path = Request.getcontextpath ();
String basepath = request.getscheme () + "://"
+ request.getservername () + ":" + request.getserverport ()
+ path + "/";
%>

Then add base to

<base href= "<%=basePath%>" ></base>

When you introduce external files "directly" on this page, you can directly

Copy Code code as follows:

<script src= "Js/common/jquery-1.11.1.min.js" language= "JavaScript"
Type= "Text/javascript" ></script>
<script src= "Js/common/frame.js" language= "JavaScript"
Type= "Text/javascript" ></script>
<link href= "Css/common/frame.css"
Rel= "stylesheet" type= "Text/css"/>
<link rel= "shortcut icon" href= "Images/favicon.ico" type= "Image/x-icon"/>

Similarly, the CSS classes in this page

Copy Code code as follows:

. Top {
Position:absolute;
left:0;
top:95px;
right:0;
height:120px;
Background:url (images/common/title.jpg) repeat-x
}

==================== Exception: The introduction of external CSS, JS files and the introduction of image, etc. =================================

If you use a relative path at this time, because you are not in the JSP page, the relative path is relative to the directory where the CSS file resides:

such as: Tang di new System, index.jsp page in the introduction of CSS Files

<link href= "Css/common/frame.css" rel= "stylesheet" type= "Text/css"/> At this point in the JSP page, the introduction of the js/common/ Frame.js is from the website and directory to start looking, no problem.

But in Frame.js there are the following CSS

Copy Code code as follows:

. show_menu{
Background-image:url (images/left_bg.gif);
Background-repeat:repeat-y;
background-position:285px 51px;
}

In this case the direct URL (images/left_bg.gif) is the default from the directory where the CSS file (/css/common/frame.css) +url (images/left_bg.gif), So the image needed here needs to be configured separately,

Change into

Copy Code code as follows:

. show_menu{
Background-image:url (.. /.. /images/left_bg.gif);
Background-repeat:repeat-y;
background-position:285px 51px;
}