彙整 | 十一月, 2011

精選30個優秀的CSS技術和實例

8 十一月

1. Hoverbox圖片集

一個純淨的基於CSS的圖片集,鼠標懸停縮略圖就會顯示放大效果。

CSS-實例

 

2. 高級CSS菜單

一款很有創意且複雜的CSS導航方案。

CSS-實例

3. 滑動影集

手風琴效果的影集,懸停便可拉伸圖片。

CSS-實例

4. Lightbox幻燈片

題為” Supercharge your image borders “的文章中的一部分展示瞭如何使用CSS樣式讓圖片變得更有意思。

CSS-實例

5. 圖片的陰影效果

在A List Apart上的一個關於圖片效果Demo的討論文章” CSS Drop shadows “.

CSS-實例

6. 跨瀏覽器多頁式影集

懸停標籤改變分類,懸停縮略圖顯示放大圖。

CSS-實例

7. CSS照片放大

使用簡單的圖片和background-position屬性來進行調解。

CSS-實例

8. CSS gallery layout—smells like a table

模仿表格佈局,但使用的是列表。圖集是流式寬度。

CSS-實例

9. Sticky Footer

僅使用了很少XHTML的靜態頁腳。

CSS-實例

10. whatever: hover

模仿Windows開始菜單的CSS導航菜單。

CSS-實例

11. 純CSS手風琴效果

使用div和:hover偽類的手風琴效果,這個效果可以垂直顯示也可以水平顯示。

CSS-實例

12. 使用PNG和背景色的可擴展按鈕

CSS-實例

13. Pushbutton Links

鏈接在不使用圖片的情況下看起來​​像個按鈕。

CSS-實例

14. 含固定Header的可捲動表格

表格的標題被固定的優秀長表格。

CSS-實例

15. CSS內容遮蓋

當你懸停在圖片上時,div容器會顯示更多文字。

CSS-實例

16. CSS樣式表格版本2

一個使用背景圖片且非常漂亮,被語義化標記的表格。

CSS-實例

17. PNG遮蓋

另一種為圖片添加圓角的方法。(圓角、邊框、陰影)

CSS-實例

18. 利用CSS為超鏈接添加提示

關於為不同類型的鏈接添加圖標的簡單教程。

CSS-實例

19. 簡單的CSS圓角邊框

僅適用了一張圖片和很少的幾行代碼及標記。

CSS-實例

20. Sitemap Celebration

使用嵌套列表的樹形導航,很適合網站地圖頁面。

CSS-實例

21. 簡單的跨瀏覽器幻燈片

不使用JavaScript實現透明度技巧(但是以不符合XHTML驗證為代價)

CSS-實例

22. 圓角2

流式跨度和高度的圓角div。

CSS-實例

23. 使用背景圖片百分比來創建圖表

條線圖使用列表<li>。

CSS-實例

24. CSS柱狀圖:實例

3款柱狀圖實例:使用div和列表標籤的”基本CSS柱狀圖”、”複雜CSS柱狀圖”、”垂直CSS柱狀圖”。

CSS-實例

25. 動態翻轉簡單頭

箭頭會平滑的跟隨鼠標移動,沒有使用一丁點JavaScript和gif動畫。

CSS-實例

26. 基於CSS的表單模板

CSS-實例

27. CSS圖片文本結合技巧

使用了空白div來讓文本能圍繞背景圖中的圖像顯示。

CSS-實例

28. 使用CSS實現淡入效果的圖片

這個實例使用透明度設置和簡單的圖片逐漸在文字上方淡入圖片。

CSS-實例

29. 純CSS彈出效果

一個在IE5(Mac)上也能正常工作的彈出技巧。

CSS-實例

30. 使用CSS實現文本漸變效果

使用背景圖片遮蓋,和一個空的span標籤,還有position: absolute聲明來實現文本的漸變效果。

CSS-實例

==================================================

原載: 彬Go
本文鏈接: http://blog.bingo929.com/30-css-tec-examples.html

 

 

 

 

 

廣告

15款非常有用的前端開發CSS網格(grid system)生成器

8 十一月

1.網格佈局生成器By Pagecolumn

CSS-網格

2. 網格生成器By DesignByGrid

div-css-網格生成器

3. Blueprint CSS網格生成器

blueprint-grid-css-generator

4. 網格生成器by netProtozo

CSS-網格-生成器

5. Grid Designer (featured in Creative Review magazine)

grid-designer-by-mindplay1

6. 網格系統生成器

前端開發-網格系統

7. YUI CSS網格生成器

yui-css-框架-網格

8. Variable Grid System

網格系統

9. YAML生成器

yaml-網格系統-生成器

10. 佈局生成器by Pagecolumn

CSS-div-佈局

11. Fisheye

網格系統

12. CSS佈局生成器by CSSCreator

css-佈局-網格-生成

13. Firdamatic

css網格系統

14. 支持邊框的CSS1~3列頁面生成器

CSS-框架

15. CSS佈局生成器by CSSPortal

CSS-佈局

========================================================

原載: 彬Go ——集前端開發/網頁設計/網站可用性/用戶體驗於一體的趣味互聯網生活
本文鏈接: http://blog.bingo929.com/15-extremely-useful-css-grid -layout-generator.html

99款高質量XHTML/CSS模板

8 十一月

01. T-20

css-xhtml-模板
在線預覽 下載該模板

02. Shape

div-css-模板
在線預覽 下載該模板

03. Your Business

div-css-模板
在線預覽 下載該模板

04.Solitude

div-css-模板
在線預覽 下載該模板

05. Fashion Club (Registration Required)

div-css-模板
在線預覽 下載該模板

06. O’No! Typography

div-css-模板
在線預覽 下載該模板

07.Pr​​ojection

div-css-模板
在線預覽 下載該模板

08.Fresh Restaurant

div-css-模板
在線預覽 下載該模板

09.Jungleland 1.0

div-css-模板
在線預覽 下載該模板

10.SindromK

div-css-模板
在線預覽 下載該模板

11. Environment Brand Design

div-css-模板
在線預覽 下載該模板

12.Colourise 1.0

div-css-模板
在線預覽 下載該模板

13.Charcoal (Registration Required)

div-css-模板
在線預覽 下載該模板

14.H Free Software

div-css-模板
在線預覽 下載該模板

15. Dark and Sleek Web Design

div-css-模板
在線預覽 下載該模板

16.Photo Portfolio

div-css-模板
在線預覽 下載該模板

17. FACING

div-css-模板
在線預覽 下載該模板

18.Symisun

div-css-模板
在線預覽 下載該模板

19.Luvbold

div-css-模板
在線預覽 下載該模板

20.freetemplates

div-css-模板
在線預覽 下載該模板

21.2 Breed

div-css-模板
在線預覽 下載該模板

22.Extreme Georgia

div-css-模板
在線預覽 下載該模板

23.Electronix

div-css-模板
在線預覽 下載該模板

24.Catalogio

div-css-模板
在線預覽 下載該模板

25.theARTofTYPE

div-css-模板
在線預覽 下載該模板

26.Alexx C

div-css-模板
在線預覽 下載該模板

27. Greefies

div-css-模板
在線預覽 下載該模板

28. FreshMedia 1.0

div-css-模板
在線預覽 下載該模板

29.Dusky

div-css-模板
在線預覽 下載該模板

30.Creative Media

div-css-模板
在線預覽 下載該模板

31.Package (Registration Required)

div-css-模板
在線預覽 下載該模板

32.Internet Music

div-css-模板
在線預覽 下載該模板

33.Typographic Times

div-css-模板
在線預覽 下載該模板

34. Turrion

div-css-模板
在線預覽 下載該模板

35.David K​​ruger

div-css-模板
在線預覽 下載該模板

36. Clean Web 2.0 Style Web Design

div-css-模板
在線預覽 下載該模板

37.FreshPick 1.0

div-css-模板
在線預覽 下載該模板

38. Artificial Casting

div-css-模板
在線預覽 下載該模板

39.Business Company

div-css-模板
在線預覽 下載該模板

40.JavaScript Tricks

div-css-模板
在線預覽 下載該模板

41.Treasure hunters

div-css-模板
在線預覽 下載該模板

42.Dating & Wedding (Registration Required)

div-css-模板
在線預覽 下載該模板

43.TEMPER

div-css-模板
在線預覽 下載該模板

44.EXTREME UPDATES

div-css-模板
在線預覽 下載該模板

45. Experimental

div-css-模板
在線預覽 下載該模板

46.​​Maintenance

div-css-模板
在線預覽 下載該模板

47.Ubly

div-css-模板
在線預覽 下載該模板

48.Shalom Typo

div-css-模板
在線預覽 下載該模板

49.Beez design

div-css-模板
在線預覽 下載該模板

50.MiniCon

div-css-模板
在線預覽 下載該模板

51.ec mania

div-css-模板
在線預覽 下載該模板

52.Tool shop

div-css-模板
在線預覽 下載該模板

53.REDISH

div-css-模板
在線預覽 下載該模板

54.Rock Band

div-css-模板
在線預覽 下載該模板

55.Liquid

div-css-模板
在線預覽 下載該模板

56.Keep It Simple 1.0

div-css-模板
在線預覽 下載該模板

57.Typo Today

div-css-模板
在線預覽 下載該模板

58.Impress

div-css-模板
在線預覽 下載該模板

59.Art & Photography (Registration Required)

div-css-模板
在線預覽 下載該模板

60.Inverted Headline

div-css-模板
在線預覽 下載該模板

61.Business Company

div-css-模板
在線預覽 下載該模板

62.JET 30

div-css-模板
在線預覽 下載該模板

63.BREAKING ONTOP

div-css-模板
在線預覽 下載該模板

64.Quartz istorage

div-css-模板
在線預覽 下載該模板

65.Fireworks

div-css-模板
在線預覽 下載該模板

66.UrbanArtist 1.0

div-css-模板
在線預覽 下載該模板

67.Eastern Tales

div-css-模板
在線預覽 下載該模板

68.Unbound 1.0

div-css-模板
在線預覽 下載該模板

69.DelliStore

div-css-模板
在線預覽 下載該模板

70.NEW RI​​SE

div-css-模板
在線預覽 下載該模板

71.Miniml

div-css-模板
在線預覽 下載該模板

72.Greenie Theme

div-css-模板
在線預覽 下載該模板

73.F-GEN-02 (Registration Required)

div-css-模板
在線預覽 下載該模板

74.Worldlines

div-css-模板
在線預覽 下載該模板

75.Web Application

div-css-模板
在線預覽 下載該模板

76.Buesiness Company

div-css-模板
在線預覽 下載該模板

77.GREEN WEB

div-css-模板
在線預覽 下載該模板

78.WaterColored Portfolio

div-css-模板
在線預覽 下載該模板

79.Blue Inc

div-css-模板
在線預覽 下載該模板

80.Musical instruments

div-css-模板
在線預覽 下載該模板

81.LightSpee

div-css-模板
在線預覽 下載該模板

82.Mirax

div-css-模板
在線預覽 下載該模板

83.The theme

div-css-模板
在線預覽 下載該模板

84.Darkside

div-css-模板
在線預覽 下載該模板

85.EarthlingTwo

div-css-模板
在線預覽 下載該模板

86.Green Solutions

div-css-模板
在線預覽 下載該模板

87.Strockes (Registration Required)

div-css-模板
在線預覽 下載該模板

88.RS14

div-css-模板
在線預覽 下載該模板

89.Internet Encyclopedia

div-css-模板
在線預覽 下載該模板

90. TRIAL IMPACT

div-css-模板
在線預覽 下載該模板

91.The Radio Station

div-css-模板
在線預覽 下載該模板

92. Ideea Hosting

div-css-模板
在線預覽 下載該模板

93.Simplify

div-css-模板
在線預覽 下載該模板

94.Design Style

div-css-模板
在線預覽 下載該模板

95.Hot box

div-css-模板
在線預覽 下載該模板

96.Medical Clinic

div-css-模板
在線預覽 下載該模板

97.Imagination

div-css-模板
在線預覽 下載該模板

98.Safe As Houses

div-css-模板
在線預覽 下載該模板

99.Free Admin Template

div-css-模板
在線預覽 下載該模板

===============================================================

原載: 彬Go ——集前端開發/網頁設計/網站可用性/用戶體驗於一體的趣味互聯網生活
本文鏈接: http://blog.bingo929.com/99-high-quality-free-xhtml -css-div-templates.html

你需要了解的21個CSS驚人技巧

8 十一月

1. CSS跨瀏覽器幻燈片

跨瀏覽器CSS幻燈片
點擊上圖查看清晰原圖
演示瞭如何僅適用CSS打造一個跨瀏覽器的圖片畫廊

2. 基於CSS的圖片地圖

CSS-圖片地圖
這個教程演示瞭如何使用純CSS創建一個”瘋狂”的圖片地圖。

3. 純CSS無JavaScript的LightBox

純CSS無JavaScript的LightBox
點擊上圖查看清晰原圖

4. CSS圖片替換技術製作的按鈕

CSS圖片替換技術製作的按鈕
使用CSS將表單提交按鈕替換為圖片,如果禁用CSS將變回普通按鈕。

5. 用CSS實現動畫導航菜單

CSS-導航菜單-動畫

6. 用CSS創建類似樹形導航菜單

CSS-樹形導航

7. CSS漸變文字效果

CSS漸變文字效果

8. CSS目錄菜單設計

CSS-目錄菜單
點擊上圖查看清晰原圖
很容易理解的關於使用CSS border屬性或CSS背景圖屬性實現目錄菜單的教程。

9. 使用CSS負margin創建自適應佈局

CSS負margin創建自適應佈局

10. 使用CSS固定你的頁腳

CSS-固定-頁腳
點擊上圖查看清晰原圖
你也許會遇到這種情況:當你為每個頁面設置相同的頁腳後,有些頁面的主題內容量很少,使得頁腳自動向上移動,看上去的瀏覽器下面很空。這個教程將教你如何使用CSS固定頁腳在頁面底部來解決這個頭疼的問題。

11. 簡單、靈活的CSS麵包屑導航

CSS-麵包屑-導航

12. 為你的博客創建時髦的引用(Pullquotes)

pullquotes-css

13. CSS實現的柱狀圖表

CSS-圖表

14. 如何為鏈接列表創建塊級懸停效果

CSS-技巧

15. CSS多列列表

CSS多列列表

16. 用CSS Sprites技術實現日期顯示

用CSS Sprites技術實現日期顯示

17. 使用CSS美化你的日期和評論

CSS

18. 使用CSS創建圖片瀏覽器

CSS-圖片瀏覽器
點擊上圖查看清晰原圖

19. 創建CSS圖片預載

無需JavaScript,僅使用CSS背景圖屬性實現圖片的預載。

20. 從頁面底部淡出效果

CSS-淡出
點擊上圖查看清晰原圖

21. 創意且很酷的CSS邊框屬性

CSS-Border-屬性

 

 

=======================================================

原載: 彬Go ——集前端開發/網頁設計/網站可用性/用戶體驗於一體的趣味互聯網生活
本文鏈接: http://blog.bingo929.com/21-amazing-css-techniques-you -should-know.html

 

 

 

 

HTML5和CSS3工具資源匯總

8 十一月

HTML5 & CSS3 準備就緒

CSS3
該網站通過扇形圖表的形式展現了從08年到10年以來各大瀏覽器對HTML5和CSS3的支持情況。發展勢頭還是很可觀的。

HTML5安全手冊

HTML5

CSS3按鈕生成器

HTML5資源
所見即所得的為你生成CSS3按鈕,你僅需通過基本的鼠標點擊便可生成令人滿意的CSS3按鈕,點擊生成好的按鈕即可查看相應的CSS3代碼。

When can I use…(HTML5 & CSS3 瀏覽器兼容性)

HTML5工具
很詳細的關於HTML5, CSS3, SVG等技術的瀏覽器兼容性列表。

CSS3顏色值/名稱速查手冊

HTML5+CSS3
CSS3顏色值查詢手冊,包括顏色英文名、16進制值、rgb百分比、rgb整數值、顏色縮寫和顏色效果等…

CSS3生成器

HTML5
在線測試CSS3新特性,即時生成效果。

Modernizr

CSS3

當前瀏覽器對HTML5支持情況測試

HTML5資源
該工具可以幫助你測試當前你使用的瀏覽器對HTML5的兼容情況,很詳細,很有用!

CSS 邊框半徑(代碼生成器)

HTML5工具
通過輸入數值即可生成CSS3代碼的CSS 邊框代碼生成器。使用很簡便。

FindMeByIP(HTML5 & CSS3 瀏覽器兼容性手冊)

HTML5+CSS3
很詳細的HTML5和CSS3瀏覽器兼容性手冊。

CSS3漸變生成器

HTML5

CSS3 Watch

CSS3

前端開發工具&資源小集合

HTML5資源

CSS3, please!(實時體驗CSS3代碼)

HTML5工具

font dragr

HTML5+CSS3

CSS3生成器

HTML5

CSS桌面

CSS3
CSS桌面可以讓你在線練習CSS3代碼,並實時將渲染效果呈現在右側,很棒的CSS3在線練習工具。

HTML5修訂版本跟踪器

HTML5資源

font-face 生成器

HTML5工具

CSS3 選擇器測試工具

HTML5+CSS3

IE 打印保險器

HTML5

詳細CSS 瀏覽器支持情況列表

CSS3

=======================================================

原載: 彬Go ——集前端開發/網頁設計/網站可用性/用戶體驗於一體的趣味互聯網生活
本文鏈接: http://blog.bingo929.com/html5-and-css3-tools-list .html

用CSS3製作50個超棒動畫效果教程

8 十一月

1. CSS3實現鐘錶效果(基於jQuery)

使用CSS3的基本變形特性:rotate,並結合了jQuery這類javaScript框架製作的CSS3時鐘效果。
表-jQuery-css3

2. 模擬時鐘

模擬時鐘基於過渡webkit和CSS3變形,javascript用於將其按當前時間轉動。
時鐘效果-css3

3. 可使用箭頭鍵旋轉的3D立方體

你可以使用上、下、左、右方向鍵控制這個3D立方體,它是基於webkit-perspective, -webkit-transform 和-webkit-transition 創建。
css3-3D立方體

4. 多種3D立方體(淡入淡出)

多種3D立方體使用CSS3和它的屬性’transform’ 和’transition’ ,我個人覺得效果很震撼,你能看到寫在3D立方體上的透視感極強的文字。
多種3D立方體(淡入淡出)

5. CSS3手風琴效果

使用CSS3實現的手風琴菜單效果,基於webkit瀏覽器專有屬性。
CSS3手風琴效果

6. 自動滾動視差效果

自動滾動視差效果使用WebKit的CSS transition 屬性。該效果無需JavaScript。
自動滾動視差效果

7. Isocube

Isocube有些類似於3D立方體,但也有不同之處,它可以讓他片貼在立方體面。
CSS3實例

8. CSS3圖片集

9. CSS3 Matrix(黑客帝國效果)

黑客帝國是最棒的科幻小說改編電影之一,現在使用純CSS就能實現電影中的矩陣效果。
CSS3 Matrix(黑客帝國效果)

10. 7種CSS3結合javascript技術的特效

7種CSS3結合javascript技術的特效實例. 所包含的效果有淡入淡出, 震動, 輕移, 擴大, 跳動, 旋轉和手風琴效果。
7種CSS3結合javascript技術的特效

11. 各種鼠標懸停圖片特效

六個由CSS3替代JavaScript而實現的鼠標懸停圖片效果,CSS3實現這種懸停效果依然很炫!
各種鼠標懸停圖片特效

12. 旋轉的可口可樂易拉罐(使用滾動條控制)

CSS3實例

13. 3D 《宮女》

CSS3實例

14. 寶利來畫廊

寶利來畫廊是由CSS3技術實現的將一些照片堆在一起,有趣的是鼠標懸停照片是,照片會旋轉並緩慢放大~
CSS3教程

15. 太空

CSS3實例

16. Mac Dock

CSS3模擬的mac操作系統菜單…
CSS3實例

17. Drop-In Modals

CSS3實例

18. 滑動的唱片

該效果使用了CSS3過渡和些許HTML,在它上面放一個唱片專輯會看上去更生動。
CSS3實例

19. CSS3 Zooming Polaroids

該效果會將一個照片列表按順序排列,並把它們按不同的角度旋轉,使用了CSS2和CSS3技術,無JavaScript。它從圖片的alt屬性中讀取出照片描述並放到了照片的下方。
CSS3 Zooming Polaroids

20. CSS3火箭動畫

CSS3 火箭動畫

21. Poster Circle

CSS3實例

22. 變形的立方體

CSS3實例

23. 動畫版寶麗來畫廊

CSS3實例

24. 聚光燈下的投影效果

CSS3實例

25. 色彩鮮豔的時鐘

CSS3實例

26. Lightbox Gallery

CSS3實例

27. 彈性縮略圖菜單

彈性縮略圖菜單

28. Coverflow

CSS3實例

29. jQuery DJ Hero

jQuery DJ Hero

30. Dynamic Stacking Cards

CSS3實例

31. 另一個CSS3圖片畫廊效果

32. 雪堆(使用方向鍵控制)

CSS3實例

33. CSS3動畫版價格欄

CSS3動畫版價格欄

34. 平滑jQuery+CSS3菜單

平滑jQuery+CSS3菜單

35. CSS標籤(無JavaScript)

CSS標籤(無JavaScript)

36. CSS標籤菜單(無JavaScript)

CSS標籤菜單(無JavaScript)

37. SVG+CSS3魚眼菜單

VG+CSS3魚眼菜單

38. CSS3落葉效果

CSS3落葉效果

39. CSS3旋轉圖集效果

CSS3旋轉圖集效果

40. CSS3下拉菜單

CSS3下拉菜單

41. 星球大戰風格爬行文字(純HTML+CSS)

星球大戰風格爬行文字(純HTML+CSS)

42. CSS3即時貼

CSS3即時貼

43. css3雪花

css3雪花

44. 又一個魚眼效果

CSS3實例

45. CSS3逐幀動畫

第一個CSS3逐幀動畫實例需要你持續使用鼠標點擊圖片,當播放到最後一幀時它會自動播放第一幀,如此循環,但第一個實例只能在FireFox和Opera下實現。第二個Css3逐幀動畫實例需要你使用鼠標在圖片上移動,依舊是mousemove這個動作,只要鼠標在移動圖片動畫就會持續播放,但動畫的播放速度是與你的鼠標移動速度有關的,該實例支持Safari, Google Chrome, IE8, Firefox 和Opera。
CSS3逐幀動畫

46. ​​全地域裝甲載具

CSS3實例

47. 又一個CSS3手風琴效果

又一個CSS3手風琴效果

48. 無Flash版動態展示

CSS3實例

49. 平滑菜單欄

平滑菜單欄

50. loading旋轉效果

loading旋轉效果

=======================================================

原載: 彬Go ——集前端開發/網頁設計/網站可用性/用戶體驗於一體的趣味互聯網生活
本文鏈接: http://blog.bingo929.com/50-awesome-css3-animations.html

43個實例xHTML+CSS(DIV+CSS)網頁及導航佈局教程

8 十一月

1. 將PSD源文件轉換XHTML教程

DIV+CSS教程

2. 教你如何創建水平滾動網站佈局

xHTML+CSS教程

3. 從PSD到xHTML,按部就班教你創建DIV+CSS佈局

DIV+CSS實例教程

4. 從零開始創建CSS佈局

xHTML+CSS實例

5. 從零開始教您創建一個華麗高檔的網頁-xHTML+CSS教程

感興趣的話也可以看看這個實例的設計教程,已譯成中文網頁設計教程:使用Photoshop設計一個高檔時尚的網頁

DIV-CSS

6.4個簡單的教程教你將PSD製作成CSS HTML

DIV+CSS教程

7.使用Drupal創建Killer樂隊網站:6篇系列教程

這是個非常棒的關於使用Illustrator製作頁面,Drupal(世界最著名的CMS系統之一)編碼,符合標準的xHTML+CSS

完整教程索引: 第一部分:使用Illustrator設計頁面第二部分:使用Illustrator切圖第三部分:寫xHTML 第四部分:Drupal主題模板第五部分:Drupal管理第六部分:總結和一些附加資源

xHTML+CSS教程

8.教你如何使用CSS創建性感的按鈕

DIV+CSS實例教程

9.很酷的水平菜單懸停變大效果

xHTML+CSS實例

10.CSS模板教程

DIV-CSS

11.控製文本漸變效果CSS教程

DIV+CSS教程

12.CSS超大背景教程

xHTML+CSS教程

13.將PSD效果圖轉換成HTML

DIV+CSS實例教程

14. PSD切圖和頁面的實現

xHTML+CSS實例

15. 模糊背景效果

DIV-CSS

16. 使用CSS Sprites(將圖片集合在一張圖片中)技術教程

DIV+CSS教程

17. 手繪風格CSS導航按鈕

xHTML+CSS教程

18.創建類似Crazy Egg價格列表效果的表格列高亮效果

DIV+CSS實例教程

19.CSS菜單教程

xHTML+CSS實例

20. Photoshop教程+切片+CSS編碼

這個教程將教你使用Photoshop製作簡潔的縱向菜單。

DIV-CSS

21. 為網頁模版切片並用CSS編碼

DIV+CSS教程

22. 為你的第一個PSD網頁效果圖編碼教程

xHTML+CSS教程

23. 使用簡單的操作完成複雜的CSS佈局實例

DIV+CSS實例教程

24. 使用CSS來讓你的頁腳固定

xHTML+CSS實例

25. 教你如何將PSD轉換成xHTML-視頻教程

DIV-CSS

26.高級CSS導航實例教程

DIV+CSS教程

27. 教程:為你的DIV+CSS佈局編碼

xHTML+CSS教程

28. 教你如何為網頁變換樣式

DIV+CSS實例教程

29. 浮動教程

xHTML+CSS實例

30. CSS切片教程:選擇正確的佈局

DIV-CSS

31. 使用Prototype和Scriptaculous創建簡單、智能的手風琴效果

DIV+CSS教程

32. CSS Sprites +圓角

xHTML+CSS教程

33. 簡單3步製作圓角佈局

DIV+CSS實例教程

34. CSS樣式教程

xHTML+CSS實例

35. 轉換Photoshop效果圖

DIV-CSS

36. 製作CSS縱向菜單

DIV+CSS教程

37. 使用CSS固定頁腳背景圖

xHTML+CSS教程

38. 一個簡單的散列佈局啟蒙教程

DIV+CSS實例教程

39. 兩列佈局CSS教程

xHTML+CSS實例

40. CSS佈局技巧:完成100%高度

DIV-CSS

41. 附帶一個’behavior’文件的縱向CSS菜單

DIV+CSS教程

42. 光滑的設計,HTML實例

xHTML+CSS教程

43. DIV+CSS佈局教程

DIV+CSS實例教程

==============================================

轉至翻譯原文: 43個實例xHTML+CSS(DIV+CSS)網頁及導航佈局教程 (暴風彬彬)