`
jjklmm
  • 浏览: 57058 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

实用搜索框样式

css 
阅读更多

效果图:

参考网址:http://www.miiceic.org.cn/eg/eg9/sousuokuang.html

 

<!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>安博中程企业培训,企业内训,专注于android培训,软考培训,软件开发,软件工程,嵌入式,UI设计,重构,架构等IT企业培训</title>
<meta name="keywords" content="企业培训,企业内训,android培训,软考培训,it企业培训"/>
<meta name="description" content="安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌."/>
<meta name="copyright" content="安博教育集团 中程在线北京科技有限公司版权所有"/>
</head>
<style>
.index_top_4 { float:left; height:33px; margin-top:22px; margin-left:27px; border-top:1px solid #c00; background:#3675b1 }
.select {border-top:1px solid #14528d;border-right:none;border-bottom:1px solid #14528d;border-left:1px solid #14528d;float:left;
display: inline;height:23px;padding-top:3px;padding-right:3px;margin-top:2px;margin-left:4px;background:#FFF;}
.select div {border:none;float: left;}
* html .select div select {display:block;float:left;margin:-2px;//控制option框的位置}
.select select>option {text-indent: 0px; //option在FF等非IE浏览器缩进2px}
.index_top_4 .index_top_4_1 { width:90px; border:0px; font-size:14px }
.index_top_4 .in1 { float:left; font-size:14px; width:283px; height:21px; padding-top:5px; padding-left:6px; margin-top:2px; border:1px solid #14528d }
.index_top_4 .in2 { float:left; margin-left:3px }
</style>
<body>
<form name="FormSearch2" method=post action="" class="index_top_4">
<div class="select">
<div>
<select name="typeid" class="index_top_4_1">
<option value="0">&nbsp;企业培训</option>
<option value="1" selected="selected">&nbsp;安博中程</option>
<option value="2">&nbsp;公开课</option>
<option value="6">&nbsp;企业内训</option>
<option value="3">&nbsp;专家团队</option>
<option value="4">&nbsp;高端课程</option>
</select>
</div>
</div>
<input name="Keyword" onFocus="if(this.value=='请输入您想要了解的讲师或课程名称!'){this.value=''}" onBlur="if(this.value==''){this.value='请输入您想要了解的讲师或课程名称!'}" value="请输入您想要了解的讲师或课程名称!" class="in1"/>
<input  src="i_37.gif" input type="image" name="Submit" class="in2" />
</form>
</body>
</html>

 

参考网址:http://www.miiceic.org.cn/eg/eg9/sousuokuang.html

  • 大小: 10.7 KB
0
0
分享到:
评论

相关推荐

    移动端H5实现搜索框样式源码

    通过以上步骤,我们可以构建一个既美观又实用的移动端H5搜索框。在实际项目中,还需要根据具体需求和设计风格进行调整和优化,确保搜索框与整个应用的风格一致,提供顺畅的用户体验。同时,不断学习和跟进新的前端...

    封装历史搜索记录功能 & 样式的搜索框.

    "封装历史搜索记录功能 & 样式的搜索框"是一个常见且实用的需求,它能提升用户体验,使用户能够方便地访问和重复使用过去的搜索记录。下面将详细介绍这个主题,并基于提供的文件名`Search_Layout-master`来推测其...

    CSS样式搜索框美化系列(4)

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或...通过不断实践和调整,我们可以创建出既美观又实用的搜索框,提升网站的整体质感。记得在实践中不断探索和创新,让CSS成为提升用户体验的强大工具。

    纯css3 ui搜索框样式代码

    总的来说,纯CSS3 UI搜索框样式代码展示了CSS3的强大和灵活性,使得开发者能够创建出既美观又实用的交互界面,同时保持代码的简洁和高效。对于前端开发者来说,熟练掌握这些技巧是提高网站或应用用户体验的关键。

    淘宝网选项卡类型搜索框样式代码.zip

    总之,“淘宝网选项卡类型搜索框样式代码”是一个实用的前端开发资源,可以帮助开发者快速构建具备高级搜索功能的网页,同时提供了一个良好的用户交互体验。通过学习和使用这个代码,开发者可以加深对jQuery和前端...

    jQuery仿腾讯首页搜索框样式.zip

    通过分析这个项目的源码,你可以学习到如何用jQuery实现一个功能完整、交互流畅的搜索框,这对于网页开发和前端工程师来说是一项实用的技能。同时,这也是一个练习CSS样式控制和响应式设计的好机会。

    CSS3实现非常实用超好看的搜索框和按钮样式.zip

    本压缩包文件"CSS3实现非常实用超好看的搜索框和按钮样式.zip"正是围绕这个主题,帮助开发者们创建吸引眼球的搜索框和按钮样式。 在CSS3中,我们可以利用多种技术来美化搜索框和按钮,例如: 1. **边框和背景**:...

    7种纯CSS3提升用户体验的搜索框UI设计效果.rar

    这些搜索框样式不仅美观独特,而且功能实用,可以满足不同网站或应用程序的需求。通过使用CSS3技术,这些搜索框样式可以实现动态效果,如悬停、焦点、过渡等,进一步提升用户体验。前端工程师可以根据自己的需求选择...

    一款jQuery仿腾讯qq首页搜索框样式代码.zip

    总的来说,这款代码提供了一个实用的示例,帮助前端开发者快速实现一个功能完善的、具有腾讯QQ风格的搜索框,对于学习和应用jQuery技巧以及前端交互设计有着积极的意义。通过学习和研究这个代码,开发者可以提升自己...

    ext定制:搜索框

    通过上述步骤和细节,我们了解了如何在Ext JS中实现一个既美观又实用的搜索框组件。这种自定义不仅限于视觉上的改进,还包括功能上的增强,比如增加搜索建议、优化搜索算法等。总之,Ext JS提供了一个强大而灵活的...

    纯CSS3 UI制作搜索框样式特效代码

    在本文中,我们将深入探讨如何使用CSS3来创建具有各种样式和特效的UI搜索框。CSS3是CSS(层叠样式表)的...总的来说,掌握CSS3的这些技巧,你就能制作出极具创意和实用性的搜索框样式,提升网站或应用的整体用户体验。

    漂亮实用的jQuery分页样式插件代码

    本资源提供了一款“漂亮实用的jQuery分页样式插件代码”,适用于那些希望为网站添加美观、易用的分页功能的开发者。这款插件采用红色主题,具有无刷新的分页效果,并且集成了搜索功能,增强了用户体验。 首先,...

    6种非常精美的Web前端搜索框展示(附源码)

    设计师通常会考虑边框样式、背景色、字体、按钮设计以及输入提示等因素,以创造出既实用又美观的搜索框。 接着,"搜索框"这一关键词涉及到HTML、CSS和JavaScript等技术。一个基本的搜索框由HTML的`&lt;input&gt;`元素创建...

    jQuery下拉美化搜索表单样式代码.zip

    本资源"jQuery下拉美化搜索表单样式代码.zip"提供了针对下拉搜索框的美化解决方案,特别强调了对老旧浏览器如IE6的兼容性,这对于仍需支持旧版本浏览器的开发者来说是一大福音。 jQuery是一款轻量级的JavaScript库...

    仿新浪搜索框

    通过以上知识点的运用,我们可以构建出一个既美观又实用的仿新浪搜索框。实际操作中,开发者会根据需求调整各个属性的值,以达到最佳的视觉效果和用户体验。这个项目不仅展示了CSS和HTML的协同工作,也突显了前端...

    7组漂亮的纯CSS3搜索框

    在这个主题下,我们将深入探讨7组不同的CSS3搜索框设计方法,它们展示了如何通过纯CSS实现各种样式和交互效果。 首先,CSS3的边框半径属性允许我们创建圆形或椭圆形的搜索框,这在现代网页设计中非常流行。例如,第...

    IOS自定义搜索框

    本文将深入探讨如何在iOS中创建一个自定义搜索框,以及如何使其既简单又实用。 首先,我们需要了解iOS中的UISearchBar。苹果提供了一个内置的UISearchBar类,它已经包含了基本的搜索功能和UI元素。然而,为了满足...

    html自定义搜索框

    在网页设计中,HTML(超文本标记语言)是构建页面结构的基础,而自定义搜索框则是提高用户体验和网站互动性的重要元素。...通过不断学习和实践,你可以创建出既美观又实用的自定义搜索框,提升你的网站品质。

    div+CSS框架样式

    这种方式不仅能够提高网页的可维护性、可扩展性和搜索引擎友好度,还能够让页面设计更加灵活多样。 #### 一、基本概念 - **`div`**:`div`是HTML中的一个块级元素,它可以用来组合文档中的其他元素,以便通过CSS对...

    搜索框js特效

    在网页设计中,搜索框是不可...总结来说,“搜索框js特效”涉及了JavaScript编程、DOM操作、CSS样式设计以及用户体验优化等多个方面,通过这些技术的综合运用,可以打造出既实用又美观的搜索功能,提升网站的整体品质。

Global site tag (gtag.js) - Google Analytics