馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

jQuery範例 – Apple產品導覽介面製作

by · 2011-09-08

這次的jQuery應用範例要來試做的是Apple官方網頁上面有關產品介紹的介面。

Apple 官網產品介紹頁面截圖

主要用到的圖檔除了各產品的照片之外，就只有兩張，一個是底部的漸層，另一個是三角形箭頭。

另外當然是用到了jQuery和CSS的語法，CSS中有3.0的語法，所以圓角、陰影…等都不是圖檔構成，有想要研究的可以看看馬老師製作的範例檔（下載）、範例檔2（下載），大家看完後有任何問題歡迎在此回應，謝謝！

註：本範例所使用的圖片版權屬於Apple與Adobe公司所有。

Tags:

You may also like...

17,689 Responses

  1. 시알리스 구매表示:
    2025-03-2420:47:40

    https://umber-iris-dd3cm2.mystrikingly.com/blog/674c3251b7d

    回覆
  2. Montebeera表示:
    2025-03-2420:19:54

    buying from online mexican pharmacy mexican pharmacy online store reliable mexican pharmacies

    回覆
  3. Ремонт холодильников в Казани表示:
    2025-03-2420:01:35

    pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт холодильников в Казани в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

    回覆
  4. 시알리스 구매表示:
    2025-03-2419:58:26

    https://lavender-fox-dbgzhq.mystrikingly.com/blog/308610f20f9

    回覆
  5. Ремонт индукционных плит в Новосибирске表示:
    2025-03-2419:22:23

    pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт индукционных плит в Новосибирске в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

    回覆
  6. Georgewhend表示:
    2025-03-2419:15:28

    mexican pharmacy online store: mexican pharmacy online store – mexican drug stores online

    回覆
  7. Georgetwiva表示:
    2025-03-2418:36:40

    view publisher site [url=https://surfwallet.io/]wallet surf[/url]

    回覆
  8. Georgewhend表示:
    2025-03-2418:26:47

    online medicine shopping in india: order medicines online india – India Med Fast

    回覆
  9. JamesGag表示:
    2025-03-2417:51:05

    online medicine shopping in india: online medicine shopping in india – india pharmacy without prescription

    回覆
  10. 네이버 아이디 구매表示:
    2025-03-2417:43:36

    https://garnet-kiwi-dbgzh4.mystrikingly.com/blog/22666432182

    回覆
  11. Georgetwiva表示:
    2025-03-2417:43:00

    next page surf tech

    回覆
  12. Arthurhow表示:
    2025-03-2417:34:05

    https://mexicanpharminter.com/# MexicanPharmInter
    my canadian pharmacy

    回覆
  13. Rudolfalgok表示:
    2025-03-2417:24:40

    go to this web-site wallet surf

    回覆
  14. Rudolfalgok表示:
    2025-03-2417:14:07

    look here surf tech

    回覆
  15. Georgetwiva表示:
    2025-03-2417:12:01

    click here to investigate zkLogin sui

    回覆
  16. 네이버 아이디 구매表示:
    2025-03-2416:57:26

    https://ameblo.jp/naveridbuy/entry-12867043066.html

    回覆
  17. Rudolfalgok表示:
    2025-03-2415:57:51

    find here surf tech

    回覆
  18. Rudolfalgok表示:
    2025-03-2415:49:23

    see this here zkLogin sui

    回覆
  19. Rudolfalgok表示:
    2025-03-2415:41:41

    click to find out more zkLogin sui

    回覆
  20. Rudolfalgok表示:
    2025-03-2415:40:55

    like it [url=https://surfwallet.io/]surf wallet[/url]

    回覆
  21. Georgetwiva表示:
    2025-03-2415:35:37

    hop over to here surf wallet

    回覆
  22. Rudolfalgok表示:
    2025-03-2415:29:39

    read the full info here surf wallet

    回覆
  23. 레비트라 구매表示:
    2025-03-2415:15:03

    https://bronze-lily-dbgzh7.mystrikingly.com/blog/b9f326cbd55

    回覆
  24. Georgetwiva表示:
    2025-03-2414:58:19

    blog surf wallet extension

    回覆
  25. Georgetwiva表示:
    2025-03-2414:37:28

    pop over here surf wallet

    回覆
  26. Rudolfalgok表示:
    2025-03-2414:29:19

    visit surf wallet extension

    回覆
  27. JamesGag表示:
    2025-03-2414:27:47

    mexican pharmacy online: mexican pharmacy online order – mexican pharmacy online

    回覆
  28. 비아그라 구매表示:
    2025-03-2414:21:32

    https://medium.com/@nsw5288/%EB%B0%9C%EA%B8%B0%EB%B6%80%EC%A0%84%EA%B3%BC-%EC%A1%B0%EB%A3%A8-%EC%9E%90%EA%B0%80-%EC%A7%84%EB%8B%A8%EA%B3%BC-%EC%B9%98%EB%A3%8C%EB%B2%95-557e4352a569

    回覆
  29. Georgetwiva表示:
    2025-03-2414:10:44

    look at here zkLogin sui

    回覆
  30. Ремонт электровелосипедов в Санкт-Петербурге表示:
    2025-03-2414:09:56

    pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт электровелосипедов в Санкт-Петербурге в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

    回覆

發佈回覆給「JamesGag」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。