집 > 기사 > 웹 프론트엔드 > HTML은 모바일 단말기에 고정된 부동 반투명 검색 상자를 구현합니다.

HTML은 모바일 단말기에 고정된 부동 반투명 검색 상자를 구현합니다.

小云云원래의: 2018-05-18 10:07:485471검색

이제 인터넷에는 수천 개의 웹사이트가 있지만 웹사이트의 필수적인 기능은 검색입니다. 많은 웹사이트의 검색창이 다르며 모바일 단말기에서도 마찬가지입니다. 이번 글에서는 모바일 페이지 상단에 고정되어 반투명하고 매달아져 있으며, 캐러셀의 일부가 어렴풋이 보이는 검색창을 여러분과 공유하겠습니다.

이러한 검색 상자를 만들기 위한 기술적 핵심은 다음과 같습니다.

고정 검색 상자 위치

투명도 설정

솔루션

먼저 html 조각을 정의합니다.

<!-- 搜索框 -->
<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="bg.jpg" alt="HTML은 모바일 단말기에 고정된 부동 반투명 검색 상자를 구현합니다." >
</p>

헤더 라벨이 검색입니다. 상자, 아래 p는 배경 이미지입니다.

첨부된 CSS 스타일은 다음과 같습니다.

<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>

긴 CSS 스타일이지만 핵심은 두 문장에 불과합니다. 위치: 고정 /*는 검색 상자의 상단을 결정합니다 */ 및 배경색은 다음과 같습니다. #fff; 불투명도: 0.8 /* 검색 상자 반투명 효과 */, 다른 스타일은 페이지 레이아웃을 위한 것입니다. 레이아웃의 세부 사항은 독자가 작성하고 이해해야 하며 프로세스에 시간이 걸릴 수 있습니다.

이런 방법으로 정적 검색 상자가 완성되었습니다.

HTML은 모바일 단말기에 고정된 부동 반투명 검색 상자를 구현합니다.

참고: 여기의 검색 아이콘은 아이콘 글꼴을 사용합니다. 독자는 아이콘 글꼴 벡터 아이콘 라이브러리에서 다운로드할 수 있습니다.

이 시점에서 JS를 통해 일부 애니메이션 효과를 구현해야 합니다.

HTML은 모바일 단말기에 고정된 부동 반투명 검색 상자를 구현합니다.

는 사용자가 입력을 전환할 때 "검색" 위치 아이콘을 전환하는 데 사용됩니다. 원리는 매우 간단합니다. 이 클래스는 스타일을 정의합니다.

.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>

참고: 여기에 jQuery를 도입해야 합니다. 잊지 마세요!

Extension.Extension

전체 HTML 코드:








<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="bg.jpg" alt="HTML은 모바일 단말기에 고정된 부동 반투명 검색 상자를 구현합니다." >
</p>

위 내용은 HTML로 모바일 단말기에 고정된 부동 반투명 검색 상자를 구현하는 방법에 대한 튜토리얼입니다.

HTML은 모바일 단말기에 고정된 부동 반투명 검색 상자를 구현합니다.

관련 기사