`

HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

 
阅读更多
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>请使用支持HTML5的现代浏览器。使用chrome可以体验语音搜索效果。</title>
<style type="text/css">
	.search_form{position:relative; height:31px; margin:60px;display:inline-block;} 
	.search_form:hover{-webkit-box-shadow:0 0 3px #999;-moz-box-shadow:0 0 3px #999}
	.sinput{float:left; width:200px; height:21px; line-height:21px; padding:4px 7px; color:b3b3b3;  border:1px solid #999; border-radius:2px 0 0 2px; background-color:#fbfbfb;} 
	.sbtn{
		float:left; 
		width:50px; 
		height:31px;
		padding:0 12px;
		margin-left:-1px; border-radius:0 2px 2px 0; border:1px solid #4d90fe; background-color:#4d90fe; cursor:pointer;  display:inline-block; font-size:12px; vertical-align:middle; color:#f3f7fc;position:absolute;} 
	.sbtn:hover{background:#4084f2} 
</style>
</head>

<body>
<form action="#" method="get" class="search_form">     <input type="text" name="s" class="sinput" placeholder="输入 回车搜索" autofocus x-webkit-speech>      <input type="submit" value="搜索" class="sbtn"> </form> 
</body>
</html>
分享到:
评论

相关推荐

    HTML5+CSS3网页设计模板(30例)zip

    HTML5和CSS3是现代网页设计的两大核心技术,它们为创建功能丰富、视觉吸引人的网页提供了强大的工具。这个"HTML5+CSS3网页设计模板(30例)"压缩包文件包含了一系列现成的设计模板,适合初学者和专业设计师用于学习和...

    HTML5+CSS3网站设计基础教程 源代码.rar

    HTML5和CSS3是现代网页设计的基石,它们极大地提升了网页的交互性和视觉表现力。在"HTML5+CSS3网站设计基础教程"中,你可以深入学习这两种技术的基础知识,从而构建出美观、功能丰富的网站。 HTML5是第五代超文本...

    83套HTML5+CSS3+DIV网页模板

    HTML5和CSS3是现代网页开发的两大核心技术,它们共同为网页设计师和开发者提供了丰富的功能和优雅的表现形式。本资源包含83套精心设计的HTML5+CSS3+DIV网页模板,这些模板不仅展示了这两项技术的强大组合,还为学习...

    基于html5+css3实现的精美聊天界面demo

    【HTML5+CSS3精美聊天界面】:这个项目展示了如何利用HTML5和CSS3的先进技术来构建一个引人入胜的、实时的两人聊天界面。HTML5是现代网页开发的标准,它提供了许多增强功能,如离线存储、媒体元素、拖放功能、表单...

    HTML5+CSS3网站设计基础教程(第2版)_源代码.zip

    HTML5和CSS3是现代网页设计的核心技术,它们极大地丰富了网页的表现力和交互性。在"HTML5+CSS3网站设计基础教程(第2版)"中,读者可以学习到如何利用这两种语言构建功能强大且视觉效果出众的网站。 HTML5作为新...

    html5+div+css3网站样式模板

    HTML5+Div+CSS3是现代网页设计与开发的核心技术,它们共同构成了网站的结构、样式和交互。本文将深入探讨这些技术,并基于"html5+div+css3网站样式模板"这一主题,阐述相关知识点。 HTML5是超文本标记语言...

    HTML5+CSS3网页设计与制作电子教材.rar

    HTML5和CSS3是现代网页开发的两大核心技术,它们共同为网页提供了丰富的表现力和强大的交互性。HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,而CSS3则是层叠样式表(Cascading Style Sheets)...

    响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 课后练习

    响应式 Web 开发项目教程(HTML5+CSS3+Bootstrap)第 2 版第 1 章 HTML5+CSS3 初体验课后练习 本资源涉及到的知识点包括 HTML5、CSS3、Bootstrap 等响应式 Web 开发技术。下面是对每个知识点的详细解释: 一、 ...

    HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面(附完整答案和学生用要求及素材)

    在本项目中,"HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面" 提供了一个实践性的学习机会,让学生深入理解并应用前端开发技术,特别是针对网页设计与制作。这个项目以“杭帮美食”为主题,...

    html5+css3官方手册.chm

    html5+css3官方手册.chm html5+css3官方手册.chm html5+css3官方手册.chm html5+css3官方手册.chm html5+css3官方手册.chm html5+css3官方手册.chm html5+css3官方手册.chm

    html5+css3面试题答案.docx

    HTML5 和 CSS3 面试题答案 HTML5 和 CSS3 是当前 Web 开发中两个非常重要的技术,以下是关于 HTML5 和 CSS3 的一些常见面试题答案: 优雅降级和渐进增强 优雅降级(Gracious Degradation)和渐进增强...

    几套HTML5+css3后台模板

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉效果出色的后台管理系统提供了强大的支持。本文将详细解析"几套HTML5+css3后台模板"中的核心概念,以及如何利用这些技术来构建高效且美观的管理...

    利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

    最新因项目需要,就利用HTML5+css3+jquery+weui做了一个仿微信聊天界面功能,可以发微信表情,查看图片、视频…         由于代码较长,小编打包了。需要的朋友点击下载。 具体代码如下所示: ...

    html5+css3告白网页

    总的来说,这个“html5+css3告白网页”项目展示了HTML5和CSS3的综合运用,包括但不限于语义化标签、多媒体支持、动态效果、响应式布局和个性化内容编辑。这样的项目不仅能够帮助你在技术上加深理解,还能让你体验到...

    html5+css3+js动态气泡背景用户登录页面模板

    html5+css3+js动态气泡背景用户登录页面模板,适用于个性化的网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板,DW网页成品源代码等,2000+套Web案例源码,优质文章,...

    html5+css3模板企业网页模板整站下载.zip

    这套企业网页模板使用HTML5和CSS3编写,确保了网站的兼容性、可访问性以及搜索引擎优化的友好性。企业可以利用这套模板快速搭建起一个现代化的企业网站,而无需从零开始进行复杂的网页设计和编码工作。同时,它也...

    HTML5+CSS3中文参考手册(3手册) chm版中文参考手册打包

    这份"HTML5+CSS3中文参考手册(3手册) chm版中文参考手册打包"包含两个重要的资源:HTML5和CSS3的中文电子书,为开发者提供了详细的技术指导和规范说明。 首先,我们来看HTML5。HTML5是HTML(超文本标记语言)的最新...

    HTML5+CSS3中文参考手册(3手册).zip

    HTML5和CSS3是现代网页开发的两大核心技术,它们共同构建了丰富、动态且响应式的网页界面。HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,而CSS3则是层叠样式表(Cascading Style Sheets)的...

    HTML5+CSS3 漂亮后台管理系统登录界面

    HTML5和CSS3是现代网页开发的两大核心技术,它们共同为网页设计师提供了强大的工具,创造出交互性和视觉效果俱佳的用户界面。在这个“HTML5+CSS3 漂亮后台管理系统登录界面”项目中,我们可以深入探讨这两个技术如何...

    动态网页设计与制作(HTML5+CSS3+JavaScript)源代码和素材.zip

    HTML5、CSS3和JavaScript是构建现代网页的三大核心技术,它们共同作用于动态网页的设计与制作,赋予网页交互性、视觉吸引力和功能多样性。在这个"动态网页设计与制作(HTML5+CSS3+JavaScript)源代码和素材.zip"压缩包...

Global site tag (gtag.js) - Google Analytics