在本文中，我们将使用 CSS 和 JavaScript 创建一个全屏搜索栏。我们创建一个按钮，单击该按钮后，我们将显示搜索栏。
方法 ：
- 创建一个按钮并使用 JavaScript 使搜索面板能够切换。
- 现在拿一个 div 并将其位置固定并将顶部、底部、左侧、右侧属性设置为零，以便搜索栏固定(不可滚动)和全屏。
- 将其不透明度设置为小于 1 且大于 0 的值，并将背景颜色设置为黑色以使其样式更酷。
- 添加输入框和图标按钮以关闭搜索栏。
执行 ：
HTML
Javascript
const btn =
document.querySelector(".myBtn")
const searchBox =
document.querySelector(".fullScreen")
const closeBtn =
document.querySelector(".closeBtn")
closeBtn.addEventListener("click", ()=>{
searchBox.style.display = "none"
})
btn.addEventListener('click', ()=>{
searchBox.style.display = "block"
})输出 ：
