html怎么实现移动端固定悬浮半透明搜索框-mile米乐体育

本文将为大家详细介绍“html怎么实现移动端固定悬浮半透明搜索框”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“html怎么实现移动端固定悬浮半透明搜索框”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css js配合使用并构建优雅的前端网页。

现在互联网已经有成千上百个网站，然而网站少不了的一个功能就是搜索，我们可以看到很多网站的搜索框各有不同，在移动端也是如此，例如：

要制作这样的搜索框，技术关键在于：

fixed 搜索框定位

opacity 设置透明度

solution. 解决

首先我们定义一个 html 片段：

     搜索       

header 标签为搜索框，下面的 p 为一个背景图。

同时附上 css 样式：

 body{ margin:0;padding:0; font-size:14px;font-family:"microsoftyahei",'arial','verdana','helvetica',sans-serif; } .bar{ position:fixed;top:0;left:0;right:0;/*决定了搜索框置顶*/ height:44px;padding:010px; background-color:#fff;opacity:0.8;/*搜索框半透明效果*/ z-index:10; } .barform{ display:block;padding:0;margin:0; } .search-row{ position:relative; height:30px;padding:7px0; } .search-rowinput[type=search]{ position:absolute;top:7px; height:30px;line-height:21px;width:100%;padding:10px15px10px30px; border:0;border-radius:6px;outline:0;background-color:rgba(0,0,0,0.1); font-size:16px;text-align:center; z-index:100; } .search-row.placeholder{ position:absolute;top:2px;left:0;right:0; display:inline-block;height:34px;line-height:34px; border:0;border-radius:6px; font-size:16px;text-align:center;color:#999; z-index:1; } .search-row.placeholder.iconfont{ display:inline-block;width:19px;line-height:24px;padding:10px0; font-size:21px;color:#666; } .search-row.placeholder.text{ line-height:40px; vertical-align:top; } .backgroundimg{ width:100%; } .active:before{ position:absolute;top:11px;left:5px;right:auto; display:block;margin-right:0; font-size:21px; } .activeinput[type=search]{ text-align:left } .active.placeholder{ display:none } 

很长的一段 css 样式，但是其核心就两句话position: fixed; /* 决定了搜索框置顶 */ 和 background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */，其他的样式均为了页面的排版，排版的细节需要各位读者自己写一遍理解，过程可能需要花费点时间。

这样我们就完成了一个静态的搜索框：

备注：这里的搜索图标使用了 iconfont，读者可自行到 iconfont矢量图标库 下载。

至此，我们还需要通过 js 实现一些动效：

用于实现用户切换输入时「搜索」位置图标的切换，原理很简单，增加和移除 class 类，这些类定义了样式。

.active:before{ position:absolute;top:11px;left:5px;right:auto; display:block;margin-right:0; font-size:21px; } .activeinput[type=search]{ text-align:left } .active.placeholder{ display:none }  /*输入框获取到焦点表示用户正在输入*/ $("#word").focusin(function(){ $(".search-row").addclass("activeiconfonticon-sousuo"); }); /*输入框失去焦点表示用户输入完毕*/ $("#word").focusout(function(){ /*判断用户是否有内容输入*/ if($(this).val()==""){ /*没有内容输入改变样式*/ $(".search-row").removeclass("activeiconfonticon-sousuo"); }else{ /*有内容输入保持样式并提交表单*/ $("#search").submit(); } }); 

备注：这里需要引入 jquery，千万别忘了！

extension. 扩展

完整 html 代码：

        body{ margin:0;padding:0; font-size:14px;font-family:"microsoftyahei",'arial','verdana','helvetica',sans-serif; } .bar{ position:fixed;top:0;left:0;right:0;/*决定了搜索框置顶*/ height:44px;padding:010px; background-color:#fff;opacity:0.8;/*搜索框半透明效果*/ z-index:10; } .barform{ display:block;padding:0;margin:0; } .search-row{ position:relative; height:30px;padding:7px0; } .search-rowinput[type=search]{ position:absolute;top:7px; height:30px;line-height:21px;width:100%;padding:10px15px10px30px; border:0;border-radius:6px;outline:0;background-color:rgba(0,0,0,0.1); font-size:16px;text-align:center; z-index:100; } .search-row.placeholder{ position:absolute;top:2px;left:0;right:0; display:inline-block;height:34px;line-height:34px; border:0;border-radius:6px; font-size:16px;text-align:center;color:#999; z-index:1; } .search-row.placeholder.iconfont{ display:inline-block;width:19px;line-height:24px;padding:10px0; font-size:21px;color:#666; } .search-row.placeholder.text{ line-height:40px; vertical-align:top; } .backgroundimg{ width:100%; } .active:before{ position:absolute;top:11px;left:5px;right:auto; display:block;margin-right:0; font-size:21px; } .activeinput[type=search]{ text-align:left } .active.placeholder{ display:none }         搜索          /*输入框获取到焦点表示用户正在输入*/ $("#word").focusin(function(){ $(".search-row").addclass("activeiconfonticon-sousuo"); }); /*输入框失去焦点表示用户输入完毕*/ $("#word").focusout(function(){ /*判断用户是否有内容输入*/ if($(this).val()==""){ /*没有内容输入改变样式*/ $(".search-row").removeclass("activeiconfonticon-sousuo"); }else{ /*有内容输入保持样式并提交表单*/ $("#search").submit(); } });  

如果你能读到这里，小编希望你对“html怎么实现移动端固定悬浮半透明搜索框”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注恰卡编程网行业资讯频道！