整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML如何制作在透明輸入框里面添加圖標


          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之間 )

          者:前端日志

          轉發鏈接:https://mp.weixin.qq.com/s/c-Us1Nm_8BqRD2Vc0l9emA

          .什么是字體圖標

          可以看作一種特殊字體,其展示的是圖標,而不再是文字,其擁有字體的特性,比如大小、顏色、透明效果、陰影等,字體圖標加載快、不變形。也可以看作是矢量格式的圖標。

          2.字體圖標常用免費資源

          (1)iconmoon字體圖標庫:https://icomoon.io/app

          (2)阿里iconfont字體圖標庫:https://www.iconfont.cn/

          (3)font-awesome字體圖標庫:

          3.字體圖標使用步驟

          以iconmoon為例

          (1)選擇需要的圖標并下載

          1)在fonts文件夾下有四種類型的字體文件,每種字體文件兼容瀏覽器的種類不同

          a).tff格式(TrueTypeFont),美國蘋果公司和微軟公司共同開發的,在Windows和Mac操作系統中為默認字體;IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。

          b).woff格式(Web Open Font Format-Web開放字體格式),是一種網頁所采用的字體格式標準,使用zlib壓縮,文件大小一般比TTF小40%;IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。

          c).eot格式(Embedded Open Type-嵌入式OpenType ),微軟設計用來在網頁使用的字體格式,是OpenType字體的壓縮格式,IE專用,IE4+支持該字體。

          d).svg格式(Scalable Vector Graphics-可縮放的矢量圖形),它是一種用XML定義的語言,用來描述二維矢量及矢量/柵格圖形;Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。

          其他字體

          e).otf格式(Open Type Font),Microsoft和Adobe公司開發的,.otf格式比.ttf更為強大,可以把PostScript字體嵌入到TrueType中。

          2)字體轉換

          https://www.fontke.com/tool/convfont/

          (2)字體圖標的引入

          1)把字體放到項目的相應位置

          將下載解壓后的fonts文件夾放到項目路徑下

          2)在html頁面中引入字體

          利用CSS的@font-face屬性,引入外部字體;

          在style.css文件中有如下代碼,為固定用法,注意url中字體路徑,其它可以不變。

          在html的style標簽中引入如下代碼:

          @font-face {
            font-family: 'icomoon';
            src:  url('fonts/icomoon.eot?8l3wc0');
            src:  url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
              url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
              url('fonts/icomoon.woff?8l3wc0') format('woff'),
              url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
          }

          3)為元素用該字體

          span {
                  font-family: "icomoon";
              }

          4)為元素添加內容

          復制demo.html中需要的圖標,如下,將其作為元素的內容。

          <span>?</span> 

          (3)新增字體圖標的引入

          當利用iconmoon選用字體圖標時,如果有新增的字體圖標需要加入,則需要用到.json文件,如下,在原先選擇的基礎上,再選擇新選擇的字體圖標,然后再下載使用。


          主站蜘蛛池模板: 久久精品国产免费一区| 国产一区二区三区电影| 性色av闺蜜一区二区三区| 久久精品无码一区二区app| 亚洲一区无码中文字幕乱码| 国精产品一区二区三区糖心| 国产一区二区精品久久岳√| 无码一区二区三区在线观看| 丰满人妻一区二区三区免费视频| 国产日韩精品一区二区在线观看| 国模私拍福利一区二区| 国产精品特级毛片一区二区三区| 国产免费播放一区二区| 高清在线一区二区| 白丝爆浆18禁一区二区三区| 一区二区传媒有限公司| 亚洲欧洲日韩国产一区二区三区| 亚洲电影一区二区| 亚洲一区二区三区电影| 人妻夜夜爽天天爽爽一区| 亚洲bt加勒比一区二区| 一区二区视频在线| 亚洲福利一区二区| 亚洲欧美日韩一区二区三区| 波多野结衣一区二区三区| 亚洲一区二区三区乱码在线欧洲| 无码人妻精品一区二区三区99性| 99无码人妻一区二区三区免费| 91一区二区视频| 亚洲中文字幕久久久一区| 久久中文字幕无码一区二区 | 国产一区二区三区播放心情潘金莲| 亚洲一区在线视频观看| 欧美激情国产精品视频一区二区| 亚洲欧美日韩一区二区三区在线| 国产在线观看精品一区二区三区91| 国产精品福利一区| 成人乱码一区二区三区av| 久久久国产精品一区二区18禁| 久久综合亚洲色一区二区三区| 人妻视频一区二区三区免费 |