热门关键字:百度hi 百度空间代码 兴业 中国 cms 百货 理财 百度创业
当前位置:Hi部落 >> 百度HI空间 >> Hi空间代码 >> 浏览文章

自己定义百度搜索框

来源:互联网作者:佚名 点击:

下面咱们一起来学习一下自定义你的百度空间搜索

一共有四种样式供大家选择:(先别问添加方法,一会就具体的告诉你,别走开哦 !)

1、输入框样式

点此在新窗口浏览图片 点此在新窗口浏览图片 
点此在新窗口浏览图片 点此在新窗口浏览图片 

代码如下:
#mod_search div.modhead span{display:none;}
#mod_search div.modbox label{display:none;}
#mod_search div.modbox div{display:block!important;text-align:left!important;}

2、提交按钮样式

 

代码如下:
#mod_search div.modbox .text{
 border:transparent;
 font-family: "Times New Roman";
 font-size: 12px;
 width:213px!important;
 height:43px;
 padding-top:15px;
 padding-bottom:15px;
padding-left:20px;
 background:url(/Upfiles/BeyondPic/2008-04/20084233677670704.jpg) no-repeat left;
}

3、let'sgo样式

 

代码如下:
#mod_search div.modbox .submit{
background:url(/Upfiles/BeyondPic/2008-04/20084231259921077.jpg)no-repeat center center;
width:120px;
height:35px;
color:transparent;
border:transparent;
padding-top:35px;
margin-top: 5px;
}

4、透明样式

 

代码如下:
#mod_search div.modhead{display:none;}
#mod_search div.modbox label{display:none;}
#mod_search div.modbox div{display:block!important;}
#mod_search div.modbox .text{
border:#666666 1px solid;
background:url(/Upfiles/BeyondPic/2008-04/20084235180667238.jpg) repeat-x top;
}
#mod_search div.modbox .submit{
width:70px;
height:22px;
padding-top:2px;
margin-top:10px;
border:#666666 1px solid;
background:url(/Upfiles/BeyondPic/2008-04/20084230002519113.jpg) repeat-x bottom center;
cursor:hand;
font-size:12px!important;
}

以上四种样式已经演示完毕,相信你一定选择使用哪一种样式了,那么现在我们来学一下把你喜欢的样式代码添加到哪里呢?

大家都看到了以上代码均是以#mod开头的,所以你只要把你喜欢的样式代码添加到mod模块的下面的就可以了,如果你还是不太明白百度空间css代码的各个id,那么请参考:百度空间新手必读的css解释说明,如果你还是有疑问的话,那么就给我留言吧!

代码解释:(不管你看不看,但是为大家做最全面的服务是我的责任

样式1的代码解释
#mod_search div.modhead span{display:none;}/*去除百度搜搜字样*/
#mod_search div.modbox label{display:none;}/*去除radio选项,当然在这里也可以控制选项字体*/
#mod_search div.modbox div{display:block!important;text-align:left!important;}/*让搜索模块左对齐*/

样式2的代码解释
#mod_search div.modbox .text{
 border:transparent;/*边框透明化既去除边框*/
 font-family: "Times New Roman";
 font-size: 12px;
 width:213px!important;
 height:43px;
 padding-top:15px;/*这三句padding是为了给“上下左”各加一个补丁,把光标固定在图片的适当位置*/
padding-bottom:15px;
padding-left:20px;
 background:url(/Upfiles/BeyondPic/2008-04/20084233677670704.jpg) no-repeat left;
}

 

样式3的代码解释
#mod_search div.modbox .submit{
background:url(/Upfiles/BeyondPic/2008-04/20084231259921077.jpg) no-repeat center center;
width:120px;
height:35px;
color:transparent;
border:transparent;
padding-top:35px;/*这句话是为了让百度搜索那几个字从视线上消失从而不影响背景图片效果*/
margin-top: 5px;/*按钮离搜索框的距离*/
}

样式4的代码没有解释,呵呵!点此在新窗口浏览图片

希望大家使用愉快!

 

最新评论
发表评论
关于本站-帮助(?)-免责声明-广告服务-联系我们-企业服务-网站地图

Copyright 2008 Powered by Hibulo.COM,Hi部落 All Rights Reserved.
客服QQ:234699994 119149540 E-Mail:hibulo@163.com