HTML怎么实现移动端固定悬浮半透明搜索框
本文将为大家详细介绍“HTML怎么实现移动端固定悬浮半透明搜索框”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“HTML怎么实现移动端固定悬浮半透明搜索框”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。
html是什么
html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。
现在互联网已经有成千上百个网站，然而网站少不了的一个功能就是搜索，我们可以看到很多网站的搜索框各有不同，在移动端也是如此，例如：
要制作这样的搜索框，技术关键在于：
fixed 搜索框定位
opacity 设置透明度
Solution. 解决
首先我们定义一个 html 片段：
<!--搜索框--> <headerclass="bar"> <formname="search"class="search"id="search"action=""> <pclass="search-row"> <inputtype="search"name="word"id="word"> <spanclass="placeholder"><spanclass="iconfonticon-sousuo"></span><spanclass="text">搜索</span></span> </p> </form> </header> <!--一个背景图实际上这里往往是轮播图--> <pclass="background"> <imgsrc="bg.jpg"> </p>
header 标签为搜索框，下面的 p 为一个背景图。
同时附上 CSS 样式：
<styletype="text/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
}
</style>很长的一段 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
}
<scripttype="text/javascript">
/*输入框获取到焦点表示用户正在输入*/
$("#word").focusin(function(){
$(".search-row").addClass("activeiconfonticon-sousuo");
});
/*输入框失去焦点表示用户输入完毕*/
$("#word").focusout(function(){
/*判断用户是否有内容输入*/
if($(this).val()==""){
/*没有内容输入改变样式*/
$(".search-row").removeClass("activeiconfonticon-sousuo");
}else{
/*有内容输入保持样式并提交表单*/
$("#search").submit();
}
});
</script>备注：这里需要引入 jQuery，千万别忘了！
Extension. 扩展
完整 html 代码：
<!DOCTYPEhtml>
<html>
<head>
<title></title>
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<linkrel="stylesheet"type="text/css"href="iconfont/iconfont.css">
<scripttype="text/javascript"src="jquery-1.11.1.min.js"></script>
<styletype="text/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
}
</style>
</head>
<body>
<!--搜索框-->
<headerclass="bar">
<formname="search"class="search"id="search"action="">
<pclass="search-row">
<inputtype="search"name="word"id="word">
<spanclass="placeholder"><spanclass="iconfonticon-sousuo"></span><spanclass="text">搜索</span></span>
</p>
</form>
</header>
<!--一个背景图实际上这里往往是轮播图-->
<pclass="background">
<imgsrc="bg.jpg">
</p>
</body>
<scripttype="text/javascript">
/*输入框获取到焦点表示用户正在输入*/
$("#word").focusin(function(){
$(".search-row").addClass("activeiconfonticon-sousuo");
});
/*输入框失去焦点表示用户输入完毕*/
$("#word").focusout(function(){
/*判断用户是否有内容输入*/
if($(this).val()==""){
/*没有内容输入改变样式*/
$(".search-row").removeClass("activeiconfonticon-sousuo");
}else{
/*有内容输入保持样式并提交表单*/
$("#search").submit();
}
});
</script>
</html>如果你能读到这里，小编希望你对“HTML怎么实现移动端固定悬浮半透明搜索框”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注恰卡编程网行业资讯频道！
相关文章
本站已关闭游客评论，请登录或者注册后再评论吧~
热门文章
保利为什么叫央企之王(保利是国企还是央企)
2022-07-06
恢复外国人入境时间表(中国取消14天隔离政策了吗)
2021-06-19
香港哪些明星是反港分子(已背叛祖国的明星名单)被国家拉入黑名单明星
2021-04-20
身份造假与销售话术(记者卧底世纪佳缘 揭秘“红娘”)
2021-12-08
PyCharm怎么连接配置mysql数据库?
2021-06-29
如何将cda格式文件转换为mp3格式(cda格式怎么转换成mp3)
2021-12-11