網頁設計sprite_實現csssprites的核心代碼是什麼

1、圖片精靈（image sprite）什麼意思？

是網頁設計里的一種圖片形式。秒秒學課程里有詳細介紹過，可以解釋為「圖像拼合」，意思是將許多小圖拼合成一張整圖，從而在瀏覽器上達到快速傳輸並呈現內容的目的。當網頁上要顯現其中一張小圖時，就引用整張圖片，通過CSS代碼設定X、Y坐標到這個小圖上。如果想了解的更多，可以去秒秒學看看。

2、css sprite有什麼缺點？

二、csssprite 的優缺點
優點：1.減少了網頁的http的請求，提高了網頁性能。原理很簡單，沒有運用csssprite這種技術時，網頁可能要載入十二個icons，但當運用了這種技術之後，十二個icons全部放在一個background-image內了。當我們載入網頁的時候就只需要載入一個background-image就可以了。
2.」　CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合並成1張圖片的位元組總是小於這3張圖片的位元組總和。「——源自<博客園>的「沫魚的前端世界」。
缺點：1.首先一點是維護麻煩，當我們需要的十二個icons需要換其中幾個或者增加或刪除幾個的時候，可能需要重新排版。當修改的icon與之前的不一致時則更幾乎是要重新排版的。所以在這一點上，csssprite並不容易維護。不過一般人們運用這種技術的前提是設計的css盒子能夠保證在相當長的一段時間內不會改變的。
2.開發時，在自適應屬性下，csssprite可能會因為圖片大小等屬性的各種原因而導致圖片出現斷裂情況使得設計的頁面效果十分難看。
3.同樣是開發時，在設計頁面的時候，運用csssprite技術需要用Photoshop去精準的定位到圖片的長度，操作不難但是比較繁瑣。

3、網頁設計師非常有用的幾個在線工具

幾個網頁設計工作中經常會用的在線工具，能夠大大的提供工作效率!
ProCSSor

ProCSSor是一個很不錯的CSS代碼美化工具，它可以輕松的把代碼轉換成很美觀的格式。
jsFiddle

JsFiddle有多種用途，其中一個用法就是可以在線編輯HTML, CSS 和JavaScript片段，而且代碼可以分享，還可以嵌入到你的博客中等等。
Frame Box

Frame Box是一個非常好用的用於在線分享線框圖（wireframes）的工具。
Spritebox

Spritebox是一個所見即所得的工具，幫助Web設計者迅速而輕松地從一張精靈圖片（CSS Sprit Image）創建CSS類和ID選擇符樣式。這里涉及到一項技術叫CSS Sprites，在國內很多人叫CSS精靈，它是的基本原理是使用CSS的背景系列屬性的組合進行背景圖片的精確定位。
CSS3 Generator

這是一個簡單的跨瀏覽器CSS3樣式生成器，可以生成你想要的任何值。
Super Conversion Button

這個工具可以幫助你瞬間生成一個美觀的試用（Try it now）按鈕。
wordmark.it

這個工具之前曾介紹過，可以幫助你直觀的查看當前電腦上安裝了哪些字體。
0 to 255

4、CSS sprites 的樣式生成工具哪裡有

CSS sprites
在線生成工具就有好多
csssprites.com, Sprite Cow, Sprits Pad都是不錯的選擇
當然專業的設計師喜歡用Photoshop

5、網頁設計時將大圖進行切片有必要嗎,真能提高圖片顯示時間嗎?

切片的作用在於讓一部分圖片下載後立即顯示，其他的慢慢下載，如果圖片太大，在下載過程中容易卡住。
一般50k一部分就可以。

6、html 網頁製作如何設置網頁背景色

首先打開電腦上自帶的記事本程序，然後輸入html網頁基本結構語句。<html><body></body></html>

由於css樣式必須在標簽<head></head>之間，因此我們點擊<html>後面，輸入<head></head>標簽。

在head標簽之間輸入樣式標簽<style></style>,然後定義一些屬性，例如

body {background-color: yellow} 定義網頁背景色為黃色；

h1 {background-color: #00ff00} 定義h1標簽背景色為#00ff00；

h2 {background-color: transparent} 定義h2標簽背景色為透明；

p {background-color: rgb(250,0,255)} 定義p標簽背景色為rgb值；

p.no2 {background-color: gray; padding: 20px;} 這個定義class屬性為no2的p標簽背景色為灰色，並且邊距為20px；

</style>

然後點擊body標簽後面輸入正文標簽內容，例如

<h1>這是KING</h1>

<h2>這是KING</h2>

<p>這是KING</p>

<p class="no2">這個KING設置20內邊距。</p>

點擊記事本菜單中的文件，選擇另存為，把內容保存為html網頁格式。雙擊打開預覽效果。

我們可以發現代碼中兩個同樣的<p>標簽顯示的css樣式卻不同，區別就在於樣式中定義的p.no2,這就是正文代碼中class="no2"的優勢所在，可以定義個性風格。

7、網頁製作和網站製作有什麼區別？

Web前端開發技術主要包括三個要素：HTML、CSS和JavaScript！

它要求前端開發工程師不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和伺服器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。

那麼我們應該怎麼學習web前端開發這門技術呢？

現在很多小夥伴喜歡在互聯網上找視頻資料學習網頁製作，但是光看視頻你是不可能學會網頁製作的，沒有人指導你，而且很多視頻已經過時了，並沒有什麼用! 如果你真的想學習網頁製作這門技術，你可以來這個裙，前面是6 5 7，中間是I 三柒，最後是九零 6！在這里有最新的HTML課程免費學習也有很多人指導你進步，不需要你付出什麼，只要你是真心想學習的，隨便看看的就不要加了，加了也是浪費大家的時間。

隨著近兩三年來RIA（Rich Internet Applications的縮寫，中文含義為：豐富的網際網路應用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight、XML和伺服器端語言（PHP、.NET，JSP、Python）等語言，前端開發工程師也需要掌握。

前端開發的入門門檻其實很低，與伺服器端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢。

HTML 甚至不是一門語言，他僅僅是簡單的標記語言！CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。Javascript 的基礎部分相對來說不難，入手還算快。

也正因為如此，前端開發領域有很多自學成「才」的同行，但大多數人都停留在會用的階段，因為後面的學習曲線越來越陡峭，每前進一步都很難。

Web前端技術有一些江湖氣，知識點過於瑣碎，技術價值觀的博弈也難分伯仲，即全局的系統的知識結構並未成體系，這些因素也客觀上影響了「正統「前端技術的沉澱！而且各種「奇技淫巧」被濫用，前端技術知識的傳承也過於泛泛，新人難看清時局把握主次。因此，前端技術領域，為自己覓得一個靠譜的師兄，重要性要蓋過項目、團隊、公司、甚至薪水。

另一方面，正如前面所說，前端開發是個非常新的職業，對一些規范和最佳實踐的研究都處於探索階段。總有新的靈感和技術不時閃現出來，例如CSS sprite、負邊距布局、柵格布局等；各種JavaScript框架層出不窮，為整個前端開發領域注入了巨大的活力；瀏覽器大戰也越來越白熱化，跨瀏覽器兼容方案依然是五花八門。為了滿足「高可維護性」的需要，需要更深入、更系統地去掌握前端知識，這樣才可能創建一個好的前端架構，保證代碼的質量。

隨著手持設備的迅猛發展，帶動了 HTML5行業標準的快速發展。web領域的技術，大概有10年都沒有大的更新了！現在市場很需要優秀的、高級的前端工程師。一方面是因為這是一個比較新的細分行業，而且前端程序員大都自學一部分，知識結構不系統；另一方面，大學裡面沒有這種課程。

8、css sprite 坐標定位為何為負以及定位方法

說說原理先：
CSS
Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background-
repeat」，「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

1234代碼：div{ background:#FFF url(image) no-repeat fixed x y;}

這里的background的屬性值依次為：

#FFF 背景色：（顏色值，背景圖片沒有覆蓋的地方，或者沒有背景圖片時表現的背景色）
image 背景圖片：（這里是圖片的地址）
no-repeat 是否重復：（圖片小於容器的大小時，默認會重復排列圖片以填滿容器，no-repeat表示不重復，只有這個時候後面的定位坐標才有用。）
fixed 背景是否隨容器滾動：（有兩個可選值，scroll滾動，fixed不滾動，默認是scroll）
x y 背景圖像的定位：（注意，只有在no-repeat下定位才有意義。這個就是今天要講的重點）

理解點---在於 background-position的屬性值：
1、兩個值前面一個是橫向的定位，我們稱為x軸方向定位。後面一個值是縱向的定位，我們稱為y軸方向定位。如果只有一個值，那默認的就是x軸方向，這時y軸方向就默認的是上下居中對齊，也就是center。
2、坐標軸的原點就是對應容器的左頂點。
3、這個坐標的y軸箭頭朝下，也就是右下方（容器內部）x y的值才都為正。
4、x y值分別表示背景圖片的左頂點相對於坐標原點（也就是容器的左頂點）的值。
5、x y的值可以用百分比或者px來表示。
6、x y也可以用「left、right、top、bottom、center」這五個對齊方式來表示，但注意：用「left、right、top、bottom、center」來表示的時候，應用的是對齊規則，而不是坐標規則。x為left是表示圖片的左邊和容器的左邊對齊，為right的時候表示圖片的右邊和容器的右邊對其，y為top的時候表示圖片的頂部和容器的頂部對齊，為bottom時表示圖片的底部和容器的底部對齊，x y等於center的時候表示居中對齊。
7、x y用百分比或者px表示的時候，其值可以為負數。我們應用坐標規則就很容易理解負數表示的意義，x為負數時候表示圖片左頂點在容器左頂點的左側，y為負數時表示圖片的左頂點在容器的左定點的上方。也就是向左和向上超出容器的范圍。

1234代碼：background:#FFF url(image) no-repeat fixed 50% -30%;

當為百分數時候：
左頂點距容器左頂點的坐標位置為
x：（容器的寬度-圖片的寬度）x50%
y：（容器的高度-圖片的高度）x（-30%）
CSS Sprites優點

利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合並成1張圖片的位元組總是小於這3張圖片的位元組總和。

CSS Sprites缺點

誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點
在圖片合並的時候，你要把多張圖片有序的合理的合並成一張圖片，還要留好足夠的空間，防止板塊內不會出現不必要的背景；這些還好，最痛苦的是在寬屏，高解析度的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
CSS
Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什麼難度，但是很繁瑣；幸還好有CSS
Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，復制，拷貝就OK！

CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合並的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的位元組就增加了，還要改動css。

CSS Sprites非常值得學習和應用，特別是頁面有一堆ico（圖標）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。
圖片優化

1. 對於非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果，而且能為你節省10%-30%的文件體積。
2. Photoshop相比起Fireworks，導出同等質量的PNG圖片，體積會稍大。而Fireworks雖然做了相應壓縮優化，但沒有達到最優秀的壓縮。
3. 我所知的設計軟體，對於PNG圖片的處理都沒做到最優秀的壓縮，圖片體積還有一定的壓縮空間。可以嘗試使用下面介紹的」圖像優化工具」做無失真的壓縮優化。
4. 圖片體積及尺寸方面，建議體積保持在100K以內(較為符合國情最佳請求SIZE)，size為800px(最佳尺寸)。(從某權威人事中得知，具體無從考證)

CSS Sprites圖片切割術

1. CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position一般採用數字組合形式定位，這樣能減少維護帶來的不必要麻煩。
2. 不建議CSS Sprites圖片中保持一定的間距，因為文件size增大而增加文件體積。
3. CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數，因為少色數的圖片文件體積會相對的小。
4. size相同的CSS Sprites圖片中留有較大空隙，某程度上多數情況會增大了體積，所以CSS Sprites的圖片不要有空隙。
5. 在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。
6. 在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。
7. 圖片對等合並：應用CSS Sprites圖片時，適當地把對等相同的圖像合並，以節省空間及減少體積。
8. 區分開不需要合並的圖像：如當前用戶確定只顯示一種狀態或一個級別時，不必要把其他的級別或狀態的圖片合並。
9. 黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文本前的icon，因此不會受到其它CSS Sprites圖片干預，也不需要預留一定的行寬。

補兩條
10. 有的說定位時避免使用bottom或right等，當使用CSS sprite的時候，只用background-position:
bottom -300px或background-position: right
-200px;非常容易。這剛開始的時候是可行的，但是問題是，當你在寬度上或高度上擴展相關sprite圖片的時候，原先設置的位置可能是錯的，因為那個圖片已經不再Sprite圖片的底部或右部了。使用確切的位置來避免這個問題。

其實我感覺一般情況寬度圖不片不會改應變，用RIGHT和 LEFT還是挺方便的，但從整體考慮，升級了。改版的。圖片寬度還是有可能會改變的。必竟開始時做太寬也沒什麼好處，還是浪費很多空間。就是多費點時間去對坐標，最好還是不用RIGHT 和 LEIFT的了。

12　有的說竟給每個圖片足夠的空間
就像你在本文頂部的實例圖片看到的那樣，那些小圖片都被預留了足夠的空間。為什麼不把他們塞到一塊來讓sprite圖片更小呢? 因為使用這些圖片的元素通常都會有大量的內容而且可能會需要擴展的間距，以至於其它圖片不會意外出現。

這個我支持，必竟多空點，也占不不了多大空間，如何要追求完美，那就慢慢調吧。費了勁了。在加上瀏覽器兼容問題，最好還大多空間。小誤差也忽略了。

9、實現css sprites的核心代碼是什麼

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。
利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合並成1張圖片的位元組總是小於這3張圖片的位元組總和。
解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。
更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點，如下：
在圖片合並的時候，你要把多張圖片有序的合理的合並成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高解析度的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什麼難度，但是很繁瑣；幸好騰訊的鬼哥用ADOBE AIR開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，復制，拷貝就OK！
CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合並的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的位元組就增加了，還要改動css。
CSS Sprites非常值得學習和應用，特別是頁面有一堆ico（圖標）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。

--------以上來自網路

導航:首頁 > 萬維百科 > 網頁設計sprite

網頁設計sprite

與網頁設計sprite相關的知識