您現在的位置是:電腦技術吧?>? 故障問題 ??>??更加方便,讓方便更加方便??>??正文詳情

更加方便,讓方便更加方便

旅英范2019-11-17 21:20:34 人圍觀
簡介更加方便的英語怎么說這個想法是在一個外國網站上發現的。設計師在網站中使用了許多小圖標,但他沒有使用CSS sprite技術,而是使用了另一種特殊的方法。也就是說,CSS3的字體面技使

這種思路是在一個國外的網站上發現的,設計者在網站中使用了很多小圖標,但是并沒有使用CSS-Sprite技術,而是使用了另外一種特殊的辦法。

那就是css3的font-face技術載入了一個自己做的字體文件,在需要顯示的地方直接打上調用的字符。

這種辦法只適用于大量純色,至于數量貌似沒有上限,a-z 0-9 符號就夠用了,狠一點,插入中文,動輒幾千個單位font-face圖標 VS CSS-Sprite圖標

他們同樣是把N多個圖標合并到一次HTTP請求中,CSS-Sprite是我們經常用的方法,它幾乎可以把所有不需要平鋪的圖片全部放進去,然后來定位。

而CSS-Sprite的弊端就是定位,想朽木這樣做前端的,幾乎天天跟background-position打交道,XY一個像素也不能差,雖說有這方面的工具,但是工作量還是放大了好幾倍。

而font-face則不需要定位,只要對照著字體編輯器,就可以知道哪個字符對應的哪個圖標。

使用起來非常方便style type=text/css media=screen!--i{font-family:'自定義字體名字';color:#000;}i:hover{color:#0f0;}--/styledivliiA/i某某某/liliiB/i某某某/liliiC/i某某某/li/divA/B/C就會自動變成我們字體中所對應的圖標,怎么樣,很方便吧,但是font-face有局限性,就是必須是純色圖標,因為字體只能給它附加color屬性來改變顏色。

從維護方面來說,font-face方法要方便的多,更換/添加/圖標非常容易,而CSS-Sprite則不太容易管理,特別是圖片和大小都要變更的時候。

版權聲明:本文由 旅英范 整理編輯。

原標題:它更加方便和省時,間才能讓竟然更加方便

轉載注明出處:http://www.dn9ww09s.icu/fault/13289.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 嗶哩嗶哩視頻保存本地,唧唧下載的視頻找不到

    嗶哩嗶哩視頻保存本地,唧唧下載的視頻找不到 相關圖片嗶哩嗶哩有沒有電腦版最近,很多bilibili的用戶和朋友都表示,他們曾經在移動終端上下載視頻。當最近使用網頁版本時,他們發現他們不確定如何在BiliBili網頁版本上下載視頻。如網頁...

  • 設置單元格屬性,如何設置單元格屬性

    設置單元格屬性,如何設置單元格屬性 相關圖片單元格屬性有哪些今天,我將介紹如何在Dreamweaver中格式化單元格。讓我們先看看具體的操作,將光標移動到要修改的單元格,然后“單元格屬性”窗口將出現在軟件下面。在屬性窗口...

  • 更新了顯卡驅動玩游戲很卡,win10驅動正常無聲音

    更新了顯卡驅動玩游戲很卡,win10驅動正常無聲音 相關圖片怎樣升級顯卡驅動版本最近,許多用戶報告說,他們電腦顯示卡的驅動程序版本太低。此時,只有升級顯卡才能解決這個問題。那么如何升級顯卡驅動程序呢?如何更新顯卡驅動程序?...

  • 寬度自適應,網頁寬度自適應

    寬度自適應,網頁寬度自適應 相關圖片表格自適應寬度左右列窄,中間列是要顯示的主要內容,使其寬度具有自適應性。CSS{main{width:760px;margin:0auto;}。left{width:100pcss自適應寬度...

  • excel怎么進行二次篩選,excel如何自定義篩選

    excel怎么進行二次篩選,excel如何自定義篩選 相關圖片excel下拉框不顯示選項在Excel中過濾是一個非常有用的函數。通過這個功能,用戶可以選擇他們最需要的數據。如何設置excel過濾器?如何使用Excel過濾器?現在,讓我們看看超人軟件表格...

  • 百度地圖旅游模式,百度地圖旅游模式路線

    百度地圖旅游模式,百度地圖旅游模式路線 相關圖片如何用百度地圖做旅游攻略面對即將到來的元旦假期,你準備好旅行了嗎。百度地圖上貼心為每位用戶推出了旅游模式。那么什么是百度地圖旅游模式呢?如何使用百度地圖旅游模式?...

  • 文檔合適,word文檔合適

    文檔合適,word文檔合適 相關圖片word行間距多少合適使用CSS和javascriptxhtml 1.0在XHTML文檔中定義XHTML的可擴展超文本標記語言(第二版)是將HTML 4擴展為XMLword文檔...

  • 字體在哪個文件夾,文件字體

    字體在哪個文件夾,文件字體 相關圖片ps字體安裝在哪個文件夾看到更多關于電腦默認字體的信息,很多小朋友都有了改變電腦字體的想法,特別是對于那些使用Android手機的用戶。許多人找到了他們最喜歡的字體,但他們不...

  • 精致手工教程,精致手工作品教程

    精致手工教程,精致手工作品教程 相關圖片精致妝容的步驟一。首先,用鋼筆勾出大色塊,挑出下一步2的主要描述點。在這里,車頭是車身的主要描述點,而逐步的調整也必須細致,盡可能地展現出車輛的質感3。以下是對Webjx...

  • ppt打不開如何改格式,ppt是什么病的簡稱

    ppt打不開如何改格式,ppt是什么病的簡稱 相關圖片ppt文件損壞修復絕招想必很多人都遇到過PPT不能突然打開的情況,這是非常緊迫的。那為什么PPT不能打開呢?如何修復無法打開的PPT?讓我們跟隨超人軟件編輯器了解關于無法打開PPT的...

熱評文章

  • steam無法連接網絡,steam一直無法連接網絡

    steam無法連接網絡,steam一直無法連接網絡 相關圖片steam好友網絡無法連接Steam是一個海外游戲平臺。因此,有很多網絡狀況不穩定的玩家和朋友遇到了無法連接steam網絡的提示。如果蒸汽無法連接到蒸汽網絡怎么辦?如果steam無法連接st...

  • 什么樣的小鳥怎樣飛舞,蝴蝶在什么飛舞小鳥在什么唱歌

    什么樣的小鳥怎樣飛舞,蝴蝶在什么飛舞小鳥在什么唱歌 相關圖片自制捕鳥夾無論是在風景動畫還是MTV中,總有鳥兒在天空中自由飛翔的畫面。這個例子將告訴你飛行動物的運動規則,并教你畫卡通鳥。示例效果如圖7-1圖7-1最終效果圖核心技術:像小...

  • 未安裝音頻設備紅叉,怎么解決電腦未安裝音頻設備

    未安裝音頻設備紅叉,怎么解決電腦未安裝音頻設備 相關圖片小喇叭顯示未安裝音頻設備近日,不少朋友反映,他們電腦的小喇叭圖標被劃過,在選擇維修時,他們提示沒有安裝音頻設備。不安裝音頻設備有什么問題?不安裝音頻設備怎么辦?讓...

  • 壓縮文件損壞無法修復怎么辦,損壞的壓縮文件怎樣修復

    壓縮文件損壞無法修復怎么辦,損壞的壓縮文件怎樣修復 相關圖片解壓包文件損壞怎么辦我相信你遇到過壓縮文件損壞無法解壓的情況。那么壓縮文件的損壞呢?現在,超人軟件將介紹如何解決壓縮文件的損壞。別錯過了!壓縮文件的損壞呢手機壓縮...

  • 文檔文件格式有哪些,文件格式有哪些

    文檔文件格式有哪些,文件格式有哪些 相關圖片word文檔文件格式CSS樣式和JavaScript腳本應該放在外部文件中嗎?還是應該放在頁面上?如何處理這一問題是對一些性能規則的思考。52css.com對這些問題進行了探討,在文檔樣式庫在哪里...

  • solidworks2010全套序列號,solidworks2010破解文件

    solidworks2010全套序列號,solidworks2010破解文件 相關圖片solidworks2010安裝SolidWorks是一個基于windows的三維CAD系統。設計師可以使用SolidWorks來大大縮短設計時間。SolidWorks具有功能強大、易學易用、solidworks2010怎么激活...

  • 表格中合并單元格在哪,表格中合并單元格

    表格中合并單元格在哪,表格中合并單元格 相關圖片表格中兩個單元格內容合并若要合并單元格,請先單擊“屬性”窗口中的“合并單元格”確認合并,以獲得下圖所示的效果。word中如何合并單元格...

  • ps三種圖層合并方式,ps摳圖后怎么合并圖層

    ps三種圖層合并方式,ps摳圖后怎么合并圖層 相關圖片ps中提供了哪些圖層合并方式當我們團隊的圖片合并成P-圖時,最后一步需要合并層以將多個材質合并成一個層。我們該怎么做?讓我們看看PS合并層1的方法。在原始圖層上創建新圖層...

  • 電腦驅動,手機驅動

    電腦驅動,手機驅動 相關圖片電腦使用手機軟件當我們需要修改電腦上手機的設置時,第一個先決條件是電腦安裝了相關的手機驅動程序。如果我的電腦上沒有相應的移動驅動程序,我該怎么辦?一。安裝360移動助...

  • 應用到布局,如何布局

    應用到布局,如何布局 相關圖片安卓五大布局一般來說,標準網頁的文件組織是XHTML CSS。XHTML主要用于表示網頁結構和顯示內容,而CSS則用于定義結構布局和修飾內容樣式。通常用于布局的XHTML通手機布局...

關注微信

变脸官网查询