【html】【21】高级篇--搜索框
2015-12-14 22:30
706 查看
下载: http://www.xwcms.net/js/bddm/25368.html
代码:
View Code
效果:
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>淘宝网选项卡类型搜索框样式代码 - xw素材网</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $(".bodys p").not(":first").hide(); $(".searchbox ul li").mouseover(function(){ var index = $(this).index(); if(index==0){ $(this).find("a").addClass("style1"); $("li").eq(1).find("a").removeClass("style2"); $("li").eq(2).find("a").removeClass("style3"); } if(index==1){ $(this).find("a").addClass("style2"); $("li").eq(0).find("a").removeClass("style1"); $("li").eq(2).find("a").removeClass("style3"); } if(index==2){ $(this).find("a").addClass("style3"); $("li").eq(0).find("a").removeClass("style1"); $("li").eq(1).find("a").removeClass("style2"); } var index=$(this).index(); $(".bodys p").eq(index).show().siblings().hide(); }); }); </script> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* searchbox */ .searchbox{width:520px;height:80px;margin:40px auto 0 auto;} .searchbox ul{ height:35px; width:500px; list-style:none; margin-left:20px} .searchbox ul li{ float:left} .searchbox ul li a{ float:left; line-height:35px; padding:0 20px; text-decoration:none; color:#000; font-size:14px; font-weight:bold;} .searchbox ul li .style1{ background-color:#000; color:#fff} .searchbox ul li .style2{ background-color:#f00;color:#fff} .searchbox ul li .style3{ background-color:#F90;color:#fff} .bodys input{ height:30px;line-height:30px;width:390px;padding:0 10px;float:left;} .bodys .one{ border:#000 3px solid} .bodys .two{ border:#f00 3px solid} .bodys .three{ border:#F90 3px solid} .bodys .one1{ background-color:#000; } .bodys .two2{ background-color:#f00;} .bodys .three3{ background-color:#F90;} .bodys button{float:left;border:0;height:36px;width:100px; color:#FFF; line-height:36px;text-align:center;overflow:hidden;} </style> </head> <body> <div class="searchbox"> <ul class="border1"> <li><a href="#" class="style1">宝贝</a></li> <li><a href="#">天猫</a></li> <li><a href="#">店铺</a></li> </ul> <div class="bodys"> <p><input type="text" value="" id="" class="one" placeholder="输入宝贝" /><button class="one1">搜索</button></p> <p><input type="text" value="" id="" class="two" placeholder="输入宝贝" /><button class="two2">搜索</button></p> <p><input type="text" value="" id="" class="three" placeholder="输入店铺" /><button class="three3">搜索</button></p> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> </div> </body> </html>
View Code
效果:
![](http://images2015.cnblogs.com/blog/728481/201512/728481-20151214223000459-1695713258.png)
相关文章推荐
- 了解HTML列表
- HTML 文档的字符编码未声明。如果该文件包含 US-ASCII 范围之外的字符,该文件将在某些浏览浏览器配置中呈现为乱码。页面的字符编码必须在文档或传输协议层声明。
- HTML一些基本的常用标签
- HTML字符实体
- html 基础
- 去掉字符串中的html标签的方法
- html基础内容的学习
- 重拾信心的第一天,学习HTML
- html端编码规范
- 将html中table的内容导出为excel
- 关于html页面head标签顺序
- html img加载失败,怎样替换为默认图片
- HTML head 头标签
- libtidy,htmlcxx-优秀的html解析库介绍
- HTML插入SWF
- HTML格式与布局
- HTML转义字符串
- HTML转义字符串
- HTML图片热点、网页划区、拼接、表单
- HTML标签与表格