网页不显示样式的解决方向之一

【问题描述和分析】

当网页出现内容显示正常,但是没有样式加载的情况。这时,要先检查css文件是否成功加载。

如果加载成功,再检查css内容的问题或者是编码问题;如果加载失败,这时要检查css文件引用路径是否正确,或者nginx/Apache配置是否正确,是否能正确的匹配到css文件


【解决方案】

我遇到的问题是nginx配置文件中没有设置css匹配规则,修改nginx.conf后样式加载正常


location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
      expires 30d;
}

location ~ .*\.(js|css)?$
{
      expires 12h;
}


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果在引入公共头部和底部时没有显示样式,可能是因为CSS文件没有正确引入或者CSS样式不正确。 首先,确保CSS文件已经正确引入。在HTML文件的`<head>`标签中,使用`<link>`标签引入CSS文件,例如: ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <link rel="stylesheet" href="style.css"> <!-- 引入公共头部 --> <link rel="import" href="header.html"> </head> <body> <!-- 网页内容 --> </body> </html> ``` 在上面的例子中,`<link rel="stylesheet" href="style.css">`表示引入名为`style.css`的CSS文件。请确保该文件路径正确,并且该文件中的CSS样式正确。 其次,确保CSS样式正确。在HTML文件中引入公共头部和底部时,需要确保CSS样式也被正确引入。在公共头部和底部的HTML文件中,可以使用`<style>`标签定义CSS样式,例如: ```html <header> <h1>网站标题</h1> <nav> <ul> <li><a href="/">首页</a></li> <li><a href="/about">关于我们</a></li> <li><a href="/contact">联系我们</a></li> </ul> </nav> </header> <style> header { background-color: #333; color: #fff; padding: 20px; } h1 { margin: 0; font-size: 36px; } nav { margin-top: 10px; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; margin-right: 20px; } li:last-child { margin-right: 0; } a { color: #fff; text-decoration: none; } </style> ``` 在上面的例子中,使用`<style>`标签定义了头部的CSS样式。请确保CSS样式正确,并且与网页中的其他样式不冲突。 最后,如果以上方法都不能解决问题,可以检查浏览器的开发者工具,查看CSS样式是否被正确引入和应用。在开发者工具中,可以查看CSS样式表和元素的样式信息,帮助定位问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值