猫史档案馆

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深谷浏览器</title>
    <link rel="stylesheet" href="../CSS/深谷浏览器.css">
    <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
  </head>
  <body>
    <div class="main">
      <div class="searchBox">
        <div class="search">
          <ion-icon name="search-outline"></ion-icon>
        </div>
        <div class="searchInput">
          <input type="text" placeholder="深谷搜索" class="query">
        </div>
        <div class="close">
          <ion-icon name="close-outline"></ion-icon>
        </div>
      </div>
      <div class="searchButton">
        <center>
          <button class="searchBtn" id="searchBtn">深谷搜索</button>
        </center>
      </div>
      <div class="Slogan">
        <h5>深谷浏览器，更多宝藏，等你挖掘！</h5>
      </div>
      <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.e喵.js"></script>
      <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
      <script src="../JS/jQuery(3.5.1).js"></script>
      <script src="../JS/searchBox.js"></script>
      <script src="../JS/search.js"></script>
    </div>
  </body>
</html>

css

@import url("../CSS/Ubuntu.css");
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Ubuntu",sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(100deg,#E3EEFF,#F3E7E9);
}
button.searchBtn{
  margin-top: 20px;
}
div.Slogan{
  position:fixed;
  bottom:0px; 
  left:0px;
}
.searchBox{
  position: relative;
  width: 60px;
  height: 60px;
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  transition: 0.5s;
  overflow: hidden;
  box-shadow: 0 25px 35px rgba(0,0,0,0.1);
}
.searchBox.active{
  width: 360px;
}
.searchBox .search{
  position: relative;
  min-width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  cursor: pointer;
}
.searchBox .close{
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25em;
  cursor: pointer;
  scale: 0;
  transition: 0.5s;
}
.searchBox.active .close{
  scale: 1;
  transition-delay: 0.5s
}
.searchBox .searchInput{
  position: absolute;
  left: 60px;
  width: calc(100% - 120px);
  height: 100%;
  line-height: 60px;
}
.searchBox .searchInput input{
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 1.25em;
}

1、search

let query=document.querySelector(".query");
let searchBtn=document.querySelector(".searchBtn");
searchBtn.onclick=function(){
  let url="https://www.so.com/s?ie=utf-8&fr=dlm_button_cube&ls=f&src=home_dlm_button_cube&ssid=7480喵cc881e4ccbbcf271eacf8fc1a0&sp=a10&cp=00f0045080&nlpv=placeholder_yc&q="+query.value;
  window.open(url)
}

2、searchBox

let search=document.querySelector(".search");
let close=document.querySelector(".close");
let searchBox=document.querySelector(".searchBox");
var BtnId=$("#searchBtn");
BtnId.hide()
search.onclick=function(){
  searchBox.classList.add("active");
  BtnId.show();
};
close.onclick=function(){
  searchBox.classList.remove("active");
  BtnId.hide()
}

3、jQuery //jQuery 是3.5.1版本，由于文件过长，请根据https://code.jquery.com/jquery-3.5.1.min.js

猫史档案馆

一个简单的html浏览器

回复