实现在线和离线表现不同的 css
Posted
技术标签:
【中文标题】实现在线和离线表现不同的 css【英文标题】:Materialize css behaving different online and offline 【发布时间】:2018-09-14 06:43:42 【问题描述】:我遇到了标题中解释的问题; CSS 在线和离线的行为不同。
离线,我更改了一些 CSS 规则以获得我想要的导航。 在线时,它会恢复为默认外观。
html 是这样起草的:
<div class="navbar-fixed">
<nav id="jeboteled">
<div id="boja" class="nav-wrapper">
<div class="row">
<div class="col s12 center-align logoSlikaNav">
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<a href="index.html" class="hide-on-med-and-down">
<img style="width: 100px; height:50px;" src="img/opcanamjena/holiday_header.png">
</a>
</div>
<a href="#">
<div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" data-position="bottom" data-tooltip="Accomodation">
<i class="fas fa-bed"></i>
</div>
</a>
<a href="Adventure.html">
<div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" data-position="bottom" data-tooltip="Adventure">
<i class="fas fa-motorcycle"></i>
</div>
</a>
<a href="explore.html">
<div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" data-position="bottom" data-tooltip="Explore">
<i class="fas fa-compass"></i>
</div>
</a>
<a href="Gastronomy.html">
<div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" data-position="bottom" data-tooltip="Gastronomy">
<i class="fas fa-utensils"></i>
</div>
</a>
<div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" onclick="overlaycontactopen()" data-position="bottom" data-tooltip="Contact">
<i class="fas fa-info-circle"></i>
</div>
<div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped modal-trigger" href="#jezik" data-position="bottom" data-tooltip="Language">
<i class="fas fa-language"></i>
</div>
</div>
</div>
</nav>
</div>
这是唯一更改的 CSS 规则。其他一切都在物化 css 文件中。
#boja
background-color: #18185e !important;
@media only screen and (min-width: 993px)
#jeboteled
height: 150px;
@media only screen and (min-width: 993px)
.logoSlikaNav
transform: translateY(10px);
.linkDiv
cursor: pointer;
.linkDiv:hover
background-color: #61b9f6;
这是发布的测试站点。
https://jedantest.000webhostapp.com/
【问题讨论】:
1) 尝试清除浏览器中的缓存。 2) 在 chrome 开发者工具中检查你的 CSS 文件,它是否与你在本地运行的相匹配? 哇...它解决了问题...我不敢相信我没有看到最简单的解决方案。谢谢 没问题。清除缓存将成为 Web 开发的第二天性,你会习惯的 :-) 【参考方案1】:正如 alexr101 在 cmets 中所说,清除缓存就可以了!
【讨论】:
以上是关于实现在线和离线表现不同的 css的主要内容,如果未能解决你的问题,请参考以下文章