网页布局需要使用到css样式，让我们一起来看一下如何使用css进行搜索图标的制作吧。思路：搜索小图标=一个小圆+一条斜杠组成。
方法/步骤
1、打开html开发软件，新建一个html页面。如图：
2、在新建的html代码页面创建一个<div>标签，然后给这个<div>标签添加一个class类，案例中class类为：icon-search。如图代码：<divclass="icon-search"></div>
3、设置class类样式。搜索小图标是由一个小圆+一条斜线组成，所有需要设置class类样式创建一个小圆圈。创建小圆圈样式代码：<style> .icon-search{ width:12px;height:12px; border-radius:100%; border:2pxsolidcurrentcolor; position:relative; margin:30pxauto; } </style>
4、保存html代码页面后，使用浏览器打开，查看小圆圈是否创建成功。成功效果如图：
5、对class类添加斜杠。使用css伪类:after僭轿魍儿为小圆圈添加一条斜杠。如图：添加斜杠样式css代码：.icon-s髫潋啜缅earch: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页面，粘贴保存后使用浏览器打开即可看到页面效果。所有代洁船诼抨码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>css搜索图标</title> <style> .icon-search{ width:12px;height:12px; border-radius:100%; border:2pxsolidcurrentcolor; position:relative; margin:30pxauto; } .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; } </style> </head> <body> <divclass="icon-search"></div> </body></html>