多语言展示
当前在线：944今日阅读：106今日分享：43

css如何制作搜索图标
网页布局需要使用到css样式，让我们一起来看一下如何使用css进行搜索图标的制作吧。思路：搜索小图标  = 一个小圆 + 一条斜杠 组成。
方法/步骤
1

打开html开发软件，新建一个html页面。如图：

2

在新建的 html代码页面 创建一个

标签，然后给这个
标签添加一个class类，案例中class类为：icon-search。如图代码：

3

设置class类样式。搜索小图标是由一个小圆+一条斜线组成，所有需要设置class类样式创建一个小圆圈。创建小圆圈样式代码：

4

保存html代码页面后，使用浏览器打开，查看小圆圈是否创建成功。成功效果如图：

5

对class类添加斜杠。使用 css伪类:after为小圆圈添加一条斜杠。如图：添加斜杠样式css代码：.icon-search:after{ content: ''; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); width:8px; height: 2px; position: absolute; top:13px; left:11px; background-color: currentcolor; }

6

保存html代码页面后，使用浏览器打开，即可看到搜索小图标。如图：

7

页面所有代码。可以直接复制所有代码到新建html页面，粘贴保存后使用浏览器打开即可看到页面效果。所有代码: css搜索图标

推荐信息
网站地图 XML TXT RSS 隐私政策 服务条款 使用条款
Copyright ©1996-2026 www.onijiang.com Corporation, All Rights Reserved