【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何解決移動(dòng)端小圖標(biāo)模糊的問題_第1頁
【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何解決移動(dòng)端小圖標(biāo)模糊的問題_第2頁
【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何解決移動(dòng)端小圖標(biāo)模糊的問題_第3頁
【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何解決移動(dòng)端小圖標(biāo)模糊的問題_第4頁
免費(fèi)預(yù)覽已結(jié)束，剩余1頁可下載查看

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何解決移動(dòng)端小圖標(biāo)模糊的問題

前言.del

.icon{

display:

inline-block;

width:

20px;

height:

25px;

margin-right:

5px;

vertical-align:

middle;

background:

url("imgs/delete.png")

no-repeat

center;

background-size:

100%;}

/upload/information/20210311/298/12266.png

/upload/information/20210311/298/12267.png用矢量圖放上，也就是SVG要出場了！

/upload/information/20210311/298/12268.png

/upload/information/20210311/298/12269.png

/upload/information/20210311/298/12270.png

/upload/information/20210311/298/12271.png/upload/information/20210311/298/12272.png<!--HTML部分-->

<body>

<div

style="display:

none;">

<!--作為一個(gè)可以按需取用的SVG庫-->

<svg>

<symbol

id="icon-bin"

viewBox="0

0

32

32">

<title>bin</title>

<path

d="M4

10v20c0

1.1

0.9

2

2

2h28c1.1

0

2-0.9

2-2v-20h-22zM10

28h-2v-14h3v14zM14

28h-2v-14h3v14zM18

28h-2v-14h3v14zM22

28h-2v-14h3v14z"></path>

<path

d="M26.5

4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825

0-1.5

0.675-1.5

1.5v2.5h-6.5c-0.825

0-1.5

0.675-1.5

1.5v2.5h36v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18

4h-6v-1.975h7v1.975z"></path>

</symbol>

</svg>

</div>

<div

class="del"><svg

class="icon

icon-bin"><use

xlink:href="#icon-bin"></use></svg><!--此處根據(jù)圖標(biāo)id按需調(diào)用--><span>刪除</span></div>

</body>/*CSS部分*/

.del{

font-size:

20px;}

.del

.icon{

display:

inline-block;

width:

20px;

height:

25px;

margin-right:

5px;

vertical-align:

middle;

fill:

currentColor;}

.del

span{

vertical-align:

middle;}以上CSS部分就不做解釋了，這里簡單說下HTML部分。<div

style="display:

none;">

<!--作為一個(gè)可以按需取用的SVG庫-->

<svg>

<symbol

id="icon-bin"

viewBox="0

0

32

32">

<title>bin</title>

<path

d="M4

10v20c0

1.1

0.9

2

2

2h28c1.1

0

2-0.9

2-2v-20h-22zM10

28h-2v-14h3v14zM14

28h-2v-14h3v14zM18

28h-2v-14h3v14zM22

28h-2v-14h3v14z"></path>

<path

d="M26.5

4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825

0-1.5

0.675-1.5

1.5v2.5h-6.5c-0.825

0-1.5

0.675-1.5

1.5v2.5h36v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18

4h-6v-1.975h7v1.975z"></path>

</symbol>

<!--新增圖標(biāo)-->

<symbol

id="icon-cross"

viewBox="0

0

32

32">

<title>cross</title>

<path

d="M31.708

25.708c-0-0-0-0-0-0l-9.708-9.708

9.708-9.708c0-0

0-0

0-0

0.105-0.105

0.18-0.227

0.229-0.357

0.133-0.356

0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13

0.048-0.252

0.124-0.357

0.228

0

0-0

0-0

0l-9.708

9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057

0.229l-4.586

4.586c-0.286

0.286-0.361

0.702-0.229

1.057

0.049

0.13

0.124

0.252

0.229

0.357

0

0

0

0

0

0l9.708

9.708-9.708

9.708c-0

0-0

0-0

0-0.104

0.105-0.18

0.227-0.229

0.357-0.133

0.355-0.057

0.771

0.229

1.057l4.586

4.586c0.286

0.286

0.702

0.361

1.057

0.229

0.13-0.049

0.252-0.124

0.357-0.229

0-0

0-0

0-0l9.708-9.708

9.708

9.708c0

0

0

0

0

0

0.105

0.105

0.227

0.18

0.357

0.229

0.356

0.133

0.771

0.057

1.057-0.229l4.586-4.586c0.286-0.286

0.362-0.702

0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path>

</symbol>

</svg>

</div>

<div

cla

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論