精靈圖
- 為什么需要精靈圖
- 為了有效的減少服務器接收和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術
- 精靈圖（sprites）的使用
- 精靈技術主要針對背景圖片，就是把多個小背景圖片整合到一張大圖片中，
- 這個大圖片也稱為sprites精靈圖或者雪碧圖
- 移動背景圖片位置，使用background-position
- 移動的距離就是這個目標圖片的x和y坐標，注意網頁中的坐標有所不同
- 使用精靈圖的時候需要精確側臉，每個小背景圖片的大小和位置
字體圖示
- 主要用于顯示網頁中通用、常用的一些小圖示
- 精靈圖缺點
- 圖片檔案比較大
- 圖片本身放大和縮小會失真
- 一旦圖片制作完想要更換非常復雜
- 字體圖示可以為前端工程師提供一種方便高效的圖示使用方式，展示的時圖示，本質屬于字體
- 優點
- 輕量級：一個圖示字體要比一系列的影像要小，一旦字體加載了，圖示就會馬上渲染出來，減少服務器請求
- 靈活性：本質其實是文字，可以很隨意的改變顏色，產生陰影、透明效果，旋轉等
- 兼容性：幾乎支持所有的瀏覽器
- 【注意】
- 字體圖示不能代替精靈技術，只是對作業中圖示部分技術的提升和優化
- 字體圖示的下載
- icomoon字體庫 http：//icomoon.io
- 阿里iconfont字體庫 http：//www.iconfontcn/
- 字體圖示的引入
- 把下載包里面的font檔案夾放入頁面根目錄
- 在CSS樣式中全域生命字體：簡單理解把這些字體檔案通過css引入到我們頁面中
- html標簽內添加小圖示
- 字體圖示的追加
- 把壓縮包里面的selection.json從新上傳，然后選中自己想要新的圖示，重新下載壓縮包，并替換原來的檔案
CSS三角畫法
div{
width:0;
height:0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: black;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/103980.html
標籤：Html/Css
上一篇：元素的顯示與隱藏
下一篇：工具sublime安裝