关于css相对路径问题,请老师看看什么问题,相对路径怎样写才正确?

关于css相对路径问题,请老师看看什么问题,相对路径怎样写才正确?

我用的是eclipse工具,项目结构如下:

http://img1.sycdn.imooc.com//climg/5dc393c409afce9803530583.jpg

edit_jsp,login.jsp,user.jsp中css相对路径分别按如下设置

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/login.css">

<link rel="stylesheet" href="css/bootstrap.min.css">

运行正常,但是message_list.jsp中的css相对路径按同样方式设置后,就出现一个很奇怪的现象,

用户未登录前页面显示不正常,登录后显示正常,css路径设置如下:

<link rel="stylesheet"  href="css/index.css">

登录后页面显示如下:

http://img1.sycdn.imooc.com//climg/5dc3971a09b5bdc518851053.jpg

登录前页面显示如下:

http://img1.sycdn.imooc.com//climg/5dc3966e09dc72db18721020.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,考虑到这个地址是变化的,建议同学不要用相对路径,而是用绝对路径去写。

同学可以在jsp页面中添加以下代码

<%

    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";

%>

并且在css前加上<%=basePath%>

使其成为绝对路径。这样就不会随着页面的地址变化而变化了。

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!


  • 慕沐8221787 提问者 #1
    是不是css、js这些文件都采用上述的绝对路径就行了,无论是eclipse,还是intelij,而不用管这些文件与jsp文件的相对位置?
    2019-11-09 14:51:08
  • 好帮手慕阿莹 回复 提问者 慕沐8221787 #2
    是的,同学理解的没错,这样无论是eclipse,还是intelij,就都不用担心了。 如果我的回答解决了你的疑惑,请采纳!祝学习愉快!
    2019-11-09 15:11:07
  • 慕沐8221787 提问者 #3
    好的,谢谢!
    2019-11-09 21:13:38
芝芝兰兰 2019-11-07 16:43:59

同学你好。静态资源的路径解析者是浏览器。相对路径是相对于当前的地址栏路径,和jsp页面本身在项目中的所在的位置无关。

1、同学可以打开F12工具,鼠标悬停在css文件上,看看浏览器解析出地址是不是多了当前地址栏中的这层“message”呢?拼出的css会是“localhost:8080/JDBCMessageBoard/message/css/index.css”这样的,然后将这个地址发给服务器去寻找。但是我们的项目中,WebContent下没有message这个文件夹。css文件也不在这里。

http://img1.sycdn.imooc.com//climg/5dc3cf830980d8f107580367.jpg


2、同学可以将message_list.jsp中的改为:

<link rel="stylesheet" href="../css/index.css">


如果解答了同学的疑问,望采纳~

祝学习愉快~

  • 提问者 慕沐8221787 #1
    那在项目编码阶段,css相对路径到底按什么规则去写呢?就本题而言,如果按照你讲的路径,我试了一下,用户未登录前页面样式正常,但登录后,样式又失效了。
    2019-11-09 09:30:14
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
Java数据库开发与实战应用2018版
  • 参与学习           人
  • 提交作业       277    份
  • 解答问题       4297    个

Java数据库开发的必备技能,从流行的MySQL数据库开始,到Java原生的数据库管理接口JDBC的使用,再到常用的数据持久化框架MyBatis,让你向Java工程师的目标又迈进了一步!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师