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

火力光波的博客

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

 
 
 

日志

 
 

CSS行内式修饰搜索框  

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

  下载LOFTER 我的照片书  |

CSS修饰搜索框,有三种使用方式,即:行内式、内嵌式、引入式。所谓“CSS行内式”(又称内链式),就是将“style='CSS规则'”代码,插入在标签(如input)的后面。用CSS行内式修饰搜索框,应将搜索框分成不同部分分别修饰。
实例1,外框、背景、图标修饰
<form  action="
https://www.baidu.com/s" target="_blank">
<!-连接主体->

<table style="border: 1px solid #818686;background-color:#D4D0C8;width:300px;text-align:center" align="center" border="0" cellpadding="0" cellspacing="0">
<!-外边框粗细、样式、颜色,边框背景色,边框宽,文本居中->
<tr><td nowrap style="padding:6px 6px 3px 6px">
<!-不换行,边框扩充上、左、下、右->

<a href="https://www.baidu.com/"target="_blank"><img  src="https://www.2345.com/i/search0320/baidu_web.gif" align="center" border="0"></a>
<!-图标连接->
<input style="font-size:75%;width:170px;height:23px;" name="word" type="text">
<!-输入框:文字大小,框宽、高->
<input style="font-size:75%;line-height:100%;height:23px;width:45px" value="搜索" type="submit">
<!-提交按钮:文字大小,文本高,按钮高,按钮宽-><!-提交按钮:文字大小,文本高,按钮高,按钮宽->
</td></tr></table></form>

 实例1效果截图:
测试6 - 火力光波 - 火力光波的博客
实例2,内框、按钮修饰
<form action="
https://www.baidu.com/s" target="_blank">
<!-连接主体->
<input type="text" name="word" style="display:inline;float:left;padding-left:20px;width:200px;height:25px;line-height:normal;border:2px solid #9FC3EA;border-right:0;background:#fff url
(http://img01.taobaocdn.com/imgextra/i1/743621069/T2lP7qXqlXXXXXXXXX-743621069.jpg) no-repeat;">
<!-输入框:显示内联,左浮动,内左间距20px,边框宽高,正常行间距,边框粗细样式颜色,去掉右边框,背景颜色、图片(图址),不重复 ->
<input type="submit" value="百度一下" style="display:inline;float:left;width:80px;height:25px;line-height:25px;background:#9FC3EA;font:16px 黑体;color:#fff;border:0;cursor:pointer;">
<!-提交按钮:显示内联,左浮动,按钮宽高,行间距25px,背景颜色,文字大小黑体,文字颜色,去掉边框,鼠标指针变化->
</form>
 实例2效果截图:
测试6 - 火力光波 - 火力光波的博客
实例3,名称、内框修饰
<form action="
http://v.baidu.com/v" target="_blank">
<!-连接主体->

<input type="button" style="display:inline;float:left;width:80px;height:25px;line-height:25px;background:#9FC3EA;font:15px 黑体;color:#fff;border:0;" value="百度视频" onclick="window.open('http://v.baidu.com/')">
<!-名称框:显示内联,左浮动,按钮宽高,行间距25px,背景颜色,文字大小黑体,文字颜色,去掉边框->
<input type="text" name="word" style="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;">
<!-输入框:显示内联,左浮动,内左间距20px,边框宽高,行高正常,边框粗细样式颜色,去掉左边框,背景颜色、图片(图址),不重复 ->
<input name="ie" type="hidden" value="utf-8">
<!-编码参数->
<input type="submit" value="搜索"style="width:50px;height:25px;">
<!-提交按钮->

</form>
 实例3效果截图:
测试6 - 火力光波 - 火力光波的博客
 

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

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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