HTML工具,前端開發工具介紹----合成雪碧圖工具(css sprite)

 2023-10-07 阅读 29 评论 0

摘要:合成雪碧圖Sprite工具 1.國外的在線合成工具:http://csssprites.com/ 選擇需要合并的文件----設置option選項(包括:元素的間距,排列方式,背景顏色,邊框)-----點擊generate按鈕生成 優點:自動合成,可以設置屬性

合成雪碧圖Sprite工具

1.國外的在線合成工具:http://csssprites.com/

選擇需要合并的文件----設置option選項(包括:元素的間距,排列方式,背景顏色,邊框)-----點擊generate按鈕生成

優點:自動合成,可以設置屬性。缺點:文件必須一個個地去選擇導入,不能夠批量導入。

HTML工具,?

2.騰訊的雪碧圖在線生成工具http://alloyteam.github.io/gopng/

個人覺得操作不太方便,好像有些功能失靈了,相關操作說明如下:https://github.com/AlloyTeam/gopng

?

3.SpriteMe

js和css壓縮工具、這是一個國外的在線工具,它能夠幫你分析頁面中有哪些地方可以進行雪碧圖的優化,并且能夠生成對應的雪碧圖。http://spriteme.org/

使用方法:

打開連接http://spriteme.org/,看到下圖內容,然后把SpriteMe拖拽到你的瀏覽器書簽中(就是要你保存為書簽嘛)

然后隨便打開一個頁面。例如打開360導航頁面吧,http://www.3600.com/?src=lm&ls=n020f881c88。然后在該頁面上打開你的書簽找到SpriteMe并點擊它。

你會看到生成這樣一個結果。這是SpriteMe的檢測結果,對這個頁面給出的雪碧圖優化建議。鼠標移到每個鏈接上都能看到自動合成的效果,點擊右邊的make sprite可以馬上生成雪碧圖。點擊export css可以生成雪碧圖的樣式。

div+css網頁設計?

?

4.如果你是寫sass的話,那么可以安裝compass。使用compass來自動把切片合成雪碧圖并生成樣式。

?

5.如果你是寫sass或者less的話,比較建議使用grunt自動工具來一體化地編譯、壓縮、合并文件,而且能夠自動合成雪碧圖、生成樣式文件。

使用grunt來合成雪碧圖需要使用grunt-sprite這個插件(好像在github上也有另一個類似的插件),同時需要安裝Graphics Magick(gm)?和?PhantomJS?兩個依賴。

前端開源模板、至于如何使用,這里有個詳細的說明:https://github.com/hellometers/grunt-sprite

?

轉載于:https://www.cnblogs.com/joyho/articles/3715260.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/4/125193.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息