¥DÃD¡GCSS§Þ¥©¡G³v´V°Êµe§Ý°Ê¸Ñ¨M¤è®×    

¥Zµn®É¶¡¡G2019/5/16 13:54:55    ÂI¾\²v¡G90


     



 

µ§ªÌ©Ò¦bªº«eºÝ¹Î¶¤¥D­n±q¨Æ²¾°ÊºÝªºH5­¶­±¶}µo¡A¦Ó¹Î¶¤¨Ï¥Îªº¾A°t¤è®×¬O:  viewport units + rem¡C¨ãÅé¥i¥H°Ñ¨£¥W¥Y¹êÅç«Çªº¤å³¹–  §Q¥Îµø¤f³æ¦ì¹ê²{¾A°t§G§½  ¡C

µ§ªÌ¥Ø«e¡]2017.08.12¡^±µÄ²¨ìªº²¾°ÊºÝ¾A°t¤è®×¤¤¡A¡u§Q¥Îµø¤f³æ¦ì¹ê²{¾A°t§G§½¡v¬O³Ì¦nªº¤è®×¡C¤£¹L¨Ï¥Î  rem §@¬°³æ¦ì·|¹J¨ì¥H¤U¨â­ÓÃøÂI¡G

  • ·LÆ[¤Ø¤o¡]20px¥ª¥k¡^©w¦ì¤£­ã
  • ³v´V°Êµe®e©ö¦³§Ý°Ê

²Ä¤@­ÓÃøÂIªº³q±`¥X²{¦b  icon Ã¸»s¹Lµ{¡A¥i¥H¨Ï¥Î¹Ï¤ù©ÎªÌ  svg-icon  ¸Ñ¨M³o­Ó°ÝÃD¡Aµ§ªÌ±j¯P«ØÄ³¨Ï¥Î  svg-icon¡A¨ãÅé²z¥Ñ¥i¥H°Ñ¨£¡G¡u¾Ö©êWeb³]­p·sÁͶաGSVG Sprites¹ê½îÀ³¥Î¡v¡C

²Ä¤G­ÓÃøÂIµ§ªÌÁ|­Ó¨Ò¤l¨Ó¤ÀªR§Ý°Êªº­ì¦]©M´M§ä¸Ñ¨M¤è®×¡C

¤@­Ó§Ý°Êªº¨Ò¤l

°µ¤@­Ó8´Vªº³v´V°Êµe¡A¨C´Vªº¤Ø¤o¬°¡G360×540¡C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.steps_anim {
position : absolute;
width : 9rem ;
height : 13.5rem ;
background : url (//misc.aotu.io/leeenx/sprite/m.png) 0 no-repeat;
background-size : 45rem 13.5rem ;
top : 50% ;
left : 50% ;
margin : – 5.625rem 0 – 5.625rem ;
animation : step 1.2s steps (5) infinite;
}
 
keyframes step {
100% {
background-position : – 45rem ;
}
}

Æ[¹î¦b¥D¬y¡]¤â¾÷¡^¤À¿ë²v¤Uªº¼½©ñ±¡ªp¡G

iPhone 6 
(375×667)
iPhone 6+ 
(414×736)
iPhone 5 
(320×568)
Android 
(360×640)

¥|ºØ¤À¿ë²v¤U¡A¥i¥H¬Ý¨ì°£¤F  ip6 ¨ä¥¦ªº¤TºØ¤À¿ë²v³£µo¥Í¤F§Ý°Ê¡C¡]ip6 ¤£§Ý°Êªº­ì¦]¬O¾A°t¤è®×¬O°ò¥»©ó  ip6 ªº¤À¿ë²v­q»sªº¡C¡^

¤ÀªR§Ý°Ê

¹Ï¹³¥Ñ²×ºÝ¡]«Ì¹õ¡^Åã¥Ü¡A¦Ó²×ºÝ«h¬O¤@­Ó­Ó¥úÂI¡]ª«²z¹³¯À¡^²Õ¦¨ªº¯x°}¡A´«¥y¸Ü»¡¹Ï¤ù¤]¤@²Õ¥úÂI¯x°}¡C¬°¤F¤è«K´y­z¡Aµ§ªÌ°²³]²×ºÝ¤Wªº¤@­Ó¥úÂI¥Nªícss¤¤ªº1px¡C

¥H¤U¬O¤@±i  9px * 3px ªºsprite:
9px * 3px

¨C´Vªº¤Ø¤o¬°  3px * 3px¡A³v´Vªº¨ú¦ì¹Lµ{¦p¤U¡G
9px * 3px

§âspriteªºbackground-sizeªº¼e«×¨ú¤@¥b¡A¨º»ò²×ºÝ·|«ç»ò³B²z¡H
9 / 2 = 4.5 
²×ºÝªº¥úÂI³£¬O¥H¦ÛµM¼Æªº§Î¦¡¥X²{ªº¡A³o¸Ì»Ý­n°µ¨ú¾ã³B²z¡C¨ú¾ã¤@¯ë¬O¤TºØ¤è¦¡¡Ground/ceil/floor¡C°²³]¬Oround ¡A¨º»ò  background-size: 5px¡Asprite·|¬O¥H¤U¤TºØªº¤@­Ó¡G

±¡ªp¤@ ±¡ªp¤G ±¡ªp¤T
9px * 3px 9px * 3px 9px * 3px

²z½×¤W¡A5 / 3 = 1.666...¡C¦ý¹ê»Ú¤W¥úÂI¨ú¾ã«á¡A¤T­Ó´Vªº¼e«×³£¤£¥i¯àµ¥©ó  1.666...¡A¦Ó¬O¦³¤@­Ó´Vªº¼e«×­°¯Å¬°  1px¡]Á«¡^¡A¥t¥~¨â­Ó¼e«×¤É¯Å¬°  2px¡]¬Õ¡^¡Aµ§ªÌ§â³o­Ó²{¶HºÙ§@¡u¬ÕÁ«¤¬¸É¡v¡C

¦A¬Ý¤@¤U¬ÕÁ«¤¬¸É«á¡A³v´Vªº¨ú¦ì¹Lµ{¡G

±¡ªp¤@ ±¡ªp¤G ±¡ªp¤T
9px * 3px 9px * 3px 9px * 3px

¥i¥H¬Ý¨ì¥Ñ©ó¬ÕÁ«¤¬¸É¾É­P¤F¤T­Ó´Vªº¼e«×¤£¤@­P¡AÁ«ªº¨º¤@´V¦b°Êµe¤¤ªºªí¥Ü´N¬O§Ý°Ê¡C

µ§ªÌÁ`µ²§Ý°Êªº­ì¦]¬O¡Gsprite¦b¤Ø¤oÁY©ñ«á¡A´V»P´V¤§¶¡ªº¬ÕÁ«¤¬¸É²{¶H¾É­P°Êµe§Ý°Ê

ªþµù¡G1px ¥Ñ´X­Ó¥úÂIªí¥Ü¬O¥Ñ¥H²×ºÝªºdpr ¨M©w

¸Ñ¨M¤è®×

¡u¬ÕÁ«¤¬¸É¡v¤]¥i¥H»¡¬O¡u¬ÕÁ«¤£¤@­P¡v¡A¦pªG¤Ø¤o¦bÁY©ñ«á¡u¬ÕÁ«¤@­P¡v¨º»ò§Ý°Ê²{¶H¥i¥H¸Ñ¨M¡C

¸Ñ¨Mºc·Q¤@

µ§ªÌ®Ú¾Ú¡u¬ÕÁ«¤@­P¡v³]­p¤F¡u¸Ñ¨Mºc·Q¤@¡v¡G

9px * 3px

®Ú¾Ú¤W¹Ï¡A¨ä¹ê«Ü®e©ö´NÁp·Q¨ì¤@­Ó²³æªº¤è®×¡G¤£¥Î³·ºÑ¹Ï¡]§Y¤@´V¹ïÀ³¤@±i¹Ï¤ù¡^¡C
³o­Ó¤è®×½T¹ê¬O¥i¥H¸Ñ¨M§Ý°ÝÃD¡A¤£¹Lµ§ªÌ¨Ã¤£±ÀÂ˨ϥΥ¦¡A¦]¬°¥¦¦³¨â­Ó­t­±ªºªF¦è¡G

  • KBÅܤj»P½Ð¨D¼Æ¼W¦h
  • ¦h¾lªºanimation ¥N½X

³o­Ó¤è®×«Ü²³æ¡A³o¸Ì´N¤£ÂØ­z¤F¡C

¸Ñ¨Mºc·Q¤G

§â³v´V¨ú¦ì»P¹Ï¹³ÁY©ñ©î¤À¦¨¨â­Ó¿W¥ßªº¹Lµ{¡A´N¬Oµ§ªÌªº¡u¸Ñ¨Mºc·Q¤G¡v¡G
9px * 3px

¹ê²{¡uºc·Q¤G¡v¡Aµ§ªÌ­º¥ý·Q¨ìªº¬O¨Ï¥Î  transform: scale()¡A©ó¬O¾ã²z¤F¤@­Ó¹ê²{¤è®×A¡G

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.steps_anim {
position : absolute;
width : 360px ;
height : 540px ;
background : url (//misc.aotu.io/leeenx/sprite/m.png) 0 no-repeat;
background-size : 1800px 540px ;
top : 50% ;
left : 50% ;
transform-origin : left top;
margin : – 5.625rem 0 – 5.625rem ;
transform : scale (.5);
animation : step 1.2s steps (5) infinite;
}
keyframes step {
100% {
background-position : – 1800px ;
}
}
/* ¼gÂ_ÂI*/
media screen and (width: 320px ) {
.steps_anim {
transform : scale (0.4266666667);
}
}
media screen and (width: 360px ) {
.steps_anim {
transform : scale (0.48);
}
}
media screen and (width: 414px ) {
.steps_anim {
transform : scale (0.552);
}
}

³o­Ó¹ê²{¤è®×A¦s¦b©úÅ㪺¯Ê³´¡Gscaleªº­È»Ý­n¼g«Ü¦hÂ_ÂI¥N½X¡C©ó¬Oµ§ªÌµ²¥þ¤@¬qjs¥N½X¨Ó§ïµ½³o­Ó¹ê²{¤è®×B¡G

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.steps_anim {
position : absolute;
width : 360px ;
height : 540px ;
background : url ( “//misc.aotu.io/leeenx/sprite/m.png” ) 0 no-repeat;
background-size : 1800 540px ;
top : 50% ;
left : 50% ;
transform-origin : left top;
margin : – 5.625rem 0 – 5.625rem ;
animation : step 1.2s steps (5) infinite;
}
keyframes step {
100% {
background-position : – 1800px ;
}
}

 

javascript:

1
2
3
4
5
6
7
8
9
// ¥H¤U¥N½X©ñ¨ì<head></head> ¤¤
<script>
document .write( “<style id=¡¦scaleStyleSheet¡¦>.steps_anim {scale(.5); }</style>” );
function doResize () {
scaleStyleSheet.innerHTML = “.steps_anim {-webkit-transform: scale(“ + ( document.documentElement.clientWidth / 750 ) + “)}” ;
}
window .onresize = doResize;
doResize();
/script>

 

³q¹L§ïµ½«áªº¤è®×CSS ªºÂ_ÂI¨S¤F¡A·Pı¬O¤£¿ù¤F¡A¤£¹Lµ§ªÌı±o³o­Ó¤è®×¤£¬O­Ó¯Âºéªººc«Ø¤è®×¡C

§Ú­Ìª¾¹D  <img> ¬O¥i¥H®Ú¾Ú«ü©wªº¤Ø¤o¦Û¾AÀ³ÁY©ñ¤Ø¤oªº¡A¦pªG³v´V°Êµe¤]¯à»P  <img> ¦Û¾AÀ³ÁY©ñ¡A¨º´N¥i¥H±q¯Âºc«Ø¨¤«×¹ê²{¡uºc·Q¤G¡v¡C

SVG­è¦n¥i¥H¸Ñ¨MÃøÃD¡I¡I¡ISVG ªºªí²{»P  <img> Ãþ¦ü¦P®É¥i¥H°µ°Êµe¡C¥H¤U¬Oµ§ªÌªº¹ê²{¤è®×C¡C

html:

1
2
3
svg viewBox = “0, 0, 360, 540” class = “steps_anim” >
image xlink:href = “//misc.aotu.io/leeenx/sprite/m.png” width = “1800” height = “540” />
</ svg >

 

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.steps_anim {
position : absolute;
width : 9rem ;
height : 13.5rem ;
top : 50% ;
left : 50% ;
margin : – 5.625rem 0 – 5.625rem ;
image {
animation : step 1 .2s steps (5) infinite ;
}
}
 
keyframes step {
100% {
transform : translate3d (-1800px, 0, 0);
}
}

 

¤è®×Cªº§ï¨}

¹ê²{¤è®×C«Ü¦n¦a¸Ñ¨M¤F¤è®×A©M¤è®×Bªº¯Ê³´¡A¤£¹L¤è®×C¤]¦³¥¦ªº°ÝÃD¡G¤£§Q©ó¦Û°Ê¤Æ¤u¨ã¥h³B²z¹Ï¤ù¡C

¦Û°Ê¤Æ¤u¨ã¤@¯ë¬O«ç»ò³B²z¹Ï¤ùªº¡H
¦Û°Ê¤Æ¤u¨ã¤@¯ë¬O±½´yCSS¤å¥ó§ä¥X©Ò¦³ªº  url(...) »y¥y¡AµM«á¦A³B²z³o¨Ç»y¥y«ü¦Vªº¹Ï¤ù¤å¥ó¡C

¦pªG  <image> ¥i¥H§ï¥ÎCSSªº  background-image ´N¥i¥H¸Ñ¨M³o­Ó°ÝÃD¡A¤£¹L  SVG ¤£¤ä«ùCSSªº  background-image¡C¦ý¬O¡ASVG¦³¤@­ÓÂX®i¼ÐÅÒ¡GforeignObject¡A¥¦¤¹³\¦V  <svg></svg> ´¡¤J  html ¥N½X¡C¦b¨Ï¥Î¥¦«e¡A¥ý¬Ý¤@¤U¥¦ªº­Ý®e±¡ªp¡G

caniuse

iOS»PAndroid 4.3¤@¤ù¯óºñ­Ý®e±¡ªpºâ¬O¨}¦n¡Aµ§ªÌ¹ê¾÷´ú¸ÕÄ˰T  X5 ¤º®ÖªºÂsÄý¾¹­Ý®e¤´Â¨}¦n¡C¥H¤U¬O§ï¨}«áªº¤è®×¡C

html:

1
2
3
4
5
svg viewBox = “0, 0, 360, 540” class = “steps_anim” >
foreignObject class = “html” width = “360” height = “540” >
div class = “img” > </ div >
</ foreignObject >
</ svg >

 

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.steps_anim {
position : absolute;
width : 9rem ;
height : 13.5rem ;
top : 50% ;
left : 50% ;
margin : – 5.625rem 0 – 5.625rem ;
}
.html {
width : 360px ;
height : 540px ;
}
.img {
width : 1800px ;
height : 540px ;
background : url (//misc.aotu.io/leeenx/sprite/m.png) 0 no-repeat;
background-size : 1800px 540px ;
animation : step 1.2s steps (5) infinite;
}
 
keyframes step {
100% {
background-position : – 1800px 0 ;
}
}

 

§ï¨}«áªº¤è®×DEMO:  http://jdc.jd.com/fd/promote/leeenx/201708/svg-sprite.html

µ²»y

·PÁ¾\Ū§¹¥»¤å³¹ªºÅªªÌ¡C¥»¤å¬Oµ§ªÌªº­Ó¤HÆ[ÂI¡A§Æ±æ¯àÀ°§U¨ì¦³¬ÛÃö°ÝÃDªºªB¤Í¡A¦pªG¥»¤å¦³¤£§´¤§³B½Ð¤£§[½ç±Ð¡C


°Ñ¦Ò¸ê®Æ¡G

https://stackoverflow.com/questions/9946604/insert-html-code-inside-svg-text-element 
https://www.w3.org/TR/SVG/extend.html 
https://developer.mozilla. org/en-US/docs/Web/SVG/Element/foreignObject

¡@

¡@

¼öªù¤å³¹ :
JQueryÀ³¥Î : HTML5À³¥Î : CCS3À³¥Î :
  • ¨Ï¥ÎjQuery & CSS3 »s§@¬üÄRªº·Ó¤ùµe´Y(127)


  • 5ºØ­·®æªºjQuery ¤À­¶®ÄªG(117)


  • Notyf ¡V ÅTÀ³¦¡ªºJavaScript ³qª¾´¡¥ó!(101)


  • °ò©ójQuery ¹ê²{ªººë½o§@«~¶°¹Ï¤ù¾É¯è®ÄªG(78)


  • jQuery¯d¨¥µû½×µo¥¬¥N½X(71)


  • °ò©ójQuery ¹ê²{°Êµe¤º®eµæ³æ(67)


  • jQuery²¾°ÊºÝÂùÀ»¹Ï¤ù©ñ¤j¯S®Ä(67)


  • jQuery¯B°Ê¼s§i¾î´T¥N½X(64)


  • ±a¤ÀÃþ©MÁY²¤¹ÏÅã¥Üªºjquery¬Û¥U¯S®Ä(61)


  • 20´Ú²¾°Ê¶}µo¤¤«Ü¦³¥ÎªºjQuery´¡¥ó(55)


  • HTML5 SVG¥d³q¤ô¥À°Êµe¯S®Ä(256)


  • HTML5¹«¼Ð¸òÀH¥ß¤èÅé¸H¤ù¯S®Ä(221)


  • HTML5 Canvas¤jªi®ö°Êµe¯S®Ä(189)


  • HTML5¤å¦r¶]°¨¿O°Êµe¯S®Ä(183)


  • HTML5 SVG±¡¤H¸`²°¤l°Êµe¯S®Ä(160)


  • HTML5 Canvas¬y°Ê½u±ø°Êµe¯S®Ä(138)


  • HTML5½u±ø·Ó®g·R¤ß°Êµe¯S®Ä(116)


  • 12­Ó«Ü¬¯ªºHTML5 ©MCSS3 À³¥Î¥Ü¨Ò(71)


  • HTML5ø»s±m¦â¶ê°é°Êµe¯S®Ä(68)


  • HTML5½u±ø¹³¯À­I´º°Êµe¯S®Ä(62)


  • CSS3¶êÂI«_ªw­I´º°Êµe¯S®Ä(348)


  • Creative CSS Loading Animations(282)


  • CSS3Âà½L©â¼ú°Êµe¯S®Ä¼Ë¦¡(241)


  • ¯ÂCSS¹ê²{±aÁY²¤¹Ïªº¹Ï¤ù¬Û¥U¤Û¿O¤ù®ÄªG(103)


  • CSS§Þ¥©¡G³v´V°Êµe§Ý°Ê¸Ñ¨M¤è®×(90)


  • ¸g¨åºô­¶³]­p¡G30­Ó³Ð·NªºCSS À³¥Î®×¨Ò(89)


  • 45´Ú°ª½è¶qªº§K¶O(X)HTML/CSS¼ÒªO(81)


  • ¯ÂCSS3¸t½Ï¾ð³·ªáÄÆ¸¨°Êµe¯S®Ä(80)


  • ¯ÂCSS¥´³yªº¹«¼ÐÄa°±·|Åã¥ÜÃ䮨©M´y­zªº¹Ï¤ù¬Û¥U¯S®Ä(72)


  • 23ºØº}«Gªº¯ÂCSS¾É¯èµæ³æ(68)


  • ¯À§÷¸ê·½ : ºô­¶³]­p : ³Ð·NªY½à :
  • SVGªº§Îª¬Äa°±®ÄªG (¤@)(571)


  • SVGªº§Îª¬Äa°±®ÄªG (¤G)(131)


  • HTML5¤Tºû¥ßÅéªwªj¤è¶ô²¾°Ê¯S®Ä(76)


  • ºë«~¸ê·½¡G40­Ó¹ê¥ÎªºPSD ¶K¯È¼ÒªO¡m¤U½g¡n(68)


  • ³Ð«Ø¯¾²z¤å¥»ªº§Þ¥©(65)


  • Sliding Header Layout (¤G)(65)


  • SVGªº§Îª¬Äa°±®ÄªG (¤T) (65)


  • ¤ä¥I«H®§´£¥æ²Õ¥óºô­¶¼ÒªO(62)


  • 3D Shading with Box-Shadows(52)


  • Recreating the ¡§Design Samsung¡¨ Grid Loading Effect(52)


  • LightGallery.js ¡V ¥\¯à»ô¥þªºLightbox ®ÄªG(165)


  • ¨ã¦³Three.jsªº¥æ¤¬¦¡±Æ¥¸®ÄªG (¤G)(100)


  • ¨ã¦³Three.jsªº¥æ¤¬¦¡±Æ¥¸®ÄªG (¤@)(91)


  • ¥O¤HºÙÆgªº¥H¿ì¤½Àô¹Ò¬°­I´ºªººô¯¸§@«~(90)


  • ¦Þ¦y¤Wªº³]­p¡I10­Ó¬ü¨ýªºÀ\À]©M­¹«~ºô¯¸(85)


  • 20´ÚÀu¨qªº°ê¥~Mobile App ¬É­±³]­p®×¨Ò(79)


  • µ·±a¡]Ribbon¡^¦bºô­¶³]­p¤¤À³¥Îªº20¨Î®×¨Ò(64)


  • 20­Ó¥H¯x§Î¤¸¯À¬°¯S¦âªº³Ð·Nºô¯¸³]­p§@«~(61)


  • 20­Ó°ê¥~Àu¨qªººô­¶¦â±m·f°t®×¨Ò(60)


  • °ò©ójQuery¹ê²{Áp·Q¤j«ÌµJÂI¹Ï¤Á´«(56)


  • 50­Ó³ÌÀu¨qªºPhotoshop ¹ê¨Ò±Ðµ{¡i¤å¦r¯S®Ä½g¡j(153)


  • ¸g¨åºô­¶³]­p¡G20­Ó­È±oÃöª`ªº³Ð·N§@«~¶°ºô¯¸¥Ü¨Ò(147)


  • ¡i¯S§O±ÀÂË¡j12®Mºë½oªººô¯¸©M²¾°ÊÀ³¥Î¬É­±³]­p¯À§÷(104)


  • ¿EµoÆF·P¡G26­Ó²M²nªºÂŦâ½Õºô­¶³]­p§@«~ªY½à(81)


  • ¡i±ÀÂ˾\Ū¡j²³æ¤§¬ü¡G30­Ó·¥Â²¥D¸q­·®æªººô¯¸§@«~(69)


  • ¸g¨åºô­¶³]­p¡G15­Ó¨Ï¥Îºô®æ¨t²Îªººë¬üºô¯¸§@«~(66)


  • ¡i¦~«×²±®b¡j2019¦~±Æ¦W«e20¦ìªºCSS ºô¯¸§@«~(63)


  • ¤Ó¦³¤~¤F¡I¥v¤W³Ì¦³³Ð·Nªº404­¶­±³]­p¶°ÀA(59)


  • ¸g¨å¦^ÅU¡X¡X2019¦~«×³Ì¨Îºô­¶³]­p§@«~¥XÄl¡i¤U½g¡j(55)


  • 15´Ú¥[³tWeb¶}µoªºJavaScript®Ø¬[(53)


  • ºô­¶¼ÒªO : ¤â¾÷¼ÒªO : ºô¸ô¬ì§Þ :
  • ·Ó¤ùÃÀ³N¤é»xºô­¶¼ÒªO(99)


  • ¹Ï¤ù¤é»x«H®§ºô­¶¼ÒªO(82)


  • SNS¤À¨É¹Ï¼Ð«ö¶sºô­¶¼ÒªO(73)


  • Åwªï¨Ï¥ÎTEMPLATED´£¨Ñªº§K¶OÅTÀ³¦¡ºô¯¸¼ÒªO(65)


  • Mountain Slider(56)


  • ÂŦâºë¬ü­·®æªº«~µP®a©~°Ó«°ºô¯¸¼ÒªO¤U¸ü(54)


  • ­Ó¤H¹Ï¤ù«H®§¤¶²Ðºô­¶¼ÒªO(53)


  • °{Ã{·t¬õ®T¼Ö«H®§ºô­¶¼ÒªO(50)


  • ¶Â¦â¼Ð·Ç­·®æªº¤Þ¾É­¶¼ÒªO¤U¸ü(47)


  • ¬õ¦â¹Ï¤ù¦Cªíºô­¶¼ÒªO(45)


  • ­»¯Ü­¹«~®Æ²zÅTÀ³¦¡ºô­¶¼ÒªO(96)


  • ¹Ï¤ù¬Û¥U®i¥ÜÅTÀ³¦¡ºô­¶¼ÒªO(89)


  • Metro¹Ï¤ù«H®§®i¥ÜÅTÀ³¦¡ºô­¶¼ÒªO(74)


  • ²¼ä²£«~®i¥Üºô©±ÅTÀ³¦¡ºô­¶¼ÒªO(70)


  • º~³ùÀ\ÆUÅTÀ³¦¡ºô­¶¼ÒªO(69)


  • ºë«~À\ÆU¬ü­¹®i¥ÜÅTÀ³¦¡ºô¯¸¼ÒªO(68)


  • ÃÀ³NµeÀ]ºô­¶¼ÒªO(68)


  • Fringilla Fermentum Tellus(67)


  • ¤k¥]°Ó«°®i¥ÜÅTÀ³¦¡ºô­¶¼ÒªO(67)


  • ÃÀ³N¹Ï¤ù®i¥ÜÅTÀ³¦¡ºô­¶¼ÒªO(66)


  • 15´Ú¤è«K¹Î¶¤·¾³qªº§Y®É²á¤Ñ¤u¨ã(243)


  • 20´Ú§A¨SÅ¥»¡¹Lªº¤p²³WebÂsÄý¾¹(160)


  • 50´ÚAndroid ²¾°ÊÀ³¥Îµ{§Ç¹Ï¼Ð¡i¤U½g¡j(149)


  • ¶Ç»¡³o­Ó¬O35 ­Ó³Ì¦n¥ÎVue ¶}·½®w(130)


  • 30­Ó¶W´ÎªºSVG°Êµe®i¥Ü¡i¤W½g¡j(110)


  • 50­Ó³Ì¹ê¥ÎªºPhotoshop ¹ê¨Ò±Ðµ{¡i·Ó¤ù¯S®Ä½g¡j(103)


  • 8´ÚChrome´¡¥óÅý§Aªº¼ÐÅÒ­¶§ó»Å¬¯(92)


  • OverAPI.com ¡V ¥v¤W³Ì¥þªº¶}µo¤H­û¦b½u³t¬d¤â¥U(92)


  • Clipboard.js ¡V ²{¥N¤è¦¡½Æ»s¤å¥»¨ì°Å¶KªO(58)


  • 20­Ó¨Ï¥Î¤â¼g¦rÅ骺§@«~ªY½à(53)


  •     

    ªA°È¹q¸Ü¡G0982-450920(¨È¤Ó)¡B0905-147856(¤¤µØ)¡B0970-755956(¥x­ô¤j) ³¯¦Ñ®v

    ¡@