HTML+CSS+JavaScript程序员自制导航搜索页面，炫酷黑客帝国特效源代码，如果你觉得你的搜索页面太乱可以看看这篇文章
Posted 蓝盒子bluebox
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS+JavaScript程序员自制导航搜索页面，炫酷黑客帝国特效源代码，如果你觉得你的搜索页面太乱可以看看这篇文章相关的知识，希望对你有一定的参考价值。
现在的搜索页面广告太多，内容少，不够全面
你可以在我的代码的基础上进行拓展
下面是源代码同时：这是下载地址：
https://download.csdn.net/download/qq_44757034/21379714
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>搜索页面</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
body {
background: #000;
overflow: hidden;
margin: 0;
padding: 0;
}
*{
font-size: 20px;
}
input{
outline:none;
border: #000000;
}
select{
outline:none;
border: #000000;
}
a{
text-decoration:none;
}
</style>
<script>
function chang(){
var http = document.getElementById("key").value;
var baidu = "https://www.baidu.com/s";
var sogou = "https://www.sogou.com/web";
var w360 = "https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome";
var bing = "https://cn.bing.com/search";
var CSDN = "https://so.csdn.net/so/search";
if(http == "百度"){
document.getElementById("action").action=baidu;
document.getElementById("name").name="wd";
}
if(http == "搜狗"){
document.getElementById("action").action=sogou;
document.getElementById("name").name="query";
}
if(http == "360"){
document.getElementById("action").action=w360;
document.getElementById("name").name="q";
}
if(http == "必应"){
document.getElementById("action").action=bing;
document.getElementById("name").name="q";
}
if(http == "CSDN"){
document.getElementById("action").action=CSDN;
document.getElementById("name").name="q";
}
}
</script>
</head>
<body>
<canvas id="cvs" style="z-index: -5; position: absolute;top: 0px;"></canvas>
<form id="action" action="https://www.baidu.com/s" method="get" target="_blank">
<div style="height: 60px; width: 800px;margin: auto;margin-top: 150px;background-color: #000000;color: white;opacity:0.7;border-style: solid;border-color: wheat;border-radius: 15px;border-width: 2px;">
<div style="float: left;margin-left: 10px;">
<select name="key" id="key" onchange="chang()" style="height:60px ;padding-left: 45px; text-align:center;width: 150px;background-color: #000000;color: white;opacity:0.7;">
<option value="百度">百度</option>
<option value="搜狗">搜狗</option>
<option value="360">360</option>
<option value="必应">必应</option>
<option value="CSDN">CSDN</option>
</select>
</div>
<div style="float: left;">
<input id="name" name="wd" style="height:59px;width: 500px;background-color: #000000;color: white;opacity:0.5;" type="text" />
</div>
<div>
<input style="height:60px ;width: 100px;background-color: #000000;color: white;" type="submit" value="搜索" />
</div>
</div>
<div>
<div style="margin: auto; height: 500px; width: 750px;margin-top: 50px;">
<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;">
<a target="_blank" href="https://www.baidu.com/" >
<img height="70" src="img/baidu.png" />
</a>
</div>
<div style="float: left; height: 80px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;padding-top: 20px;margin-left: 10px;">
<a target="_blank" href="https://www.sogou.com/" >
<img height="60" width="190" src="img/sogou.png" />
</a>
</div>
<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
<a target="_blank" href="https://www.so.com/" >
<span style="font-size: 25px;color: forestgreen; line-height: 100px;">360搜索</span>
</a>
</div>
<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
<a target="_blank" href="https://cn.bing.com/" >
<span style="font-size: 25px;color: darkcyan ; line-height: 100px;">bing搜索</span>
</a>
</div>
<div style="clear: both;margin-top: 20px;">
<div style="height: 50px;"></div>
</div>
<div style="float: left; height: 95px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;padding-top: 5px;">
<a target="_blank" href="https://www.google.com/" >
<img height="80" width="160" style="margin-top: 5px;border-radius: 15px;" src="img/google.png" />
</a>
</div>
<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
<a target="_blank" href="https://www.bilibili.com/" >
<img height="80" width="160" style="margin-top: 10px;border-radius: 15px;" src="img/bilibili.PNG" />
</a>
</div>
<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
<a target="_blank" href="https://www.csdn.net/" >
<span style="font-size: 35px;color: red; line-height: 100px;">CSDN</span>
</a>
</div>
<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
<a target="_blank" href="https://www.runoob.com/" >
<span style="font-size: 25px;color: greenyellow ; line-height: 100px;">菜鸟教程</span>
</a>
</div>
<div style="clear: both;margin-top: 20px;">
<div style="height: 50px;"></div>
</div>
<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;">
<a target="_blank" href="https://pan.baidu.com/" >
<span style="font-size: 30px; font-weight: 800; color: cornflowerblue ; line-height: 100px;">百度网盘</span>
</a>
</div>
<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;padding-top: 0px;margin-left: 10px;">
<a target="_blank" href="https://www.dashengpan.com/#/" >
<span style="font-size: 30px; font-weight: 800; color: darkorange ; line-height:<以上是关于HTML+CSS+JavaScript程序员自制导航搜索页面，炫酷黑客帝国特效源代码，如果你觉得你的搜索页面太乱可以看看这篇文章的主要内容，如果未能解决你的问题，请参考以下文章