Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-25 15:31:28

仿百度搜索框仿百度搜索框样式百度搜索框代码 360搜索代码

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta content="" name="author" />
<meta content=",," name="keywords" />
<meta content="" name="description" />
<meta content="all" name="robots" /><style type="text/css">

* {
	margin:0;
	padding:0;
}
body {
	margin:10px 0;
}
#menu {
	width:300px;
	margin-left:50px;
}
#menu ul {
	margin:0;
	padding:0;
}
#menu ul li {
	float:left;
	width:80px;
	margin-left:1px;
	text-align: center;
	background-color: #ddd;
	font-weight: bold;
	padding:3px;
	font-size: 14px;
}
a {
	text-decoration: none;
}
#content1,#content2,#content3{
	height:20px;
	border: 1px #ccc solid;
	width:280px;
	padding:2px;
	clear: left;
	font-size: 12px;
	margin-left:53px;
}
#content1 ul,#content2 ul,#content3 ul {
	list-style: none;
	margin:0;
}
#link1 {
	color:#f00;
}
#link2 {
	color:#369;
}
#link3 {
	color:#369;
}</style><script type="text/JavaScript">

</script>
<title>仿yahoo风格搜索切换效果</title><div id="menu">
<ul>
    <li><a id="link1" onclick="chcontent(1);return false;" href="#nogo">网页搜索</a> </li>
    <li><a id="link2" onclick="chcontent(2);return false;" href="#nogo">音乐搜索</a> </li>
    <li><a id="link3" onclick="chcontent(3);return false;" href="#nogo">图片搜索</a> </li>
</ul>
</div>
<div id="content1">
<form>
    搜索网页:<input /><input type="submit" value="搜索" />
</form>
</div>
<div id="content2" style="DISPLAY: none">
<form>
    搜索音乐:<input /><input type="submit" value="搜索" />
</form>
</div>
<div id="content3" style="DISPLAY: none">
<form>
    搜索图片:<input /><input type="submit" value="搜索" />
</form>
</div>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章： hover鼠标事件指向时自动切换搜索条件素材网页代码

下一篇文章：页内搜索功能关键词高亮显示js网页代码素材特效

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

仿yahoo风格搜索切换网页特效代码素材

推荐阅读：

相关代码：

标签分类