html如何将搜索图标放入搜索框中

好久没写网页了学到的东西都快要荒废了，正好趁着寒假巩固复习一下。

今天是（如题），

想要在自己的网页上做一个搜索框，但是这个搜索图标属实是有点为难。

于是翻找资料之后大概知晓了做法：

效果图

大致方法：

先做一个div 将搜索框

和

带有链接的搜索图标

放入。

（下面是外面的div的css）

.top1 {margin-right: 10px;width: 400px;height: 40px;border: 1px solid #ccc;background-color: #f2f2f5;margin: 10px 0;border-radius: 10px;
}

作为外部的搜索框

（下面为内部真正的搜索框）

.serch {height: 40px;width: 250px;float: left;padding: 0 8px;outline: none;background-color: #f2f2f5;border:none;border-radius: 10px;
}

为了美观，我们使用outline:none; 和border:none;消去原本的边框。

（最后是搜索图片的css）

.pic {align-items: center;height: 30px;width: 30px;float: right;padding-top: 5px;
}
.pic img{height: 30px;width: 30px;
}

具体的一些小位置可以自己微调。

最后分享一个自己常用的图标网站：

iconfont-阿里巴巴矢量图标库

这里含有各种各样的小图标，非常适合前端同学学习使用。

html如何将搜索图标放入搜索框中相关推荐

怎样把显示桌面图标放入任务栏?
怎样把显示桌面图标放入任务栏? 在桌面上也没有显示的情况下. 何必如此麻烦? 在任务栏上右键选工具栏选择快速启动如快速启动中没有显示桌面这一项目则从开始--运行中输入"regsvr3 ...
R语言使用reshape2包的melt函数将dataframe从宽表到长表（Wide- to long-format）、如果没有指定行标识符号，则所有的字段都会放入variable变量中
R语言使用reshape2包的melt函数将dataframe从宽表到长表(Wide- to long-format).如果没有指定行标识符号,则所有的字段都会放入variable变量中目录
Android：如何将Enum放入捆绑包中？
本文翻译自:Android: How to put an Enum in a Bundle? 如何将Enum对象添加到Android Bundle? #1楼参考:https://stackoom.c ...
char N2Char(int n)函数：将一个整数转换为字符串,并放入一个字符串中
//将一个整数转换为字符串,并放入一个字符串中 char N2Char(int n)//一次只能转换一个数 {int i;char c;if ((i = n / 10) != 0)N2Char(i); ...
打印1-400以内能同时被5和9 整数的数将这些数放入一个列表中，再输出这个列表
import java.util.ArrayList;/*** @author silence* 打印1-400以内能同时被5和9 整数的数将这些数放入一个列表中,再输出这个列表*/ public ...
集合练习。学生信息包括学号、姓名、出生日期、性别。把N个学生的信息放入一个集合中。可以根据学号，对学生信息进行检索。并可以根据生日进行排序输出。
集合练习.学生信息包括学号.姓名.出生日期.性别.把N个学生的信息放入一个集合中.可以根据学号,对学生信息进行检索.并可以根据生日进行排序输出. Student.java package Collec ...
Python产生100个1—100的随机数放入列表Num中，输出列表中的数，然后将它们排序，并输出排序结果。
import random #内建函数 Num=[] for i in range(101):Num.append(random.randint(1,100)) #append()将参数添加到列表末尾 ...
将图片资源放入 html 文件中
在部分使用 html 文件的场景,有图片需要显示,但是希望是单文件形式存在,可以使用如下方式将图片放入 html 源文件中: <img src="data:image/png;base ...
将数组a中满足条件的数放入数组b中
输入当前为数组a[6],各个元素值自行输入: 定义数组b的长度为b[6](未知数组长度时,尽量定义较大的空间): 循环遍历a中的元素是否满足条件,满足时将其放入b中,定义j为数组b中当前元素的位置,不 ...
设一个学生的信息包括学号、姓名、出生日期和性别等。把n个学生的信息放入一个集合中，可以根据学号对学生信息进行检索，并且可以根据出生日期对学生进行排序输出。
设一个学生的信息包括学号.姓名.出生日期和性别等.把n个学生的信息放入一个集合中,可以根据学号对学生信息进行检索,并且可以根据出生日期对学生进行排序输出. 要求对于每个学生的个人信息,可以定义一个类 ...

html如何将搜索图标放入搜索框中

html如何将搜索图标放入搜索框中相关推荐

最新文章

热门文章