注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

CSS内嵌式修饰搜索框  

2017-11-23 20:14:31|  分类: 搜索代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

设定CSS样式使用的主要是内嵌式,内嵌式是由选择器名称、声明构成的选择器。 基本选择器有标记、类别和ID三种,复合选择器有交集、并集和后代三种。其中类别、后代选择器应用的较多。本文是以标记、类别选择器为例,对搜索框进行修饰,同时添加了提示功能。
<style type="text/css">
input{display:inline;float:left;width:80px;height:25px;line-height:25px;background:#9FC3EA;font:15px 黑体;color:#fff;border:0;}
/*名称框:显示内联,左浮动对齐,按钮宽高,行间距25px,背景颜色,文字大小黑体,文字颜色,去掉边框*/
.wor{display:inline;float:left;padding-left:20px;width:180px;height:25px;line-height:normal;border:2px solid #9FC3EA;border-left:0;
background:#fff url
(http://img01.taobaocdn.com/imgextra/i1/743621069/T2lP7qXqlXXXXXXXXX-743621069.jpg) no-repeat;color:#000;}
/*输入框:显示内联,左对齐,内左间距20px,边框宽高,行高正常,边框粗细样式颜色,去掉左边框,背景颜色、图片(图址),不重复 ,文字颜色*/
</style>
<form action="http://v.baidu.com/v" target="_blank">
<input type="button" value="百度视频"onclick="window.open('http://v.baidu.com/')">
<input type="text" class="wor" name="word" baiduSug="1">
<input name="rn" type="hidden" value="27">
<input name="ie" type="hidden" value="utf-8">
<input type="submit" style=width:50px value="搜索">
</form><br><br><br>
<form action="http://v.chinaso.com/search/so" target="_blank">
<input type="button" value="国搜视频" onclick="window.open('http://v.chinaso.com/')">
<input type=" text"class="wor" name="q" baiduSug="1" >
<input type="submit"style=width:50px value="搜索">
</form><br><br>
<form action="https://v.qq.com/x/search/" target="_blank">
<input type="button" value="腾讯视频" onclick="window.open('https://v.qq.com/')">
<input type="text" class="wor" name="q"  baiduSug="1">
<input type="submit"style=width:50px value="搜索">
</form><br><br>
<form action="http://so.tv.sohu.com/mts" target="_blank">
<input type="button" value="搜狐视频" onclick="window.open('http://tv.sohu.com/')">
<input type="text" class="wor" name="wd" baiduSug="1">
<input type="submit"style=width:50px value="搜索">
</form><br><br>
<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>
<!-提示框js代码->

效果截图:
测试7. - 火力光波 - 火力光波的博客


测试工具:代码运行
相关连接:CSS行内式修饰搜索框

  评论这张
 
阅读(22)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018