【已解决】html页面刷新后css样式消失

ZzzZzzzZzzzz-

于 2024-04-17 17:07:39 发布

阅读量531

点赞数 1

分类专栏：操作和排错文章标签： html css 前端

本文链接：https://blog.csdn.net/2401_83329143/article/details/137880194

版权

操作和排错专栏收录该内容

5 篇文章

订阅专栏

文章描述了在登录失败后，主页面样式消失的问题，原因是index的CSS引用路径缺少斜杠。解决方案是添加斜杠并提供了一个示例，即在bootstrap.min.css和signin.css链接中加上/。问题在重启项目后得到解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

登录失败后显示主页面时样式消失，如：
在这里插入图片描述

原因：index的样式引入css前面没有加斜杠
在这里插入图片描述

解决办法：添加斜杠

<link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">

<link th:href="@{/asserts/css/signin.css}" rel="stylesheet">

<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">

重启项目后问题解决
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZzzZzzzZzzzz-

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

浏览器不显示CSS样式的解决方法

TechProX的博客

09-28

1777

要解决这个问题，首先要检查CSS文件中是否存在语法错误，并使用验证工具进行检查。其次，确保CSS文件的路径正确，并与HTML文件中的链接标签匹配。此外，确保CSS选择器与HTML元素匹配，并了解CSS样式的优先级规则。当浏览器无法找到CSS文件时，它将无法应用相应的样式。确保CSS文件的路径是正确的，并且与HTML文件中的链接标签相匹配。可以使用CSS验证工具，如W3C CSS验证服务，来检查CSS文件是否存在语法错误。通常，内联样式具有最高的优先级，其的优先级，其次是ID选择器、类选择器和标签选择器。

页面刷新后CSS失效

08-30

使用response.write容易页面刷新后CSS失效，文档中给出解决办法。

参与评论您还未登录，请先登录后发表或查看评论

css刷新界面表格内某个图标样式有概率消失

wnk1997的博客

06-16

158

但是一刷新界面，表格内图标样式有概率消失，排查了半天，最后发现是表格有一列是v-if控制的，一开始为false，后面设置为true,表格的ref对象变化导致的，修改v-if初始值，不让v-if变化，这个问题就解决了。通过原生的方法根据样式名称找到对应的图标对象（图标对象返回的是个数组），然后给图标对象增加对应的样式。需求是这样的，组件库不支持表格表头图标的替换，需要些代码手动替换图标。

NET Core MVC 页面刷新后css文件丢失的解决方案

qq_53679247的博客

03-11

1716

问题：如图是出现了问题的时候，我的css样式js文件怎么都没见了这是怎么回事呢？这是出现问题的源代码经过仔细研究发现还是路径的问题在href中我们应该加上反斜杠的于是我们将它加上 ok问题解决！！ ...

解决——多级路由下刷新页面样式丢失问题

weixin_60932546的博客

12-25

538

多级路由下刷新页面样式丢失

网站js弹出提示后原页面css样式丢失

lifetimeus的专栏

11-14

1553

<br />在页面使用<br />Response.Write("<script> alert ('您所填的入住人数和实际的所选的入住人数不付。');</script>");<br />方法弹出提示窗口出现的问题，刷新页面后CSS样式丢失：<br />两个解决方法：<br />1）：在Response.Write中加入：history.back();<br />Response.Write("<script> alert ('您所填的入住人数和实际的所选的入住人数不付。');history.back();<

Vue 解决父组件跳转子路由后当前导航active样式消失问题

10-15

为了解决这个问题，可以调整CSS样式，将`router-link-exact-active`替换为`router-link-active`。`router-link-active`类在当前链接匹配路由时会被添加，即使它是父路由。修改后的CSS样式如下： ```css .router-...

html+js+css星空特效.html

最新发布

09-11

在HTML页面中，我们可以通过结合使用HTML、JavaScript以及CSS来创造出吸引人的星空特效，增强页面的视觉表现力。在开发星空特效的过程中，我们主要会使用到HTML来构建页面的结构，利用JavaScript添加动态效果，以及...

解决Dreamweaver中关于应用CSS的小问题

09-24

在网页设计领域，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）文档中元素外观、布局和结构的重要工具。Dreamweaver是一款强大的所见即所得网页编辑器，它提供了方便的CSS编辑功能，...

React页面刷新样式丢失问题及解决方案

Hiroshi's

06-28

2073

我们把路由都变成二级路由，统一加上/dean/路由前缀效果：看着没什么问题，但是一旦刷新页面，样式就废了：我们把路由恢复，看看bootstrap网络请求正常不正常：我们发现bootstrap请求地址是http://localhost:3000/css/bootstrap.css，localhost:3000是本地服务器，webpack里面的webServer配置了public这个文件夹都是localhost:3000/根目录对应的位置我们通过地址请求看看：如果请求了一个不存

解决多级路径刷新页面样式丢失的问题

believet93的博客

03-25

256

尚硅谷老师笔记 1.public/index.html中引入样式时将“./” 改成 “/” （常用） 2.public/index.html中引入样式时将“./” 改成 “%PUBLIC_URL%” （常用） 3.使用HashRouter

JavaScript实现打印局部页面样式丢失

你退后的地盘

06-26

4260

先实现打印局部的页面 html部分 <div id="printFile">需要被打印的区域</div> <button onclick="printFile()">点击打印</button> js部分 function printFile(id) { var dom = document.getElementById("printFile"); var win = window.open(); win.document.write(dom.ou

v-html 样式失效

qq_43654065的博客

01-29

1430

vue3使用:deep(){}，穿透标签，v-html中的样式就可以生效了。标签使用了v-html，但是渲染的HTML标签中的样式并没有生效。

在网页测试的时候css样式消失（完美解决）

qq_62197145的博客

09-04

528

只需要在config配置类中添加。

html页面加载有时没有网样式,网站css样式不加载是什么原因？

weixin_32073733的博客

06-07

6020

有时当我们打开网页时，网页布局完整，但却没有任何布局样式显示。这是什么原因？为什么网站css样式不加载了？下面给大家介绍一些无法加载css样式的原因。网站css样式不加载是什么原因？网站css样式不加载，可能是因为css样式加载失败了。而造成css加载失败的原因有很多，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。最常见的失败原因有以下几类：1、路径错误或者代码不...

Javaweb引入前端页面样式消失和数据库插入乱码问题

weixin_73509711的博客

11-02

458

在服务器获取到正确数据后，插入到数据库却出现乱码，很有可能是数据库的编码问题。它的作用是取出部署应用程序的名字，这样不管如何部署，所用的路径都是正确的。也有可能是头部文件的路径不一致，删掉就行了。3、前端出现问题的css引入路径。1、filter过滤了这些文件。可以在读取数据库的文件中加入。二选一（我用的是第二个）

html页面发生变化时，class点击事件不起作用的解决方案

徊忆羽菲

10-11

1198

原js代码 $(".m-video").on("click", function () { alert('弹窗'); }); 当点击js，页面发生变化时，找不到对应的 m-video 导致js不生效修改后js代码 $(document).on("click", ".m-video", function () { alert('弹窗'); ...

CSS样式丢失的原因和解决方法

2301_79325657的博客

09-23

1215

综上所述，CSS样式丢失可能由文件路径错误、CSS选择器错误、样式冲突、CSS样式表加载顺序和浏览器缓存问题等原因引起。通过检查文件路径、选择器、样式冲突、加载顺序和缓存设置，可以解决这些问题，并确保CSS样式正确应用于网页。这可能导致样式丢失。当引用CSS文件时，如果文件路径设置不正确，浏览器将无法找到该文件，从而导致样式丢失。CSS样式表的加载顺序很重要，后加载的样式表可能会覆盖先加载的样式表中的样式。确保样式表以正确的顺序加载，可以通过在HTML文件中的元素内使用标签来指定样式表的加载顺序。

CSS样式丢失总结(转载)

weixin_30810583的博客

06-29

544

转载自【孟子E章】：http://blog.csdn.net/net_lover/archive/2007/08/27/1760521.aspx经常有人遇到ASP.NET 2.0（ASP.NET 1.x中可能是有效的）中CSS失效的问题，现将主要原因和解决方法罗列如下：1.CSS文件路径不正确这个问题属于Web开发中的基础问题，一般采用相对路径会出现这样的问题，或者样式文件写在了母版页里面...

HTML，css，JS页面菜单选中状态，且刷新不消失

09-07

HTML、CSS和JavaScript可以一起创建出交互式的网页效果，其中页面菜单选中状态通常通过以下步骤实现： 1. HTML结构：首先，你需要在HTML中定义一个菜单列表，每个菜单项包含一个链接元素（如`<a>`），并设置一个唯一的标识，比如`data-id`属性。 ```html <nav> <ul id="menu"> <li><a href="#" data-id="1">菜单1</a></li> <li><a href="#" data-id="2">菜单2</a></li>  </ul> </nav> ``` 2. CSS样式：使用CSS来设置默认样式和激活（选中）状态。例如，你可以为`active`类添加背景色、字体颜色等样式，并设置当鼠标悬停或点击时添加这个类。 ```css #menu a { display: inline-block; } #menu a.active { background-color: #e0e0e0; color: blue; } ``` 3. JavaScript逻辑：通过JavaScript监听用户的行为，当某个菜单项被点击时，动态地为它添加或移除`active`类，以便更新样式。 ```javascript document.getElementById('menu').addEventListener('click', function(e) { const target = e.target; if (target.tagName === 'A') { removeActiveClass(); target.classList.add('active'); } }); function removeActiveClass() { document.querySelectorAll('#menu a.active').forEach(link => link.classList.remove('active')); } ``` 当你刷新页面时，因为JavaScript是运行在浏览器端的，所以需要在用户交互触发时手动恢复默认样式。为了实现这一点，你可以在JavaScript里保存菜单的状态，然后在加载页面时根据这些信息来调整样式。