Flex Builder官方更式命名了，並且推出Beta新版，稱為Flash Builder 4
(全球社群熱烈的討論下，為了讓更多熟悉與不熟悉Adobe產品的人，更快看到名字就知道產品用意，因此，Flex Builder催促成Flash Builder為更貼近人心之命名)
註：Flex SDK仍保留原來Flex名稱，只有更名Flex Builder為Flash Builder。
Flash Builder 4.0版重點：
Flex 2~3版間做的功能己夠商用化，但好的產品還是要不斷更好才行，這次Adobe卯足18個月的努力，將此版本重心放在三個，如：
設計者與程序員間更緊密的工作流程
以資料開發為中心
提供更好的開發環境與測試環境
設計者與程序員間更緊密的工作流程：
在專桉開始時，最需要設計者的創意靈感，而最終產品是否幾乎逼近原設計者的想法，其實不一定盡然，加上，設計人員常與開發人員間的溝通，是否有效？是否更可縮短時間，將畫面與動線完全百分百表達給開發者明白？這也是常發生鴻溝與默契之事，當然，團隊間的合作內容，是否真讓客戶滿意？這也是說與做間的結果論。
所以在新版的Flash Builder 4加了"New Flash Component"與"New Flash Container"，以符合更佳的開發流程，你可以在原先的Flash開發環境上建立或編輯內容，按下"done"後，透過Fla與SWC檔就可以就直接回到Flash Builder 4專桉裡繼續編輯。
而在Flash Catalyst裡，你可以利用不管是Photoshop或Illustrator，把編輯好的圖形匯入到Flash Catalyst中，Flash Catalyst主要是讓你將圖形轉換更佳的RIA介面，提供給Flash Builder使用，程式員匯入Flash Catalyst的專桉檔後，就清楚知道介面與動線的來龍去脈，他只需要再去做好程式資料邏輯的動作，有任何問題也可以來回編修，構成更好的協同合作。
以資料開發為中心：
在開發RIA系統中，不管多麼包羅萬象的設計，但資料還是為最基礎元素，不管你是用數位儀表板，或是Mash-up(溷搭)的介面呈現，亦或改變了原先前端設計，保留住既有的後端程式(php,asp.net,coldfusion...等)與資料端，甚至是只利用Webservice等服務媒介，伺服器或其細節設定或許會改變，但基本的「資料」仍在，你必須要更容易的去連結你需要的後端服務，並且綁定到你的Flex元件，這就是新版Flash Builder 4功能上要讓你輕鬆達成，加速你在開髮結合動態資料上的體驗，讓困難變成簡單。
也因此新版重點就在：
定義資料/服務模組
綁定服務操作到Flex元件
更能輕鬆完成資料操作功能，如：頁面顯示、進階的資料管理
將資料或服務模組在綁定模式下更加簡便：
你可能有許多的ColdFusion元件、PHP類別、Java或Webservice等既有的後端程式邏輯，不管如何，你要將資料與服務呈現在你的Flex前端，這之間的綁定就必須更加容易，這代表了，你後端不管用多複雜的技術，通通殊途同歸，化為單一的模組，將後端的操作綁定在單一的Flex元件上，如：DataGrid或List，這操作只要用滑鼠拖曳到Flex元件上就可以完成。這樣的操作，你可以很快做出主要與細項列表，或是圖表等。
更進階的資料管理功能：
這樣的Flex元件綁定概念，就是讓你的Flex前端管理後端的資料內容，根據實際需要才去做資料的讀取、變更，甚至是回復上一個動作，請放心，這版本當然有自動的CRUD(也就是自動建立、讀取、更新、刪除資料的功能)，這些通常在手工上的編程都是很費時間。
也因此，你可以快速創造出更好的前台操作體驗，並在HTML裡執行。
提供更好的程式開發環境與測試環境：
這重點擺在改善前版在重構程式、偵錯模式、剖析器上的功能。
偵錯模式上加了條件式的停頓點、觀偵點、逐行執行以及表現式上的使用。
剖析器現在也改善了"元件參考"報告。
在程式碼的搬移上也新增了重構功能。(這也就是說，你可以指定要搬移的程式碼，全部有的程式檔都照著搬移好)
對於新版IDE(快速開發環境)上，你可以去嘗試以下幾個功能：
getter/setter一般性操作
事件程式碼上的操作
新版的Package瀏覽器
ASDoc也開始支援了Tooltips(工具使用提示)
對於MXML、ActionScript及CSS檔的自訂樣版，在此版也支援。
新版對於「測試」功能的改善
對於編程上的生產力，Flash Builder 4 beta也加了二個重要的測試系統功能，也就是"Network monitor"及"Flex Unit"
Network monitor可以讓你從Flash Builder上看出Flash前端與你後端伺服器上的網路擁塞狀況，這也是讓你清楚看出資料在某一點是有大量的停滯瓶頸，好讓你針對某點去改善其效能，驗出更好的系統表現。(這情況也可以分辨出是前台還是伺服端出了問題)
Flex Unit就是在做單位測試，這對要開發的系統來說是很重要的一環，Flash builder整合了Flex Unit，好讓你測試內容是從安裝到檔桉建立、程式運行、執行結果等分析。
命令列的建立系統與佈署
系統開發完成後，你可以藉由IDE提供的功能去創建與佈署系統，但你也可以從命令列下來執行，使更符合你要的程式結果。(此在Flex Builder3就有了，筆者尚未測試細節不同處)
以上為大致Flash Builder 4 Beta最新功能概況，亦有參考Tim Buntel文章：http://www.adobe.com/devnet/flex/art..._whatsnew.html
內容相似度大約85%，請要轉貼的朋友，註明來源為RiS社群 http://forum.j2eemx.com
迫不及待要下載Flash Builder 4.0 Beta了嗎？
請至：這裡下載...
註：參加6/20以後Flex課程的朋友，您將會開始看到課程中介紹Flash Builder精彩範例。
相關學習資源：
Flash Builder 4最新影片教學
http://labs.adobe.com/technologies/flash/videos/
Flex 4線上輔助文件
http://livedocs.adobe.com/flex/gumbo...f3b6-8000.html
Flex 4線上教學範例
http://livedocs.adobe.com/flex/gumbo...c9c9-8000.html
Flex 3系統移植到Flex 4
http://livedocs.adobe.com/flex/gumbo...dmigration.pdf
Flash Builder 4 FAQ
http://labs.adobe.com/technologies/f...ID=details#FAQ.
更多的Flash Builder 4範例教學
http://labs.adobe.com/technologies/f...er4/tutorials/
Flex 4 Beta線上ASDoc文件
http://livedocs.adobe.com/flex/gumbo/langref/
Flex 4 SDK Beta介紹
http://www.adobe.com/devnet/flex/art..._whatsnew.html
Flex 4 SDK下載
http://www.adobe.com/go/flex4sdk_download
原文：點這裡...
文章提供 BAYSTARS DESIGN網頁設計公司
2009年6月4日 星期四
開發Web應用程序的結構化過程
開發web應用程序是一件非常辛苦的事情，你需要花大把大把的時間來做無數的事情。假如你不運用有條理的方法，尤其是在複雜的項目中，你會承受忽視項目，不能按時完成，浪費時間一無所獲的風險。
這篇文章中，結構化過程的插圖可以幫助你運用簡化的方法更加節省時間更加有效的建立你的web開發程序。
下載 Woork Papers N1幻燈片 你需要知道的開發Web應用程序的結構化過程
工序的主要階段
一般的web應用程序開發流程分為五個主要的階段：
1、明確需求
2、設計
3、執行
4、測試
5、發行
規劃與跟蹤監測是一個「跨階段」的跟隨開發發展的過程，定義一個在項目執行期間你需要跟蹤監測的項目計劃活動名單，並且每項活動需要定義一套行之有效的信息報告來進行跟蹤監測，例如：
- 擁有者
- 持續的時間
- 所耗
- …
看一看這些前一段我所寫的文章，怎樣使用Excel或者Google製表軟件設計製作項目實施計劃：
How to organize a project plan 怎樣組織項目規劃
Excel Gantt chart template Excel圖表設計繪製模板
Implement a project plan and manage activities with Google Spreadsheets 使用google電子錶格實施並靈活管理項目規劃
1. 需求定義
在這第一階段你必須確定範圍和Web應用程序的需求，在你的應用程序中必須做的，主要特點和技術要求：
範圍
為了確定Web應用程序的範圍,足以編製一份明確說明適用功能的詳細清單。目前重要的不是「如何」實現他們，而是「什麼」需要實現！
需求
需求分析需求分析是一個開發過程的關鍵組成部分。在這一步中你需要估計潛在流量，選擇一個服務器端語言（ PHP， ASP， Coldfusion …),數據庫，選擇一個托管服務…這裡需要非常注意不要高估 /低估預期！準確的平衡的預估時間，成本和目標之間每件事情！
2. 設計
在需求定義階段，你需要明確的規劃「設計」你的應用。在這個階段，可以按照以下步驟：
設計：應用圖
應用圖包含對應用有意義的和必要的結構信息：頁面（用區塊表示）和他們之間的主要關聯。你的應用圖可以像這樣：
通過這種方式，您擁有了有關一些「位置」 （頁）和「路徑」 （關係頁）的圖，您可以非常容易的遵循它，逐頁，以執行應用程序的下一階段。運用這種方式，可以節省大量的時間，並明確什麼是你需要執行的。
設計：數據庫
Ok,現在到了設計數據庫的時候了。一個簡單的實現方法是使用實體關係（ER）模型 。一般來說，你可以俺咋好下面的順序：定義第一個表確定第一個表，而不是屬性和關係的表格。您的ER模型將是這樣的：
1:1表示集的關係（在這種情況下，例如1用戶只能分派1的任務， 1個用戶只生活在一個城市） 。欲瞭解更多有關這一主題的內容，來看看我的舊文章：
Define the entities-relationships model 定義實體關係模型
A correct approach to define relationships between database tables 正確對待，以定義數據庫表格關係
10 Useful articles about Database design 十篇有用的數據庫設計文章
設計：頁面結構
下一步工作是設計大體的頁面結構，用名稱命名確定所有的主要部分 (例如 #header, #navbar, #mainContent, #sidebar).
設計：服務端語言
使用面向對象的開發方法進行開發，你可以定義類，函數和所有你所需要的，記住… 那不是「執行」只是下一階段實施的「指南」.
設計：JS 框架
這一步選擇JavaScript 框架(jQuery, Scriptaculous, MooTools…), 通過確定主要的特點和所需實施的效果（拖放，動畫效果… ）編製簡單的關於在一個或多個網頁中有關聯的每一個具體功能應用圖的列表。
次點設計階段已完成。讓我們實施吧！
3. 實施
Ok.. 現在是真正的挑戰的開始，因為「執行」才是實現應用。您可以劃分這一階段為以下幾個步驟:
執行：數據庫
創建一個新數據庫，寫SQL代碼定義表，屬性和關係。看看下面的，過去我致力於一些有關此主題的文章的鏈接，以獲取更多信息：
How to use PHP and SQL to create DB tables and relationships 怎樣使用PHP創建DB表和關係
Create tables and relationships with SQL 使用SQL創建表和關係
執行：HTML
使用在設計階段定義的頁面結構實施 HTML 代碼：
程序代碼
此時添加所有在設計階段定義的所需要的HTML元素。例如，如果mainContent部分包含一個標題，文字和文章的標籤後，添加這些內容：
This is the moment to add all HTML elements you need in sections identified during Design phase. For example if the sections mainContent contains a post with a title, a text body and post tags, add these elements:
程序代碼
實施：CSS
當主體結構已經準備就緒，開始編寫CSS代碼添加樣式。如果您需要一些如何撰寫更好的CSS代碼建議，請看看這些文章：
CSS coding: semantic approach in naming convention CSS編碼：語義的方法命名慣例
Useful guidelines to improve CSS coding and maintainability 有益的改善的CSS編碼和可維護性的指南
實施：服務器端語言
實施應用類，應用功能,DB互動，查詢，以及一切需要服務器端的實現的交互。
實施：JavaScript
使用在設計階段選擇的框架（ jQuery ， Scriptaculous ， MooTools …)來實施Ajax的功能（拖放，動畫效果… ）
4. 測試
在這一階段需要「強調」的是。你的應用程序能在各種條件下執行（例如使用不同的瀏覽器） 。您的目標是在最後釋放前檢測和修復所有的應用程序錯誤。
請記住，這一過程需要有條理，需要極大的耐心！試驗的每個頁面和每個功能（在這種情況下還可以幫助理順應用圖） 。如果您測試過程中發現一個bug ，修復它修改代碼並繼續進行最後的代碼審核（一個不可告人的測試）。
5. 發佈
最後你準備好發佈了！在測試文件夾中發佈並做最後的測試，假如一切都OK的話，那就進行最後的發佈吧。
在Scribd上，閱讀與下載此篇文章
下載 Woork Papers N1幻燈片 你需要知道的開發Web應用程序的結構化過程
英文原文：Structured process you must know to develop a web application
文章提供 BAYSTARS DESIGN網頁設計公司
這篇文章中，結構化過程的插圖可以幫助你運用簡化的方法更加節省時間更加有效的建立你的web開發程序。
下載 Woork Papers N1幻燈片 你需要知道的開發Web應用程序的結構化過程
工序的主要階段
一般的web應用程序開發流程分為五個主要的階段：
1、明確需求
2、設計
3、執行
4、測試
5、發行
規劃與跟蹤監測是一個「跨階段」的跟隨開發發展的過程，定義一個在項目執行期間你需要跟蹤監測的項目計劃活動名單，並且每項活動需要定義一套行之有效的信息報告來進行跟蹤監測，例如：
- 擁有者
- 持續的時間
- 所耗
- …
看一看這些前一段我所寫的文章，怎樣使用Excel或者Google製表軟件設計製作項目實施計劃：
How to organize a project plan 怎樣組織項目規劃
Excel Gantt chart template Excel圖表設計繪製模板
Implement a project plan and manage activities with Google Spreadsheets 使用google電子錶格實施並靈活管理項目規劃
1. 需求定義
在這第一階段你必須確定範圍和Web應用程序的需求，在你的應用程序中必須做的，主要特點和技術要求：
範圍
為了確定Web應用程序的範圍,足以編製一份明確說明適用功能的詳細清單。目前重要的不是「如何」實現他們，而是「什麼」需要實現！
需求
需求分析需求分析是一個開發過程的關鍵組成部分。在這一步中你需要估計潛在流量，選擇一個服務器端語言（ PHP， ASP， Coldfusion …),數據庫，選擇一個托管服務…這裡需要非常注意不要高估 /低估預期！準確的平衡的預估時間，成本和目標之間每件事情！
2. 設計
在需求定義階段，你需要明確的規劃「設計」你的應用。在這個階段，可以按照以下步驟：
設計：應用圖
應用圖包含對應用有意義的和必要的結構信息：頁面（用區塊表示）和他們之間的主要關聯。你的應用圖可以像這樣：
通過這種方式，您擁有了有關一些「位置」 （頁）和「路徑」 （關係頁）的圖，您可以非常容易的遵循它，逐頁，以執行應用程序的下一階段。運用這種方式，可以節省大量的時間，並明確什麼是你需要執行的。
設計：數據庫
Ok,現在到了設計數據庫的時候了。一個簡單的實現方法是使用實體關係（ER）模型 。一般來說，你可以俺咋好下面的順序：定義第一個表確定第一個表，而不是屬性和關係的表格。您的ER模型將是這樣的：
1:1表示集的關係（在這種情況下，例如1用戶只能分派1的任務， 1個用戶只生活在一個城市） 。欲瞭解更多有關這一主題的內容，來看看我的舊文章：
Define the entities-relationships model 定義實體關係模型
A correct approach to define relationships between database tables 正確對待，以定義數據庫表格關係
10 Useful articles about Database design 十篇有用的數據庫設計文章
設計：頁面結構
下一步工作是設計大體的頁面結構，用名稱命名確定所有的主要部分 (例如 #header, #navbar, #mainContent, #sidebar).
設計：服務端語言
使用面向對象的開發方法進行開發，你可以定義類，函數和所有你所需要的，記住… 那不是「執行」只是下一階段實施的「指南」.
設計：JS 框架
這一步選擇JavaScript 框架(jQuery, Scriptaculous, MooTools…), 通過確定主要的特點和所需實施的效果（拖放，動畫效果… ）編製簡單的關於在一個或多個網頁中有關聯的每一個具體功能應用圖的列表。
次點設計階段已完成。讓我們實施吧！
3. 實施
Ok.. 現在是真正的挑戰的開始，因為「執行」才是實現應用。您可以劃分這一階段為以下幾個步驟:
執行：數據庫
創建一個新數據庫，寫SQL代碼定義表，屬性和關係。看看下面的，過去我致力於一些有關此主題的文章的鏈接，以獲取更多信息：
How to use PHP and SQL to create DB tables and relationships 怎樣使用PHP創建DB表和關係
Create tables and relationships with SQL 使用SQL創建表和關係
執行：HTML
使用在設計階段定義的頁面結構實施 HTML 代碼：
程序代碼
此時添加所有在設計階段定義的所需要的HTML元素。例如，如果mainContent部分包含一個標題，文字和文章的標籤後，添加這些內容：
This is the moment to add all HTML elements you need in sections identified during Design phase. For example if the sections mainContent contains a post with a title, a text body and post tags, add these elements:
程序代碼
實施：CSS
當主體結構已經準備就緒，開始編寫CSS代碼添加樣式。如果您需要一些如何撰寫更好的CSS代碼建議，請看看這些文章：
CSS coding: semantic approach in naming convention CSS編碼：語義的方法命名慣例
Useful guidelines to improve CSS coding and maintainability 有益的改善的CSS編碼和可維護性的指南
實施：服務器端語言
實施應用類，應用功能,DB互動，查詢，以及一切需要服務器端的實現的交互。
實施：JavaScript
使用在設計階段選擇的框架（ jQuery ， Scriptaculous ， MooTools …)來實施Ajax的功能（拖放，動畫效果… ）
4. 測試
在這一階段需要「強調」的是。你的應用程序能在各種條件下執行（例如使用不同的瀏覽器） 。您的目標是在最後釋放前檢測和修復所有的應用程序錯誤。
請記住，這一過程需要有條理，需要極大的耐心！試驗的每個頁面和每個功能（在這種情況下還可以幫助理順應用圖） 。如果您測試過程中發現一個bug ，修復它修改代碼並繼續進行最後的代碼審核（一個不可告人的測試）。
5. 發佈
最後你準備好發佈了！在測試文件夾中發佈並做最後的測試，假如一切都OK的話，那就進行最後的發佈吧。
在Scribd上，閱讀與下載此篇文章
下載 Woork Papers N1幻燈片 你需要知道的開發Web應用程序的結構化過程
英文原文：Structured process you must know to develop a web application
文章提供 BAYSTARS DESIGN網頁設計公司
表格外觀的無序列表
參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系統：Windows 特別提示：這不是表格的模擬。表格無論在語義、結構，還是在效果實現上，都是無法替代的。本文只針對無序列表在外觀方面的一個特殊需求。別看有的東東長得個表格樣，其實是披著表格皮的無序列表，為了偉大的語義，我們需要用css實現表格外觀的無序列表。個人喜好，這裡採用border和negative margin來實現，非常簡單：
HTML代碼
表格外觀的無序列表 - 原始狀態
像一個表格吧？ ^-^
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]這是一個最簡單的模型，然而，實戰總是殘酷的：1、寬度如何自適應分辨率？ 2、單元格內容過多、形成換行如何處理？ 3、最糾結的問題：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…問題1：寬度如何自適應分辨率？這個問題也許有人說沒必要，但是在模塊化設計時，幾乎任何部件都被要求設置為寬度自適應模式的。解決1：參考完美的firefox3和ie8百分比寬度處理方案，給剩餘的寬度分配給某個「列」，就行了 ^-^記得二列等高的笨辦法嗎？——用背景圖片模擬。問題2：單元格內容過多、形成換行如何處理？解決2：隱藏吧，它已經沒有存在的價值了！（ - -! 其實是我想不出別的辦法來了）但為了體驗好一點，我加上了text-overflow。這個，FF暫時不支持……aoao有好的解決辦法，其他點的解決辦法。
HTML代碼
表格外觀的無序列表 - 過剩文字的處理
實際應用的時候，通過對單元文字長度範圍的預測、應用區域寬度的結合考慮，可通過調整列數來達到我們想要的效果。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]問題3：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…看這個Demo，其實我覺得這個樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。
HTML代碼
表格外觀的無序列表 - 5×4的表格，如果只有17條數據怎麼辦？
其實我覺得這個樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]解決3：首先讓我們製造出我們想要的表格（很遺憾，製造了很多空標籤，暫時沒有找到更合適的純CSS解決方案，歡迎大家多多指點）。
HTML代碼
表格外觀的無序列表 - 讓我們製造出我們想要的表格
很遺憾，製造了很多空標籤，暫時沒有找到更合適的純CSS解決方案，歡迎大家多多指點。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]然後用position:relative實現css移魂大法：
HTML代碼
表格外觀的無序列表 - 用position:relative實現css移魂大法
HTML代碼
表格外觀的無序列表 - 原始狀態
像一個表格吧？ ^-^
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]這是一個最簡單的模型，然而，實戰總是殘酷的：1、寬度如何自適應分辨率？ 2、單元格內容過多、形成換行如何處理？ 3、最糾結的問題：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…問題1：寬度如何自適應分辨率？這個問題也許有人說沒必要，但是在模塊化設計時，幾乎任何部件都被要求設置為寬度自適應模式的。解決1：參考完美的firefox3和ie8百分比寬度處理方案，給剩餘的寬度分配給某個「列」，就行了 ^-^記得二列等高的笨辦法嗎？——用背景圖片模擬。問題2：單元格內容過多、形成換行如何處理？解決2：隱藏吧，它已經沒有存在的價值了！（ - -! 其實是我想不出別的辦法來了）但為了體驗好一點，我加上了text-overflow。這個，FF暫時不支持……aoao有好的解決辦法，其他點的解決辦法。
HTML代碼
表格外觀的無序列表 - 過剩文字的處理
- Prison Break / 越獄
- Gossip Girl / 八卦天後
- Friends / 老友記 / 六人行
- Heroes / 超能英雄
- Desperate Housewives / 絕望的主婦
- Sex and the City / 慾望都市
- Prison Break: Proof of Innocence / 越獄 第二季
- Lost / 迷失
- Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖
- Lie to Me / 千謊百計
- The Big Bang Theory / 天才理論傳 / 生活大爆炸
- Growing Pains / 成長的煩惱
- Prison Break (Season 3) / 越獄 第三季
- House M.D. / 怪傑醫生豪斯 / 豪斯醫生
- Ugly Betty / 醜女貝蒂
- Gossip Girl season2 / 八卦天後 第二季
- CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯
- Heroes(Season 2) / 天驕 / 超能英雄
- 24 / 24反恐部隊 / 24小時
- Cashmere Mafia / 女人幫
實際應用的時候，通過對單元文字長度範圍的預測、應用區域寬度的結合考慮，可通過調整列數來達到我們想要的效果。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]問題3：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…看這個Demo，其實我覺得這個樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。
HTML代碼
表格外觀的無序列表 - 5×4的表格，如果只有17條數據怎麼辦？
- Prison Break / 越獄
- Gossip Girl / 八卦天後
- Friends / 老友記 / 六人行
- Heroes / 超能英雄
- Desperate Housewives / 絕望的主婦
- Sex and the City / 慾望都市
- Prison Break: Proof of Innocence / 越獄 第二季
- Lost / 迷失
- Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖
- Lie to Me / 千謊百計
- The Big Bang Theory / 天才理論傳 / 生活大爆炸
- Growing Pains / 成長的煩惱
- Prison Break (Season 3) / 越獄 第三季
- House M.D. / 怪傑醫生豪斯 / 豪斯醫生
- Ugly Betty / 醜女貝蒂
- Gossip Girl season2 / 八卦天後 第二季
- CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯
其實我覺得這個樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]解決3：首先讓我們製造出我們想要的表格（很遺憾，製造了很多空標籤，暫時沒有找到更合適的純CSS解決方案，歡迎大家多多指點）。
HTML代碼
表格外觀的無序列表 - 讓我們製造出我們想要的表格
- Prison Break / 越獄
- Gossip Girl / 八卦天後
- Friends / 老友記 / 六人行
- Heroes / 超能英雄
- Desperate Housewives / 絕望的主婦
- Sex and the City / 慾望都市
- Prison Break: Proof of Innocence / 越獄 第二季
- Lost / 迷失
- Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖
- Lie to Me / 千謊百計
- The Big Bang Theory / 天才理論傳 / 生活大爆炸
- Growing Pains / 成長的煩惱
- Prison Break (Season 3) / 越獄 第三季
- House M.D. / 怪傑醫生豪斯 / 豪斯醫生
- Ugly Betty / 醜女貝蒂
- Gossip Girl season2 / 八卦天後 第二季
- CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯
很遺憾，製造了很多空標籤，暫時沒有找到更合適的純CSS解決方案，歡迎大家多多指點。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]然後用position:relative實現css移魂大法：
HTML代碼
- Prison Break / 越獄
- Gossip Girl / 八卦天後
- Friends / 老友記 / 六人行
- Heroes / 超能英雄
- Desperate Housewives / 絕望的主婦
- Sex and the City / 慾望都市
- Prison Break: Proof of Innocence / 越獄 第二季
- Lost / 迷失
- Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖
- Lie to Me / 千謊百計
- The Big Bang Theory / 天才理論傳 / 生活大爆炸
- Growing Pains / 成長的煩惱
- Prison Break (Season 3) / 越獄 第三季
- House M.D. / 怪傑醫生豪斯 / 豪斯醫生
- Ugly Betty / 醜女貝蒂
- Gossip Girl season2 / 八卦天後 第二季
- CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯