着HTML5的深入人心,越来越多的新功能得以应用。HTML5与CSS3相结合可以非常简单的实现很多超酷的效果。本文为您讲解使用HTML5和CSS3打造自动获得焦点、支持语音输入的超酷的搜索框。
HTML
我们在页面中放置一个搜索表单form,在表单中分别有一个输入框以及一个搜索按钮。
<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>
细心的您会发现输入框input中多了三个属性,分别是placeholder,autofocus,x-webkit-speech,它们有着不同的作用。
placeholder:是为了设置初始值,并且这个初始值的颜色为灰色,当输入框input的内容变动时,这个值就消失。
autofocus:自动聚焦,当进入当前页面时,这个搜索输入框会自动获取焦点,而你可以在打开页面后直接输入关键字按回车键进行搜索。当autofocus出现两次以上的时候,浏览器会选择最后一个带有autofocus属性的输入框input聚焦。
x-webkit-speech:webkit核的浏览器(如Chrome)特有的语音识别工具,使用x-webkit-speech后,在输入框的右侧会出现一个小话筒,点击话筒,会提示“请开始说话”,用户可以通过麦克风输入语音,浏览器会自动识别语音内容,并将识别的结果显示在输入框中。
以前需要借助一大段Javascript代码来实现的聚焦和输入光标移开输入框的交互效果,而使用HTML5则只需要设置几个属性一切就OK了。
CSS
单单只是设置属性和实现功能还不够,我们可以用CSS3来对搜索框进行美化,让它更有亲和力。
.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}
相关推荐
HTML5+CSS3 网页布局任务教程课件汇总整本书电子教案全套课件完整版 ppt 教学教程 HTML5+CSS3 是网页开发的两大基石, HTML 负责网页的结构, CSS 负责网页的表现。网页开发需要使用 HTML 和 CSS 语言, HTML 负责...
HTML5、CSS3和JavaScript是现代网页开发的三大核心技术,它们共同构建了互联网上丰富多彩的交互式用户体验。这篇教程结合源代码,旨在帮助初学者快速入门这三门语言,并掌握实际开发技能。 HTML5(HyperText Markup...
HTML5和CSS3是现代网页设计的两大核心技术,它们为创建功能丰富、视觉吸引人的网站提供了强大的工具。在这个“HTML5+CSS3网站设计基础教程”中,你将深入学习这两门语言的基础知识,并通过动手实践提升实际操作能力...
HTML5和CSS3是现代网页开发的两大核心技术,它们共同为网页设计师和开发者提供了丰富的功能和优雅的表现形式。本资源包含83套精心设计的HTML5+CSS3+DIV网页模板,这些模板不仅展示了这两项技术的强大组合,还为学习...
HTML5和CSS3是现代网页开发的基石,它们极大地提升了网页设计的灵活性和表现力。在JavaWeb前端开发中,熟练掌握这两项技术是至关重要的,因为它们可以帮助开发者创建交互性强、视觉效果丰富的网页,同时优化用户体验...
HTML5、CSS3和JavaScript是现代Web前端开发的三大核心技术,它们共同构建了网页的结构、样式和交互性。这份“HTML5+CSS3+JavaScript Web前端开发案例教程(慕课版)-测试卷.rar”压缩包文件包含了针对这三种技术的...
HTML5和CSS3是现代网页开发的基石,它们极大地提升了网页的设计与功能实现能力。HTML5作为最新的超文本标记语言标准,着重提升了用户体验和开发者的工作效率,而CSS3则为网页样式提供了更多丰富的选择和控制。 ...
html5+css3+js登录页面模板,适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板,DW网页成品源代码等,2000+套Web案例源码,优质文章,关注作者获取更多源码。
HTML5和CSS3是现代网页开发的两大核心技术,它们共同为网页设计师和开发者提供了丰富的功能和优雅的样式控制。此“html5+css3课件打包”资源包含了从基础到高级的一系列课程材料,旨在帮助学习者全面掌握这两门语言...
HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉效果吸引人的网页提供了强大的工具。在这个“HTML5+CSS3期末大作业——城市简介源码”项目中,学生或开发者将有机会实践这两门技术,构建一个...
HTML5+CSS3网页设计基础教程教学课件汇总完整版电子教案.pptx
HTML5和CSS3是现代网页开发的两大核心技术,它们为网页设计带来了前所未有的可能性和交互体验。本实例聚焦于HTML5+CSS3实现的3D立方体旋转效果,这是一个能够吸引用户注意力,提升网站视觉吸引力的炫酷特效。 HTML5...
《Web前端开发案例教程(HTML5+CSS3)(微课版)》是一份重要的教学资料,主要关注现代Web开发的基础技术,即HTML5和CSS3。这些技术是构建交互式、响应式和动态网页的核心工具。源代码的提供使得学习者能够深入理解...
### HTML5+CSS3网页设计与制作教学大纲分析 #### 一、课程性质与目标解析 **《HTML5+CSS3网页设计与制作》**作为一门面向计算机及相关专业的专业基础课程,旨在帮助学生掌握现代网页设计的核心技术。通过本课程的...
最新因项目需要,就利用HTML5+css3+jquery+weui做了一个仿微信聊天界面功能,可以发微信表情,查看图片、视频… 由于代码较长,小编打包了。需要的朋友点击下载。 具体代码如下所示: ...
html5+css3笔记资料
HTML5+CSS3 网站设计基础教程知识点总结 《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。本课程旨在让学生了解网页开发...
这本书包含HTML5和CSS3的详细讲解,以及配套的实战代码示例,覆盖了从基础知识到高级特性的全面内容。以下是针对这两个重要技术的知识点详解: 一、HTML5 1. 结构元素:HTML5引入了新的语义化元素,如、、、、和,...
html5+css3+js动态气泡背景用户登录页面模板,适用于个性化的网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板,DW网页成品源代码等,2000+套Web案例源码,优质文章,...
HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉效果出色的网页提供了强大的工具。在“60套HTML5+CSS3后台管理登录模板 响应式 bootstrap”这个资源中,你将有机会接触到一系列精心设计的后台...