html5只是一个界面的美观,自身没有搜索功能。
也可以使用百度等搜索引擎的站内搜索,配合html5显示效果更佳。
HTML5+CSS3小实例之伸缩式动态搜索框
技术栈:HTML+CSS
字体图标库:font-awesome
效果:
源码:
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<body>标签中,输入html代码(其中icon.png是放大镜图标):。
<div>
<input type="text" />
<img style="width: 20pxposition: absoluteleft: 140pxtop: 15px" src="icon.png" />
</div>
3、浏览器运行index.html页面,此时输入框右边添加了放大镜。