TML如何制作在透明輸入框里面添加圖標(biāo)

最近在寫一個律師推薦前臺的網(wǎng)站，在上面搜索框這里出現(xiàn)了問題，我想把搜索的圖標(biāo)放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進(jìn)入主題 ：

基本思路

其實(shí)就把輸入框與后面的圖標(biāo)一起放在一個div里面，然后將輸入框的border設(shè)置為0px，最后設(shè)置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請輸入查找的律師或?qū)ｉL">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設(shè)置外面整個div的樣式

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

這里是設(shè)置里面的輸入框的長寬、boder為0px、里面的字體大小、點(diǎn)擊不會亮邊框(outline:none)設(shè)置透明度這里使用rgba()，最后一個屬性就是透明度（在0-1之間 ）

大有學(xué)問# #頭條創(chuàng)作挑戰(zhàn)賽#

什么是字體圖標(biāo)？

在html代碼中是以文字元素的形式出現(xiàn)，但在網(wǎng)頁渲染時卻以圖片的形式顯示的小圖標(biāo)就叫做字體圖標(biāo)。

常見形式：地址、電話、登錄窗口的頭像等。

字體圖標(biāo)與精靈圖對比

字體圖標(biāo)比精靈圖更為輕量化，在網(wǎng)頁中加載速度更快；

精靈圖在實(shí)際使用中，圖片放大或縮小時圖片會失真。

精靈圖是一張多個圖標(biāo)整合的一個大圖片，后續(xù)添加或修改圖標(biāo)不方便。

注：

雖然字體圖標(biāo)好處多多，但是它并不能替代精靈圖。

當(dāng)小圖標(biāo)形式簡單且個數(shù)較少時適合使用字體圖標(biāo)；

當(dāng)小圖標(biāo)形式復(fù)雜且個數(shù)較多時適合使用精靈圖。

字體圖標(biāo)哪里來？

icomoon網(wǎng)站：https://icomoon.io/。

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

字體圖標(biāo)使用方法

以icomoon網(wǎng)站為例。

從網(wǎng)站中下載圖標(biāo)壓縮包：點(diǎn)擊右上角“IcoMoon App”按鈕，進(jìn)入字體圖標(biāo)選擇頁面。

選中需要的圖標(biāo)（選中狀態(tài)的圖標(biāo)，背景顏色會變白且出現(xiàn)黃色邊框）后，個數(shù)可以選擇1個，也可以選擇多個。選好圖標(biāo)后，點(diǎn)擊右下角“Generate Font ”按鈕進(jìn)入下載頁面。

點(diǎn)擊右下角“download”按鈕進(jìn)行下載。

解壓下載好的壓縮包。

將解壓好的文件夾整體添加到項目文件夾中，我沒有單獨(dú)設(shè)置字體文件夾，直接放在素材圖片文件夾了。

打開字體圖標(biāo)文件夾中style.css，

復(fù)制字體聲明到html文件的style樣式中，改變url的圖標(biāo)文件存放位置。

span標(biāo)簽中字體樣式需要與字體聲明中樣式保持一致。

在html文件中，span標(biāo)簽的內(nèi)容是需要從網(wǎng)站中直接粘貼復(fù)制過來使用。在網(wǎng)站下載頁面，鼠標(biāo)點(diǎn)擊就是選中狀態(tài)，直接ctrl+c復(fù)制即可。

如此就是完整的字體圖標(biāo)使用過程。另外有阿里iconfont也可以使用，也是免費(fèi)的。有興趣可自行了解。

字體圖標(biāo)代碼示例

<style>
  /* 字體聲明 ：從下載字體圖標(biāo)的文件夾中style.css文件上復(fù)制過來的*/
  @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>

好了，今天的學(xué)習(xí)就到這里了，下回學(xué)習(xí)CSS三角~

時瀏覽網(wǎng)站的時候經(jīng)常會遇到點(diǎn)擊某些按鈕會彈出登錄提示或者注意事項提示的彈窗。那么這種彈窗是怎么實(shí)現(xiàn)的呢。實(shí)現(xiàn)方法有很多，不外乎就是點(diǎn)擊事件觸發(fā)相應(yīng)的彈窗事件。
在這里介紹一個簡易實(shí)現(xiàn)的方法。
首先，這里的彈窗長這樣：

而原本頁面長這樣：

這里假定圖中深綠色的按鈕作為觸發(fā)彈窗事件的按鈕，在這里命名為btn1，然后就是彈窗的制作：
由圖可看出，彈窗是基于整個屏幕的，有個灰色背景遮罩，中間有一塊白色底帶有圖標(biāo)文字說明的內(nèi)容提示區(qū)，下面還有兩個按鈕，close是關(guān)閉彈窗的作用。了解了這些，就開始制作彈窗了：
1、html結(jié)構(gòu)如下：

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; 所以在頁面上是看不到彈窗的，這個時候就要開始寫觸發(fā)彈窗的點(diǎn)擊事件了，上面假定的按鈕是btn1，彈窗這塊的父級div是 tc 。
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
</script>
這樣就寫好之后點(diǎn)擊 btn1 就能顯示彈窗了，現(xiàn)在彈窗出現(xiàn)的效果有了，那么點(diǎn)擊close關(guān)閉彈窗的效果也就不遠(yuǎn)了
<script>
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
在這里把close 的類名命名為 btn2， 如上代碼就實(shí)現(xiàn)了點(diǎn)擊close按鈕關(guān)閉彈窗的功能。
將這兩個事件放在一起，節(jié)省一個script，也顯得美觀些就是這樣
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
到這里一個建議的點(diǎn)擊彈窗關(guān)閉的效果就實(shí)現(xiàn)了。