搜索模块

搜索模块代码：可直接复制使用的现成模板

已为您精心准备好搜索模块代码，可直接复制投入使用，同时标签代码也一并编写完成。

代码如下：

<style>
    .search-fk {
        margin-bottom: 20px;
    }
     .search-fk .floating1,.search-fk .floating2,.search-fk .floating3,.search-fk .floating4 {
        position: absolute;
        border-radius: 50%;
        opacity: .3
    }
    
    .search-fk .floating1 {
        top: 10%;
        left: 5%;
        width: 100px;
        height: 100px;
        background: #73a6ff;
        animation: float 6s ease-in-out infinite
    }
    
    .search-fk .floating2 {
        top: 20%;
        right: 10%;
        width: 120px;
        height: 120px;
        background: #ff7373;
        animation: float 8s ease-in-out infinite
    }
    
    .search-fk .floating3 {
        bottom: 15%;
        left: 15%;
        width: 80px;
        height: 80px;
        background: #73ff99;
        animation: float 7s ease-in-out infinite
    }
    
    .search-fk .floating4 {
        bottom: 25%;
        right: 5%;
        width: 90px;
        height: 90px;
        background: #ffd773;
        animation: float 9s ease-in-out infinite
    }
    
    @keyframes float {
        0% {
            transform: translatey(0)
        }
    
        50% {
            transform: translatey(-20px)
        }
    
        100% {
            transform: translatey(0)
        }
    }
    
    .search-fk .search-container {
        position: relative;
        background: rgba(255, 255, 255, .9);
        padding: 40px 10px;
        border-radius: 15px;
        text-align: center;
        margin: auto;
    }
    
    .search-fk .search-header {
        font-size: 2.5rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 40px
    }
    
    .search-fk .search-engine {
        list-style-type: none;
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 30px;
        padding-left: 0;
        margin-left: 0;
        position: relative;
        z-index: 9;
    }
    
    .search-fk .search-engine li {
        cursor: pointer;
        padding: 6px 10px;
        border-radius: 5px;
        background: #e0e0e0;
        transition: background .3s, color .3s;
    }
    
    .search-fk .search-engine li:hover {
        background: #0056b3;
        color: #fff
    }
    
    .search-fk .search-box {
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 9;
        max-width: 800px;
        margin: auto;
        margin-bottom: 30px;
    }
    
    .search-fk .search-input {
        flex: 1;
        padding: 15px;
        border: none;
        border-radius: 5px 0 0 5px;
        font-size: 1rem;
        box-shadow: 0 0 10px rgba(0,0,0,.1)
    }
    
    .search-fk .search-button {
        padding: 15px 30px;
        border: none;
        border-radius: 0 5px 5px 0;
        background: #007bff;
        color: #fff;
        font-size: 1rem;
        cursor: pointer;
        transition: background .3s
    }
    
    .search-fk .search-button:hover {
        background: #0056b3
    }
    
    .search-fk .tags {
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding-left: 0;
        margin-left: 0;
        position: relative;
        z-index: 9;
    }
    
    .search-fk .tags li a {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 5px;
        color: #333;
        text-decoration: none;
        transition: background .3s, color .3s;
        font-size: 14px;
    }
    
    .search-fk .tags li a:hover {
        background: #007bff;
        color: #fff
    }

</style>

<div class="search-fk">
    <div class="search-container">
        <div class="floating1"></div>
        <div class="floating2"></div>
        <div class="floating3"></div>
        <div class="floating4"></div>
        <!-- 搜索页面的头部，包含 logo -->
        <div class="search-header">
            {:Mset('index-title','my')}
        </div>
        <ul class="search-engine">
            <li class="active" target="_top" name="ks" title="网址搜索" data_url="{:url('index/category')}">本站</li>
            <li class="" target="_top" name="ks" title="文章搜索" data_url="{:url('index/article')}">文章</li>
            <li class="" target="_blank" name="wd" title="百度搜索" data_url="https://www.baidu.com/s">百度</li>
            <li class="" target="_blank" name="query" title="搜狗搜索" data_url="https://www.sogou.com/sogou">搜狗</li>
            <li class="" target="_blank" name="q" title="360搜索" data_url="https://www.so.com/s">360搜索</li>
        </ul>
        <!-- 搜索框部分 -->
        <form action="{:url('index/category')}" method="get" class="search-box" target="_top">
            <input type="text" name="ks" class="search-input" id="searchInput" placeholder="网址搜索">
            <button class="search-button" id="searchButton">搜索</button>
        </form>

        <ul class="tags">
            {volist name=":db_select('tag',['open'=>1,'type'=>0],'20','px desc')" id="vo"}
            <li>
                <a href="{:url('index/tags',['id'=>$vo.name])}">
                    {$vo.name}
                </a>
            </li>
            {/volist}
        </ul>
    </div>
</div>
<script>
    const searchEngineItems = document.querySelectorAll('.search-engine li');
    const searchBox = document.querySelector('.search-box');
    const searchInput = document.querySelector('.search-input');
    searchEngineItems.forEach(item => {
        item.addEventListener('click', function () {
            searchEngineItems.forEach(li => li.classList.remove('active'));
            this.classList.add('active');
            const target = this.getAttribute('target');
            searchBox.setAttribute('target', target);
            const inputName = this.getAttribute('name');
            searchInput.setAttribute('name', inputName);
            const placeholder = this.getAttribute('title');
            searchInput.setAttribute('placeholder', placeholder);
            const dataUrl = this.getAttribute('data_url');
            searchBox.setAttribute('action', dataUrl);
        });
    });
</script>