HTML实现移动端固定悬浮半透明搜索框

实现移动端固定悬浮半透明搜索框通常通过以下步骤：

步骤一：创建HTML结构

在HTML中创建一个搜索框结构，可以使用form和input标签，如下所示：

<form>
  <input type="search" placeholder="搜索关键字">
  <button type="submit">搜索</button>
</form>

步骤二：基本样式设置

设置搜索框样式，包括背景颜色、圆角、边框等，如下所示：

form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
  z-index: 999;
}

input {
  display: block;
  float: left;
  width: 80%;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
}

button {
  display: block;
  float: right;
  width: 18%;
  height: 30px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

步骤三：响应式设置

为了适应移动设备的不同屏幕宽度，可以使用@media查询和rem单位设置响应式样式，如下所示：

@media (max-width: 768px) {
  form {
    height: 40px;
  }

  input {
    width: 70%;
    height: 25px;
    font-size: 12px;
  }

  button {
    width: 26%;
    height: 25px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  form {
    height: 30px;
  }

  input {
    width: 60%;
    height: 20px;
    font-size: 10px;
  }

  button {
    width: 30%;
    height: 20px;
    font-size: 10px;
  }
}

示例1：固定悬浮在页面顶部

下面的代码演示了如何将搜索框固定在页面顶部，并且随着页面滚动保持不变：

<body>
  <div class="wrapper">
    <!-- 其他页面内容 -->
    <form>
      <input type="search" placeholder="搜索关键字">
      <button type="submit">搜索</button>
    </form>
  </div>
</body>

<style>
.wrapper { margin-top: 50px; }
form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
  z-index: 999;
}
</style>

<script>
$(function(){
  $(window).scroll(function(){
    if($(window).scrollTop() > 50){
      $('form').addClass('fixed');
    }else{
      $('form').removeClass('fixed');
    }
  });
});
</script>

示例2：仅在页面某一部分出现

下面的代码演示了如何将搜索框放在一个div容器中，仅在页面某一部分出现：

<body>
  <div class="wrapper">
    <div class="header">
      <!-- 页面头部 -->
    </div>
    <div class="main">
      <!-- 页面主要内容 -->
      <div class="search-box">
        <form>
          <input type="search" placeholder="搜索关键字">
          <button type="submit">搜索</button>
        </form>
      </div>
    </div>
    <div class="footer">
      <!-- 页面底部 -->
    </div>
  </div>
</body>

<style>
.search-box {
  position: sticky;
  top: 50px;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: hidden;
  z-index: 999;
}
</style>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML实现移动端固定悬浮半透明搜索框 - Python技术站