`

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+JS代码

    HTML5、CSS3和JavaScript是构建现代网页和应用程序的核心技术,它们共同构成了Web开发的三驾马车。在本篇文章中,我们将深入探讨这三种技术的详细知识点,并结合《精通html5+css3+JavaScript页面设计》这本书中的...

    HTML5+CSS3网站设计基础教程_动手实践源代码

    HTML5和CSS3是现代网页开发的两大核心技术,它们共同构建了丰富、动态且响应式的网页界面。HTML5是超文本标记语言的最新版本,它引入了许多新的元素、属性和API,旨在提升网页的结构化和语义化,以及增强其多媒体...

    (完整版)《HTML5+CSS3网站设计基础教程》_教学大纲.pdf

    HTML5+CSS3 网站设计基础教程知识点总结 《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。本课程旨在让学生了解网页开发...

    《HTML5+CSS3网站设计基础教程》源代码+补充案例+动手实践

    4. **表单增强**:HTML5提供了新的表单控件,如日期选择器、搜索框、电子邮件输入等,以及对表单验证的支持,提高了用户体验和数据准确性。 CSS3(Cascading Style Sheets Level 3)是CSS的最新版本,它扩展了样式...

    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+CSS3网页设计与制作电子教材.rar

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

    HTML5+CSS3从入门到精通.zip

    HTML5和CSS3是现代网页开发的基石,它们极大地提升了网页设计的灵活性和表现力。在JavaWeb前端开发中,熟练掌握这两项技术是至关重要的,因为它们可以帮助开发者创建交互性强、视觉效果丰富的网页,同时优化用户体验...

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

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

    html5+css3+js登录页面

    html5+css3+js登录页面模板,适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板,DW网页成品源代码等,2000+套Web案例源码,优质文章,关注作者获取更多源码。

    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移动商城-购物车

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉效果出色的移动商城提供了强大的支持。在这个“HTML5+CSS3移动商城-购物车”项目中,我们将探讨如何利用这两种技术来实现一个功能完备且用户体验...

    HTML5+CSS3移动商城-分类

    HTML5和CSS3是现代网页开发的两大核心技术,它们在构建移动商城的分类页面中扮演着至关重要的角色。HTML5提供了更丰富的结构化元素和功能,而CSS3则为页面设计提供了更多的样式控制和动画效果。 一、HTML5的新特性...

    HTML高仿Mac桌面(HTML5+CSS3+Bootstrap)源代码

    HTML高仿Mac桌面(HTML5+CSS3+Bootstrap)源代码 HTML高仿Mac桌面(HTML5+CSS3+Bootstrap)源代码 HTML高仿Mac桌面(HTML5+CSS3+Bootstrap)源代码 HTML高仿Mac桌面(HTML5+CSS3+Bootstrap)源代码 HTML高仿Mac桌面...

    HTML5+CSS3炫酷的手机登陆界面

    HTML5和CSS3是现代网页开发的两大核心技术,它们共同为构建美观、功能丰富的交互式网页提供了强大的支持。在这个“HTML5+CSS3炫酷的手机登录界面”项目中,我们将探讨如何利用这两种技术来创建一个吸引人的移动端...

    《从零开始学HTML5+CSS3》中文PDF及配套代码.rar

    这本书包含HTML5和CSS3的详细讲解,以及配套的实战代码示例,覆盖了从基础知识到高级特性的全面内容。以下是针对这两个重要技术的知识点详解: 一、HTML5 1. 结构元素:HTML5引入了新的语义化元素,如、、、、和,...

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

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

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

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

Global site tag (gtag.js) - Google Analytics