基于html css实现带搜索图标的搜索框功能_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

body {background-image:url('bg.jpg');background-repeat:no-repeat;background-attachment:fixed;}www.zgxue.com防采集请勿采集本网。

前言

给大家分享一下前端用处很多的带小图标的搜索框的制作方法。

你去参考一下wordpress就行了,wordpress本身也集成了很多H5和CSS3的内容

效果展示

用html5是需要css javascrip的。css是必须要用到的,如果不使用css,网页内容就不会被更好的美化和展示出来。HTML是由多种骨头(标签)组成的骨架。HTML5是更多的新骨头(标签),同时去掉了以前觉得

在这里插入图片描述

在这里插入图片描述

基本思路

Web前端意思就是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页。前端开发顾名思义就是这些页面设计的实现,代码的实现。而前端开发中需要掌握最基础的技能就是HTML、CSS,

1、搜索图像用绝对定位放到搜索框的上方

网页设计采用div+css的好处: 1、div+css有利于搜索引擎爬虫:一般而言相同网页页面html文件table布局字节大于div+css布局的字节,所以可以节约搜索引擎爬虫爬行下载页面内容时间。2、重构页面

2、input框设置文本缩进,大小为搜索图像大小加上图像左右两边的外边距

按我个人的理解,这类脚本语言是需要解释器的,解释器的作用就是读取你的代码文件在相应的位置绘制需要的图形,如浏览器。如你代码的举例:;height:200px;background-color:#000;'> 作为一个xml

准备

只需一个搜索图标图片,类似于下图

在这里插入图片描述

代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>搜索框demo</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ width: 100vw; height: 100vh; background: radial-gradient(at center, #3498db,#2980b9); display: flex; justify-content: center; align-items: center; } div.search{ height: 40px; width: 500px; } div.search form{ width: 100%; height: 100%; } div.search form input:nth-child(2){ width: 400px; height: 100%; font-size: 16px; text-indent: 40px; border: none; float: left; } div.search form input:nth-child(3){ width: 100px; height: 100%; font-size: 16px; letter-spacing: 5px; border: none; } div.search form img{ position: absolute; left: 50vw; transform: translateX(-250px); margin-top: 10px; margin-left: 10px; height: 20px; } </style></head><body> <div class="search"> <form action="#" method="post"> <img src="./search_ico.png" alt=""> <input type="text" name="condition" placeholder="请输入搜索条件"> <input type="submit" value="搜索"> </form> </div></body></html>

总结

以上所述是小编给大家介绍的基于html css实现带搜索图标的搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

!DOCTYPEhtml>图片轮播代码meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">body{max-width:630px;margin:0 auto;}lunbo ul li{width:100%;list-style:none;width:630px;height:300px;background-color:#f00;text-align:center;}lunbo ul li:not(:first-child){display:none;}1234因为使用了document,所以js需要放在需要执行的代码下面生效才能生效var li=document.getElementById('lunbo').getElementsByTagName("li");var num=0;var len=li.length;setInterval(function(){li[num].style.display="none;num=num=len?0:num;li[num].style.display="inline-block;},3000);切换时间</script></body></html>内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html实现移动端固定悬浮半透明搜索框
  • 超酷html5+css3绿色发光搜索框表单提交
  • 用html5实现语音搜索框的方法
  • 分享8款纯css3实现的搜索框功能
  • css3实现的可伸缩搜索框效果(无js)
  • css 漂亮搜索框美化代码
  • css 教学实例 漂亮的搜索框
  • html+css+js实现基于绝对定位左右滑动的轮播效果图怎么实现呢?
  • 能帮我看看这个背景固定,内容滑动的网页基于HTML/CSS怎么实现的,难么?
  • 我需要网页作品 交作业 要求如下考核内容:   利用CSS和Javascript技术,基于修读“HTML语言与网页制作技
  • 有关html的参考文献
  • 基于html5 css3的个人博客系统设计与实现要实现什么问题
  • 用html5还需要css javascrip吗
  • HTML5开发和web前端开发有啥区别啊?
  • 网页设计采用div+css有什么好处
  • html是基于什么语言开发的
  • 怎样用html代码实现如下图的效果,或者用div+css+js怎么实现,跪求完整代码,越详细越好
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程htmlcss搜索图标搜索框超酷html5+css3绿色发光搜索框表单提交css3实现的可伸缩搜索框效果(无js)css 漂亮搜索框美化代码css 教学实例 漂亮的搜索框css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 实现渐变效果小结( linear-gradient线性渐变 和 r解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved