聚合导航网页代码

聚合导航网页代码

代码模板:网址和名称该修改的修改就可以使用了

<!DOCTYPE html>
<html>
<head>
    <title>聚合网页</title>
    <style>
        body {
background-image: url("http://52bsj.vip:81/api/v3/file/get/158093/%E7%AE%80%E7%BA%A6%E5%AF%BC%E8%88%AABJ.jpg?sign=jA7gfPX0ET37QVTT_IXEDGgYxtl6ZLk0oyljesBDKyk%3D%3A0");
background-repeat: no-repeat;
background-size: cover;
        }
        .search-container {
text-align: center;
margin-top: 50px;
        }

.sites {
width:1080px;
background:;
border:0px solid #836FFF;
margin:15px auto;
padding:0px;
}

.button-container {
display: flex;
flex-wrap: wrap;
justify-content: left;
margin-top: 50px;
}
.button {
width: 102px;
height: 40px;
background-color: rgba(0,0,0,.30);
margin: 3px;
display: flex;
justify-content: center;
align-items: center;
color: #0000EE;
font-size: 18px;
cursor: pointer;
}
.button02 {
width: 102px;
height: 40px;
background-color: #878787;
margin: 3px;
display: flex;
justify-content: center;
align-items: center;
color: #0000EE;
font-size: 18px;
cursor: pointer;
}

.button1 {
width: 102px;
height: 40px;
background-color: rgba(0,0,0,.24);
margin: 3px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 14px;
cursor: pointer;
}
.button2 {
width: 102px;
height: 40px;
background-color: #6E6E6E;
margin: 3px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 14px;
cursor: pointer;
}

    </style>
    <script>
        function search() {
var searchEngine = document.getElementById("searchEngine").value;
var keyword = document.getElementById("keyword").value;
var url;
if (searchEngine === "baidu") {url = "https://www.baidu.com/s?wd=" + encodeURIComponent(keyword);}
else if (searchEngine === "google") {url = "https://www.google.com/search?q=" + encodeURIComponent(keyword);}
else if (searchEngine === "toutiao") {url = "https://so.toutiao.com/search?dvpf=pc&source=trending_card&keyword=" + encodeURIComponent(keyword);}
else if (searchEngine === "bing") {url = "https://www.bing.com/search?q=" + encodeURIComponent(keyword);}

window.open(url, "_blank");
        }
    </script>
</head>
<body>
    <div class="search-container">
        <select id="searchEngine">
<option value="baidu">百度 搜索</option>
<option value="bing">必应 搜索</option>
<option value="toutiao">头条 搜索</option>
<option value="google">谷歌 搜索</option>
        </select>
        <input type="text" id="keyword" placeholder="请输入关键词" style="width: 300px; height: 30px; font-size: 16px;">
        <button onclick="search()">搜  索</button>
    </div>

<div class="sites">  <!-- 网址超链接开始--><!--    模块隔离    -->
<div class="button-container">
        <a href="https://www.baidu.com/" target="googleFrame" class="button">Button 1</a>
        <a href="https://www.google.com/" target="googleFrame" class="button">Button 2</a>
        <a href="https://www.123pan.com/" target="googleFrame" class="button">Button 3</a>
        <a href="https://www.baidu.com/" target="googleFrame" class="button">Button 4</a>
        <a href="https://www.google.com/" target="googleFrame" class="button">Button 5</a>
        <a href="https://www.123pan.com/" target="googleFrame" class="button">Button 6</a>
        <a href="https://www.baidu.com/" target="googleFrame" class="button">Button 7</a>
        <a href="https://www.google.com/" target="googleFrame" class="button">Button 8</a>
        <a href="https://www.123pan.com/" target="googleFrame" class="button">Button 9</a>
        <a href="https://www.baidu.com/" target="googleFrame" class="button">Button 10</a>
        <a href="https://www.baidu.com/" target="googleFrame" class="button">Button 11</a>
        <a href="https://www.google.com/" target="googleFrame" class="button">Button 12</a>
        <a href="https://www.123pan.com/" target="googleFrame" class="button">Button 13</a>
        <a href="https://www.google.com/" target="googleFrame" class="button">Button 14</a>
        <a href="https://www.123pan.com/" target="googleFrame" class="button">Button 15</a>
        <a href="https://www.123pan.com/" target="googleFrame" class="button">Button 16</a>
        <a href="https://www.123pan.com/" target="googleFrame" class="button">Button 17</a>
        <a href="https://www.google.com/" target="googleFrame" class="button">Button 18</a>
        <a href="https://www.123pan.com/" target="googleFrame" class="button">Button 19</a>
        <a href="https://www.bing.com/search?q=" target="googleFrame" class="button">Button 20</a>
        <!-- 添加更多的按钮 -->
        <!-- <a href="#" class="button">Button 4</a> -->
        <!-- <a href="#" class="button">Button 5</a> -->
        <!-- ... -->
    </div>
</body>
</html>

复制以上代码到时文档,后缀名修改为html。
导航代码