TML如何制作在透明输入框里面添加图标

最近在写一个律师推荐前台的网站，在上面搜索框这里出现了问题，我想把搜索的图标放在搜索框里面，但是弄了半天都不大如意……

话不多说，我们直接进入主题 ：

基本思路

其实就把输入框与后面的图标一起放在一个div里面，然后将输入框的border设置为0px，最后设置div的border为最终的外边框

我们最直接上代码：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="请输入查找的律师或专长">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:这里是设置外面整个div的样式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

这里是设置里面的输入框的长宽、boder为0px、里面的字体大小、点击不会亮边框(outline:none)设置透明度这里使用rgba()，最后一个属性就是透明度（在0-1之间 ）

大有学问# #头条创作挑战赛#

什么是字体图标？

在html代码中是以文字元素的形式出现，但在网页渲染时却以图片的形式显示的小图标就叫做字体图标。

常见形式：地址、电话、登录窗口的头像等。

字体图标与精灵图对比

字体图标比精灵图更为轻量化，在网页中加载速度更快；

精灵图在实际使用中，图片放大或缩小时图片会失真。

精灵图是一张多个图标整合的一个大图片，后续添加或修改图标不方便。

注：

虽然字体图标好处多多，但是它并不能替代精灵图。

当小图标形式简单且个数较少时适合使用字体图标；

当小图标形式复杂且个数较多时适合使用精灵图。

字体图标哪里来？

icomoon网站：https://icomoon.io/。

阿里iconfont字库：https://www.iconfont.cn/。

字体图标使用方法

以icomoon网站为例。

从网站中下载图标压缩包：点击右上角“IcoMoon App”按钮，进入字体图标选择页面。

选中需要的图标（选中状态的图标，背景颜色会变白且出现黄色边框）后，个数可以选择1个，也可以选择多个。选好图标后，点击右下角“Generate Font ”按钮进入下载页面。

点击右下角“download”按钮进行下载。

解压下载好的压缩包。

将解压好的文件夹整体添加到项目文件夹中，我没有单独设置字体文件夹，直接放在素材图片文件夹了。

打开字体图标文件夹中style.css，

复制字体声明到html文件的style样式中，改变url的图标文件存放位置。

span标签中字体样式需要与字体声明中样式保持一致。

在html文件中，span标签的内容是需要从网站中直接粘贴复制过来使用。在网站下载页面，鼠标点击就是选中状态，直接ctrl+c复制即可。

如此就是完整的字体图标使用过程。另外有阿里iconfont也可以使用，也是免费的。有兴趣可自行了解。

字体图标代码示例

<style>
  /* 字体声明 ：从下载字体图标的文件夹中style.css文件上复制过来的*/
  @font-face {
    font-family: 'icomoon';
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu');
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu#iefix') format('embedded-opentype'),
          url('../images/icomoon/fonts/icomoon.ttf?49yzcu') format('truetype'),
          url('../images/icomoon/fonts/icomoon.woff?49yzcu') format('woff'),
          url('../images/icomoon/fonts/icomoon.svg?49yzcu#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  span {
    font-family: 'icomoon';
    font-size: 100px;
    color: antiquewhite;
  }
</style>

好了，今天的学习就到这里了，下回学习CSS三角~

时浏览网站的时候经常会遇到点击某些按钮会弹出登录提示或者注意事项提示的弹窗。那么这种弹窗是怎么实现的呢。实现方法有很多，不外乎就是点击事件触发相应的弹窗事件。
在这里介绍一个简易实现的方法。
首先，这里的弹窗长这样：

而原本页面长这样：

这里假定图中深绿色的按钮作为触发弹窗事件的按钮，在这里命名为btn1，然后就是弹窗的制作：
由图可看出，弹窗是基于整个屏幕的，有个灰色背景遮罩，中间有一块白色底带有图标文字说明的内容提示区，下面还有两个按钮，close是关闭弹窗的作用。了解了这些，就开始制作弹窗了：
1、html结构如下：

1. css样式如下：

.tc{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9;
background: rgba(0,0,0,.5);
display: none;
}
.tc .box{
width: 670px;
height: 404px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding-top: 54px;
}
.tc .box .icon{
width: 110px;
height: 110px;
margin: auto;
}
.tc .box .t1{
font-size: 18px;
line-height: 28px;
color: #333;
text-align: center;
box-sizing: border-box;
padding: 0 70px;
margin-top: 38px;
}
.tc .box .t2{
display: flex;
justify-content: center;
margin-top: 48px;
}
.tc .box .t2 .btn1{
width: 195px;
height: 40px;
border: none;
background: #1296db;
color: #fff;
font-size: 18px;
display: block;
cursor: pointer;
}
.tc .box .t2 .btn2{
width: 128px;
height: 40px;
border: none;
background: #295965;
color: #fff;
font-size: 18px;
display: block;
margin-left: 16px;
cursor: pointer;
}
由于在整个弹窗的父级div里加了隐藏属性：display:none; 所以在页面上是看不到弹窗的，这个时候就要开始写触发弹窗的点击事件了，上面假定的按钮是btn1，弹窗这块的父级div是 tc 。
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
</script>
这样就写好之后点击 btn1 就能显示弹窗了，现在弹窗出现的效果有了，那么点击close关闭弹窗的效果也就不远了
<script>
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
在这里把close 的类名命名为 btn2， 如上代码就实现了点击close按钮关闭弹窗的功能。
将这两个事件放在一起，节省一个script，也显得美观些就是这样
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
到这里一个建议的点击弹窗关闭的效果就实现了。