HTML implementiert ein festes, schwebendes, durchscheinendes Suchfeld auf dem mobilen Endgerät

Mittlerweile gibt es Hunderte von Websites im Internet, aber eine der unverzichtbaren Funktionen von Websites ist die Suche. Wir können sehen, dass die Suchfelder vieler Websites unterschiedlich sind, und das Gleiche gilt auch für mobile Endgeräte. In diesem Artikel stellen wir Ihnen ein Suchfeld vor, das oben auf der Seite auf der mobilen Seite fixiert, halbtransparent und schwebend ist und einen Teil des Karussells undeutlich erkennen kann.

Um ein solches Suchfeld zu erstellen, lautet der technische Schlüssel:

feste Suchfeldpositionierung

Deckkrafteinstellungstransparenz

Lösung. Lösung

Zuerst definieren wir ein HTML-Fragment:

<!-- 搜索框 -->
<header class="bar">
  <form name="search" class="search" id="search" action="">
    <p class="search-row">
      <input type="search" name="word" id="word">
      <span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">搜索</span></span>
    </p>
  </form>
</header>
<!-- 一个背景图 实际上这里往往是轮播图 -->
<p class="background">
  <img  src="/static/imghw/default1.png"  data-src="bg.jpg"  class="lazy"   alt="HTML implementiert ein festes, schwebendes, durchscheinendes Suchfeld auf dem mobilen Endgerät" >
</p>

Der Header-Tag ist das Suchfeld und das p darunter ist ein Hintergrundbild.

Fügen Sie den CSS-Stil hinzu:

<style type="text/css">
body {
  margin: 0;  padding: 0;
  font-size: 14px; font-family: "microsoft yahei",&#39;Arial&#39;, &#39;Verdana&#39;,&#39;Helvetica&#39;, sans-serif;
}
.bar {
  position: fixed; top: 0; left: 0; right: 0; /* 决定了搜索框置顶 */
  height: 44px; padding: 0 10px;
  background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */
  z-index: 10;
}
.bar form {
  display: block; padding: 0;margin: 0;
}
.search-row {
  position: relative;
  height: 30px; padding: 7px 0;
}
.search-row input[type=search] {
  position: absolute; top: 7px;
  height: 30px; line-height: 21px; width: 100%; padding: 10px 15px 10px 30px;
  border: 0; border-radius: 6px; outline: 0; background-color: rgba(0,0,0,0.1);
  font-size: 16px; text-align: center;
  z-index: 100;
}
.search-row .placeholder {
  position: absolute; top: 2px; left: 0; right: 0;
  display: inline-block; height: 34px; line-height: 34px;
  border: 0; border-radius: 6px;
  font-size: 16px; text-align: center; color: #999;
  z-index: 1;  
}
.search-row .placeholder .iconfont {
  display: inline-block; width: 19px; line-height: 24px; padding: 10px 0; 
  font-size: 21px; color: #666;
}
.search-row .placeholder .text {
  line-height: 40px;
  vertical-align: top;
}
.background img {
  width: 100%;
}
.active:before {
  position: absolute; top: 11px; left: 5px; right: auto;
  display: block; margin-right: 0;
  font-size: 21px;
}
.active input[type=search] {
  text-align: left
}
.active .placeholder{
  display: none
}
</style>

Ein sehr langer CSS-Stil, dessen Kern jedoch nur aus zwei Sätzen besteht: position: behoben; /* bestimmt den oberen Rand des Suchfelds*/ und Hintergrundfarbe: #fff; Deckkraft: 0,8; /* Suchfeld-Transluzenzeffekt */, andere Stile gelten für das Layout der Seite. Die Details des Layouts müssen vom Leser geschrieben und verstanden werden, und der Vorgang kann einige Zeit dauern.

Auf diese Weise haben wir ein statisches Suchfeld vervollständigt:

Hinweis: Das Suchsymbol hier verwendet Iconfont. Leser können zur Iconfont-Vektorsymbolbibliothek gehen . herunterladen.

Zu diesem Zeitpunkt müssen wir noch einige Animationseffekte über JS implementieren:

Wird verwendet, um das Positionssymbol „Suchen“ zu wechseln, wenn der Benutzer Schaltereingabe Das Prinzip ist sehr einfach. Einfach Klassen hinzufügen und entfernen. Diese Klassen definieren Stile.

.active:before {
  position: absolute; top: 11px; left: 5px; right: auto;
  display: block; margin-right: 0;
  font-size: 21px;
}
.active input[type=search] {
  text-align: left
}
.active .placeholder{
  display: none
}
<script type="text/javascript">
/* 输入框获取到焦点 表示用户正在输入 */
$("#word").focusin(function() {
  $(".search-row").addClass("active iconfont icon-sousuo");
});
/* 输入框失去焦点 表示用户输入完毕 */
$("#word").focusout(function() {
  /* 判断用户是否有内容输入 */
  if ($(this).val()=="") {
    /* 没有内容输入 改变样式 */
    $(".search-row").removeClass("active iconfont icon-sousuo");
  } else {
    /* 有内容输入 保持样式 并提交表单 */
    $("#search").submit();
  }
});
</script>

Hinweis: jQuery muss hier eingeführt werden, vergessen Sie es nicht!

Erweiterung. Erweiterung

Vollständiger HTML-Code:

<style type="text/css">
body {
  margin: 0;  padding: 0;
  font-size: 14px; font-family: "microsoft yahei",&#39;Arial&#39;, &#39;Verdana&#39;,&#39;Helvetica&#39;, sans-serif;
}
.bar {
  position: fixed; top: 0; left: 0; right: 0; /* 决定了搜索框置顶 */
  height: 44px; padding: 0 10px;
  background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */
  z-index: 10;
}
.bar form {
  display: block; padding: 0;margin: 0;
}
.search-row {
  position: relative;
  height: 30px; padding: 7px 0;
}
.search-row input[type=search] {
  position: absolute; top: 7px;
  height: 30px; line-height: 21px; width: 100%; padding: 10px 15px 10px 30px;
  border: 0; border-radius: 6px; outline: 0; background-color: rgba(0,0,0,0.1);
  font-size: 16px; text-align: center;
  z-index: 100;
}
.search-row .placeholder {
  position: absolute; top: 2px; left: 0; right: 0;
  display: inline-block; height: 34px; line-height: 34px;
  border: 0; border-radius: 6px;
  font-size: 16px; text-align: center; color: #999;
  z-index: 1;  
}
.search-row .placeholder .iconfont {
  display: inline-block; width: 19px; line-height: 24px; padding: 10px 0; 
  font-size: 21px; color: #666;
}
.search-row .placeholder .text {
  line-height: 40px;
  vertical-align: top;
}
.background img {
  width: 100%;
}
.active:before {
  position: absolute; top: 11px; left: 5px; right: auto;
  display: block; margin-right: 0;
  font-size: 21px;
}
.active input[type=search] {
  text-align: left
}
.active .placeholder{
  display: none
}
</style>


<!-- 搜索框 -->
<header class="bar">
  <form name="search" class="search" id="search" action="">
    <p class="search-row">
      <input type="search" name="word" id="word">
      <span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">搜索</span></span>
    </p>
  </form>
</header>
<!-- 一个背景图 实际上这里往往是轮播图 -->
<p class="background">
  <img  src="/static/imghw/default1.png"  data-src="bg.jpg"  class="lazy"   alt="HTML implementiert ein festes, schwebendes, durchscheinendes Suchfeld auf dem mobilen Endgerät" >
</p>

Der obige Inhalt ist ein Tutorial zur Implementierung eines festen schwebenden halbtransparenten Suchfelds auf dem mobilen Endgerät in HTML. Ich hoffe, Sie können es während der Entwicklung verwenden.

Verwandte Empfehlungen:

Css zum Erstellen eines gut aussehenden Suchfelds

So verwenden Sie Js, um die Eingabeaufforderung des Baidu-Suchfelds zu implementieren Funktion

8 CSS3-Suchfelder teilen

Das obige ist der detaillierte Inhalt vonHTML implementiert ein festes, schwebendes, durchscheinendes Suchfeld auf dem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!