网站页面导入css,图片等文件的相对路径和绝对路径问题

html-css030

网站页面导入css,图片等文件的相对路径和绝对路径问题,第1张

如果是外联css(css文件与html文件分离的),则css中的图片路径是相对于css文件而不是html文件的,比如你附图中的那个png图片,应该位于css文件的上级目录的images子目录的kpjh子目录中,否则就出错。如果网站的目录结构比较复杂,很难理清文件的相对关系,可以使用绝对路径,比如说images目录假如位于网站的根目录,那么你可以用 /images/kpjh/... ,也就是把开头的两个小数点去掉。更保险的办法是在前面加上网址变成完整的url,这样即使图片文件放到其他网站也能调用。如果希望得到更简单的方法,那么可以把css文件与图片文件放在同一个目录,这样css文件中就不需要再写图片的路径了,直接写图片文件名即可

如果是内联css(css代码直接写到html文件中),则图片路径是相对于html文件的。

所以你要自己检查一下图片路径是否写正确,然后根据我上面的说明进行修改。

十有八九是路径问题, 测试一下:1. 在放css文件的目录下再放一个test.html,test.html里面随便打几个字,用带域名的绝对路径访问test.html,若能正常访问则可以排除目录访问权限设置出错。因为你html和css文件都放在同一个文件夹下, 这一步可以跳过。2. css的href值改为【绝对路径】,如果故障排除则可以肯定是你路径写错了。

HTML中加载外联CSS文件:<link rel="stylesheet" type="text/css" href=""/>,先看看有没有写错

也有可能是你的路径不对,可以这样写:(大多数情况是位置不对)

相对路径:"../文件夹/文件名.css"(相对于文件的位置)

绝对路径:"F:/文件夹/文件名.css"