Question

我正在开发一个引导程序网站，我正在使用wamp作为我的服务器。工作一段时间后，当我进行更改然后刷新浏览器时，更改不会出现。我试图通过StackOverflow搜索并完成所有操作，例如使用 Ctrl + F5 并清除缓存，更改inspect元素。不过，它并没有解决我的问题。希望现在能得到解决方案。 PS：我试图在个人资料图片下面添加一个导航栏。 Html： -

<DOCTYPE !html>
  <html>
    <head>
      <title>Converter</title>
      <meta http-equiv="Cache-control" content="no-cache">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
      <div class="TopSection">
        <img src="images/first_img.jpg" class="headimg"/>
        <img src="images/profile_img.png" class="profileimg" />
      </div>
      <!-- navbar -->
      <ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
    </body>
  </html>

定制CSS： -

 .TopSection {
  position: relative;
}
.TopSection .headimg {
  height: 500px;
  width: 100%;
  position: absolute;
}
.TopSection .profileimg {

  margin-left: 550px;
  margin-top: 390px;
  height: 190px;
  width: 190px;
  position: absolute;
  border: 5px black solid;
  border-radius: 100%;

}
@media only screen and (max-width: 600px) {
  .TopSection .headimg {
    height: 400px;
    width: 100%;
    position: absolute;
  }
  .TopSection .profileimg {

    margin-left: 200px;
    margin-top: 300px;
    height: 170px;
    width: 170px;
    position: absolute;
    border: 5px black solid;
    border-radius: 100%;

  }
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

Answer 1

您可以阻止CSS文件缓存。使用版本方法。如下所示

<link rel="stylesheet" type="text/css" href="style.css?v=1" />

如果您将缓存设置为在将来添加过期？v = 1将让服务器知道这是一个新文件，但您不需要为其提供唯一名称（为您节省全局搜索和替换））

Wamp localhost未更新

1 个答案: