英文版 CS4 已經上市，中文版也將於12月登台，Fireworks 大進化的功能之一，就是能將設計稿直接匯出，變成使用 div+CSS 架構的標準 html 文件檔案！你的設計稿可以是 psd，也可以是 png，Fireworks CS4 將完整開啟這些檔案並轉換，即使是使用 Photoshop 製作的設計稿！
那麼，實際上該如何設計一份 Fireworks 讀的懂，然後完全按照設計者的想法匯出成為一個 html 文件呢？以下我就自己實際製作的心得整理幾個方向給大家參考。
開始設計
先在腦子裡規劃好網站的基本版型，例如：一般會有放識別 logo 的top 或是 header，側邊欄位的 sidebar，放置主要內容的 content，還有最後版權宣告、聯絡資訊的 footer。然後在 Fireworks 裡面開啟一個圖層資料夾，取名為「div元素」，將上述各區塊，按照版型排列，使用「矩形工具」繪製於版面上。並將每個繪製出來的區塊元素打上名字，請務必以英文命名，因為這些名字在匯出成 html 之後，會成為元素的 id，而這些矩形區塊則是支撐整個網站架構的 div 配置！
設計
在「div元素」資料夾之上，新增所需的圖層資料夾，將你的創意與設計繪製在這些圖層上。當然，已經繪製好的「div元素」也可以改變形狀，除了方正矩形之外，你也能改成具有4邊圓角的矩形，只要在之後使用「分割工具」切圖注意幾個要點即可。這部份待後文介紹。
當需要放置「表單」元素的時候，例如：會員登入欄位、核取方塊等，必須打開「視窗」>「通用元件庫」，找到「HTML」分類，開啟後拖拉使用裡面的元件來製作。Fireworks 將自動識別這類元件，匯出成為具有<form>標籤的表單元素。
另外，html裡面標題元素：<h1>~<h6>等，也能使用「通用元件庫」裡的「標題1」~「標題6」來對應。需要針對上述元件設定詳細屬性，則開啟「視窗」>「元件屬性」來設定。字型、字級、顏色、行高，將會轉成CSS樣式。
分割切圖
這個部份必須注意幾點。首先，我們不需要整個網站切滿分割區域才能匯出，只需要針對元素、屬性製作分割區域即可。例如：要變成背景「圖片」的部份，只需要切一塊小方塊，在「分割屬性」的部份選擇「背景影像」，設定是某重複，或是沿著 x 軸 repeat，這樣 Fireworks 自動會將 CSS 的 background 屬性指向這張小圖片。
另外，文字的部份，除非是具有特殊字型與效果的字體，可以圖片形式匯出之外，其餘會以「電腦字」型態出現的文字，都不需要「分割」！在Fireworks 設定的字體屬性將會自動轉成 CSS。
在「設計」部份，如有使用元件庫製作「表單元件」，也不需要作分割。如上所述，Fireworks 將自動判定，匯出成為具有 form 標籤的表單。
如果需要製作自動依照內文延伸的圓角區塊，切圖的時候必須將區塊分為「上」、「中」、「下」3個部份，並且將「中」區塊的圖片設定為「背景影像」。例如：一個 id 為 sidebar 的圓角矩形，上方左右2個圓角為一張圖片，下方左右則為另一張圖片，中間則另外輸出成背景影像，一個具有圓角的div 區塊就完成了！
匯出
文件完成之後，選擇「檔案」>「匯出」，類型選擇「CSS 和影像(.htm)」，也可以指定圖片存放的資料夾，然後按下「儲存」，一個具有標準html 與 CSS 的網頁就完成了！
附上 Adobe 官方教學影片，可以更加清楚整個過程唷！
Read More...
Summary only...
這是之前格友 Queen 提過的問題，稍微整理一下方法跟原理吧！
使用國內的「無名」、「Pixnet」等 BSP 的朋友，部落格的選單連結已經是 html 寫死的狀態，也就是說，如果不刻意去控制的話，預設的選單就是「相簿、部落格、留言、名片」這樣的連結文字，加上 Windows 作業系統對中文字型先天上支援不足，幾個大拉拉的電腦字就杵在那裡。雖無大礙，但是若能替換自訂的圖片，增加裝飾性與主體整體性的話，視覺就更棒了！
由於各家 BSP 結構不盡相同，各主題之間樣式差異頗大，在此需先做一個模型，我以「Pixnet」的架構為例子，樣式則假設為橫式選單。
html架構原始碼如下：
<ul id="navigation">
<li id="link-album"><a href="/album/">相簿</a></li>
<li id="link-blog"><a href="/blog/">部落格</a></li>
<li id="link-guestbook"><a href="/guestbook/">留言</a></li>
<li id="link-profile"><a href="/profile/">名片</a></li>
</ul>
CSS 樣式表如下：
#navigation {
background-image:url(bg.jpg);
background-repeat:repeat-x;
position:absolute;
width:400px;
height:35px;
left:200px;
top:200px;
overflow:hidden;
}
#navigation li {
float:left;
margin:0;
}
#navigation a {
color:#fff;
display:block;
width:90px;
height:25px;
text-align:center;
padding:5px;
}
顯示結果：
Step 1 替換自訂圖片
準備好自訂的背景圖片。最簡單的作法就是直接製作一整張底圖。以這個例子來說，就是製作一張寬：400px，高：35px的圖片，上面有設計好的與整體部落格風格搭配的背景，連結的文字也一併使用非電腦字的字體設計。上傳之後，修正 CSS 如下紅字：
#navigation {
background-image:url(新自訂圖片.jpg);
background-repeat:no-repeat;
position:absolute;
width:400px;
height:35px;
left:200px;
top:200px;
overflow:hidden;
}
#navigation li {
float:left;
margin:0;
}
#navigation a {
color:#fff;
display:block;
width:90px;
height:25px;
text-align:center;
padding:5px;
}
顯示結果：
Step 2 隱藏連結文字
上面可以看到預設的連結文字與我們自訂圖片上得文字產生重疊，只要想辦法把文字隱藏起來就可以了！修正 CSS 如下紅字：
#navigation {
background-image:url(新自訂圖片.jpg);
background-repeat:no-repeat;
position:absolute;
width:400px;
height:35px;
left:200px;
top:200px;
overflow:hidden;
}
#navigation li {
float:left;
margin:0;
}
#navigation a {
color:#fff;
display:block;
width:90px;
height:25px;
text-align:center;
padding:5px;
font-size:0;
*text-indent:-9999px;
}
顯示結果：
完成！！很簡單吧！
事實上，在 FireFox 底下，只要下「font-size:0;」屬性，文字就會被隱藏起來了，但 IE 不認這個屬性，所以我們必須在加上 only for IE 的屬性 「*text-indent:-9999px;」，這樣 IE6、IE7 都能正確的顯示出自定圖片之後的選單了！
另外一個重點在於 <a> 這個元素一定要給予高度「height」的屬性！如此才能確保當連結文字被隱藏之後，使用者還能正確點選連結！高度值最好與背景圖片設定相同。
進階
如果想要花俏一點，製作出滑鼠指向效果，也就是當使用者把滑鼠移到選單上面後會產生變化，我們該怎麼做呢？
Step 1 準備自訂圖片加上效果圖片
以上面的樣式為例，我希望平時選單為黑底白字，滑鼠指向選單上面的時候，才出現霓虹的效果。除了將「自訂圖片」改為白色的字之外，還必須為各各連結(這裡是4個)準備不同的效果圖片。
Step 2 CSS樣式修改
依照上面的 CSS 為基礎，再分別新增下列屬性：
#link-album a:hover,#link-album a:active{
background-image:url(01_over.jpg);
background-repeat:no-repeat;
}
#link-blog a:hover,#link-blog a:active{
background-image:url(02_over.jpg);
background-repeat:no-repeat;
}
#link-guestbook a:hover,#link-guestbook a:active{
background-image:url(03_over.jpg);
background-repeat:no-repeat;
}
#link-profile a:hover,#link-profile a:active{
background-image:url(04_over.jpg);
background-repeat:no-repeat;
}
其中「#link-album」代表「相簿」按鈕，「#link-blog」則是「部落格」，「#link-guestbook」則為「留言」，最後「#link-profile」則是「名片」。而 01_over.jpg~04_over.jpg 代表各單元按鈕的效果圖片。「#」後面的名稱，各家 BSP 結構不相同，可以開啟網頁原始碼來得知，FireFox 使用者則可以利用 FireBug 套件來觀察元素。通常結構都會是<li id="xxxxx">，這裡 id 名稱 xxxxx，在CSS裡面就是 「#xxxxx」。
顯示結果：
Read More...
Summary only...
項目清單(list)在網頁編寫上是很常用到的元素，常見的項目符號除了「1、2、3」數字之外，大多使用圓點或是方塊來標注個個清單，區分條列。CSS語法裡面也能選擇清單樣式的宣告，像是「list-style-type」屬性，雖然這樣的符號相當容易使用，但是卻有著無法彈性修正位置以及自訂樣式的缺點。另外一種屬性，「list-style-image」也許可以讓你替換自訂的樣式圖片，卻在各瀏覽器上存在著不一致的情況，在位置上的調整上也具有難以異動的缺點！那麼，想要製作清單圖示 最好的選擇 是什麼呢？就是利用背景「background」元素來宣告！
以下就來分享一下如何使用背景圖片來製作清單圖示吧！
Step 1 建立基本的項目清單
HTML
<ul>
<li>清單項目一</li>
<li>清單項目二</li>
<li>清單項目三</li>
</ul>
Step 2 清除預設的項目符號（以及元素內外間距）
CSS
*{
padding:0;
margin:0;
}
ul{
list-style-type:none;
}
清除預設的項目符號只要加上「list-style-type:none;」語法即可。這裡有另外一個重點，在於清除瀏覽器預設的內外間距。我的習慣會在編寫CSS之前下一個 *{margin:0; padding:0;} 的語法，意思是宣告整個網站「所有」元素內外間距皆為 0 ，而 * 指的就是「所有元素」。
為什麼要清除所有預設的屬性呢？原因無他，就是為了清除各瀏覽器之間的差異！以項目清單的「縮排」為例子，在 FireFox 底下預設是使用 padding 來呈現，而在 IE 則是 margin 。將所有瀏覽器基準同於一線的時候，再去作調整，則每個瀏覽器之間的差異就不會太大了！
Step 3 自訂縮排間距
CSS
ul{
list-style-type:none;
margin-left:20px;
}
清除了預設的縮排之後，我們就可以隨心所欲將項目清單位置作調整。這裡我使用 margin-left: 20px 。可依情況改變。
Step 4 加上自訂的背景圖片
CSS
ul{
list-style-type:none;
margin-left:20px;
}
li {
background-image:url(images/icon01.gif);
background-repeat:no-repeat;
}
針對 li 下背景圖片的屬性，我們還必須增加一個 no-repeat 屬性，免得背景圖片一直重複，以致整個 li 被圖片淹沒。
Step 5 調整背景圖片位置
CSS
ul{
list-style-type:none;
margin-left:20px;
}
li {
background-image:url(images/icon01.gif);
background-repeat:no-repeat;
background-position:0 0.4em;
}
在上一步，背景圖片的預設位置，將會對齊元素的 left 與 top ，也就是左上方，這在每個瀏覽器中都是相同的。使用背景代項目符號的優點，就是能調整符號的位置！在這裡，「background-position:0 0.4em;」語法後面的2個數字分別代表：靠左 0px ，靠上 0.4em。0.4em 圖片正好垂直置中於文字的行高。
背景定位的數值可以自行調整，數值大小將取決於網站字級、行高等因素而有不同。編寫的時候，可以嘗試不同的值，以達到自己滿意的效果。
Step 6 調整項目位置
CSS
ul{
list-style-type:none;
margin-left:20px;
}
li {
background-image:url(images/icon01.gif);
background-repeat:no-repeat;
background-position:0 0.4em;
padding-left:12px;
}
最後，針對每個項目做靠左的定位，這裡必須使用內距 padding-left:12px; 的屬性，來讓項目定位在正確的位置上。數值可以依據符號圖片的寬度做調整，儘量不要靠圖片太近。使用圖片寬度較大的，就必須將數值調整更大了！
完成！
一個具有調整彈性，又能兼容各瀏覽器的「背景圖片製作的項目符號」就完成了！如果覺得項目與項目之間的行距不夠高，也能針對 li 下 margin-bottom:8px; 拉大與下面項目的距離。
Read More...
Summary only...
之前寫過「使用CSS+Div佈局網站」，透過float與clear屬性搭配，完成網頁佈局，也一直都是我在實務經驗上使用的方法。這幾天發現國外有人提出「No div, no float, no clear, no hack*, no joke!」這樣的訴求，目的是少用float屬性，以減少IE上的bug！沒有Div、沒有Float與Clear，還真是別開玩笑啊！（no joke！）
其實，我使用float與clear到現在，IE for Win倒是沒出現什麼問題，至少在網頁佈局上是這樣的。
到底如何「No div, No float, No clear」來製作網頁佈局呢？原理是使用列表項目來達成這個目的！也就是使用<ol><li></li></ol>，並配合dispaly:table這樣的屬性。
我自己這裡試過一下，是真的可行！不過仍然需要一些CSS hack！
Html代碼如下，像這樣佈局：
<ol id="main-wrap">
<li id="tw">Head</li>
<li id="cw">
<ol id="content">
<li class="left">section left</li>
<li class="center">section center</li>
<li class="right">section right</li>
</ol>
</li>
<li id="fw">Footer</li>
</ol>
然後加上CSS：
#main-wrap{
list-style:none;
width:900px;
border:3px double #ccc;
margin:15px auto;
padding:2px;
}
#tw,#fw{
font-size:18px;
font-weight:bold;
text-align:center;
padding:15px;
background-color:#33CCCC;
overflow:hidden;
margin-bottom:5px;
}
#cw{
display:table;
table-layout:fixed;
margin-bottom:5px;
}
#content{
display:table-row;
list-style:none;
*margin-top:-17px;
}
.left, .right, .center{
display:table-cell;
*display:inline;
*zoom:1;
vertical-align:top;
padding:5px;
color:#333;
}
.left{
width:190px;
background-color:#CCCCCC;
}
.right{
width:240px;
background-color:#CCCC99;
}
.center{
width:440px;
background-color:#99CCCC;
}
紅字部份則是重點。透過將『.left, .right, .center』等元素加入『display:table-cell』屬性，在FireFox底下就已經完成佈局了！但是為了IE，還必須加上CSS hack，『*display:inline; *zoom:1; vertical-align:top;』原理其實很簡單！
可是這樣一來還沒開始填裡面的東西，html原始碼與CSS就已經一大串了！純屬創意之作吧！感覺不是很實用。不過也提供另一種思考模式，可以不用老是只想到Div了！
這裡有更詳細的說明唷！
Read More...
Summary only...
使用CSS樣式配合Div配置來製作網站，已經成為業界趨勢。如果能夠靈活運用CSS，在結合PHP、Drupal、Ajax、Flex方面，也具有一定的優勢，並且帶來極大的效益，在維護與整合方面，絕對會是相當好的解決方案！
對「設計」來說，最常使用的傳統table巢狀方式切圖，在整合這些效能上面，有相對的弱勢。光是落落長的Html code，程式人員看的都要發昏了，更別說設計人員之後維護的問題。再者，使用table傳統切圖，對於html語法是一個很不好的學習習慣，因為根本不需要去了解各種html標籤原本代表的意義。想要做文章段落區別，可以這樣寫：<tr><td></td></tr>，要做項目列表，就多一點<tr><td></td></tr>，對瀏覽器來說，這個網站就像是一個超大表格，表格裡面還有表格，分不出哪個是標題，哪個是段落，哪個又是項目清單，到處充滿了沒有意義的code，<h1>、<p>、<span>、<li>等這些重要的標籤就這麼一次次被遺忘。網站要求曝光，要能輕易的被搜尋引擎找到，幾乎是不可能！
就讓table回歸他原本的功能吧！說不定還有人會問：table原來是做什麼用的呢？Div創造出來，被賦予的意義就是一個容器。一個裝載各種內容的容器，並且經由CSS配合排列、配置，呈現前台網站原本該有的視覺樣子。而table顧名思義，就是表格，用來呈現資料較為繁瑣，需要一筆一筆詳列、比較的資訊。例如：費率表、個人資料顯示等。換句話說，並不是從此就再也不用table，而是透過巧妙、熟練的將兩者混和、搭配，以提昇網站的效能、易用性與SEO。
簡而言之，Div用於網站版型佈局，透過CSS定義位置與寬度、背景等屬性，初步將網站的架構描繪出來。內容的部份，則必須活用html的各種標籤；文章段落就用<p>，項目清單就用<ul>、<li>，標題就用<h1~h6>，表格形式的結構性資料就交給<table>！
靈活運用各種html code與CSS，將增進程式人員與設計人員的合作效益！而且當網站需要修改與維護時，你也會感謝昨天的你，替今天的自己保留了修改彈性。不要再依賴Photoshop切圖，然後直接轉存html的方法來製作網頁了！從html的基礎code標籤開始認識、學習，發揮CSS對於網站效能助益的最佳影響力吧！
Read More...
Summary only...
寫CSS過程中，最常用到的，除了color跟width之外，就是margin以及padding了，剛接觸CSS，應該很難理解這2者的差異。這裡就來分享一下簡單的觀念吧！
基本
以一個div來說，margin就是指這個div「對外」的距離，相對的，padding則是指這個div「對內」的距離！
也就是說，當出現2個以上的div（或是其他容器，例如：p、span、ul等）的時候，藉由設置margin，則可以讓這2個div按照數值保持一定的距離！
而在div裡面通常會有各種內容存在，文字或是圖片，甚至是影片，如果希望這些元素與div容器中間能有些距離，這時候在div設置padding是最好的方法！
換個方式，假設對每個內容元素設置margin，以達到對外面這個div容器保持一定距離的目標，也是可以，只是，只要每增加一個內容，你就必須多寫一個margin語法，增加CSS複雜度，事後管理以及修改也增加不少困難度喔！再者，網站交到客戶手裡之後，客戶會上什麼資料？會有幾筆？這些我們很難去控制，要是發生排版問題，反而顯得不專業了！
如果能靈活運用margin跟padding，是相當重要的一環，CSS設計上將會更加完善！
Read More...
Summary only...
現業界大部分還是以傳統table作為網頁佈局的主流，也就是在一個大大的table裡面，填上內容、選單等網頁資料。事實上，這不僅增加程式碼的複雜度，讓程式人員困擾之外，也讓網站的效能大大降低！又，設計人員若需要維護修改，也會相當麻煩。
使用DIV佈局，可以使程式碼簡單化，讓程式人員輕易套用各種功能。
內容內容內容內容內容內容內容內容
如上面的前台顯示為例，若使用table呈現，程式碼為：
<table border="1" cellpadding="0" cellspacing="0" width="300">
<tbody>
<tr><td>內容內容內容內容內容內容內容內容</td></tr>
</tbody>
</table>
相同樣子，若改以Div呈現，程式碼為：
<div style="width:300px;">
內容內容內容內容內容內容內容內容
</div>
光是這樣簡單的前台顯示，就有如此大的差別，何況一個結構複雜的網站，一大堆table結構更是令人昏頭轉向。所以利用CSS，配合Div佈局網頁，將是一個重要的課題！
該如何使用CSS+Div製作網頁佈局呢？
Div若不加任何style，會依照html程式碼的順序排列，也就是說寫在越前面的Div，就會在越上面顯示。若像下方這樣的html：
<div>
內容內容內容內容內容內容內容內容
</div>
<div>
內容內容內容內容內容內容內容內容
</div>
<div>
內容內容內容內容內容內容內容內容
</div>
前台顯示出來的就會是像這樣子：
內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容
但是一般網站結構，大概分為上方形象區、左側子選單、右側主內容、以及下方版權宣告，如下方顯示：
TOP上方形象選單區
LEFT左側子選單區
RIGHT右側主內容區
FOOTER下方版權宣告區
要製作如此的網站結構，其實相當簡單！
html程式碼部份，只要像下面這樣寫：
<div id="mainwrap">
<div id="top" >TOP上方形象選單區</div>
<div id="left" >LEFT左側子選單區</div>
<div id="right" >RIGHT右側主內容區</div>
<div id="footer" >FOOTER下方版權宣告區</div>
</div>
沒錯！html部份就是這樣簡單！當然這樣還沒完成，我們必須增加樣式給每個Div，讓他們能照我們的想法，排進每個位置去！
增加一個CSS檔案，將路徑指到這個html，在CSS樣式裡面增加下面的語法
#mainwrap{
margin: 0pt auto;
padding: 5px;
width: 400px;
font-size: 15px;
font-weight: bold;
border:1px solid #ccc;
}
#top{
padding: 5px;
background-color: rgb(0, 204, 204);
text-align: center;
color: rgb(0, 51, 102);
}
#left{
padding: 5px;
background-color: rgb(255, 204, 51);
width: 90px;
height: 100px;
float: left;
color: rgb(255, 102, 0);
}
#right{
padding: 5px;
background-color: rgb(243, 238, 218);
width: 290px;
height: 150px;
float: left;
color: rgb(204, 153, 102);
}
#footer{
padding: 5px;
clear: both;
background-color: rgb(204, 51, 0);
text-align: center;
color: rgb(255, 255, 255);
}
我們使用float:left的語法，讓左右兩塊Div能夠並行，而不會垂直排列，再者，我們在footer部份增加clear:both的語法，將上述float:left語法的效果清除，讓footer得以依照left以及right兩塊Div的長度作正確的定位！
現在可以看看你的前台顯示，是不是一個簡單的網頁架構就已經完成了呢！
這樣的作法，由於html與樣式是拆開的2個檔案，當設計人員必須針對部份樣式修改的時候，程式人員完全不會感到困擾，因為設計人員只要針對CSS檔案作修正，html則是完全不會改動，效率是不是增加許多呢！再者，這樣的html簡潔、有效，還能增加搜尋引擎最佳化！
left下方空白的部份，我們可以依照需求，在mainwrap增加與left相同的背景顏色屬性，這樣網站看起來就更完整了！
Read More...
Summary only...
目前網頁實例上，由於可以任意編寫html，其實是可以很輕鬆達到這種結果的。這裡就以Blogger本站的sidebar為例子。Blogger雖然可以修改範本，但是畢竟這是人家寫好的template，基本上在修改部份就有了些限制，不熟稔網路語法的就會很難入門。
首先，準備好3張圖。以本站為例如下附圖，紅光圈起來的地方：
分別為一張top的圓角、底部bottom的圓角，以及一張中間沒有圓角的圖，用來當作背景。
再來，我們來分析一下Blogger在sidebar的html語法架構，
Blogger的預設側邊欄，共有2欄，分別為sidebartop-wrap、sidebarbottom-wrap1，形式都是div。以sidebartop-wrap來說(sidebarbottom-wrap1亦同)結構再細分為sidebartop-wrap、sidebartop-wrap2以及sidebartop，主要的部落格元素都是放在sidebartop裡面。也就是說，一個top的sidebar，總共有三層div結構，每一層div都能指定一種背景，因此原則就是把剛剛那3張圖素分別指定到3個圖層的背景，基本上一個具有圓角的sidebar就完成了！
將3張圖素上傳之後，會得到一個位址，請先記錄下來。接著打開「範本」>「修改範本HTML」，找到「#sidebartop-wrap」，將原本定義的背景style註解起來，並且增加一段樣式設定，如下：
#sidebartop-wrap {
/*background:$topSidebarBgColor url("原始背景位址") no-repeat left bottom;*/
margin:5px 0px 15px;
padding:0px 0 5px;
color:$topSidebarTextColor;
}
html>body #sidebartop-wrap{background:背景底色 url("bottom圖片位址") no-repeat left bottom;}
接著順序修改sidebartop-wrap2，並增加sidebartop的CSS樣式：
#sidebartop-wrap2 {
background:url("top圖片位址") no-repeat left top;
padding:9px 0 0px;
margin:0;
border-width:0;
}
#sidebartop{
background:url("中間無圓角的圖片位址");
}
基本上到這裡其實已經修改完畢，但是因為IE6會跑出間隔，因此還必須增加以下語法作修正。
然後找到<div id="sidebartop-wrap2">語法位置，增加紅色部份在2個</div></div>之前：
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>...</b:section>
<!--[if lte IE 6]><img src="bottom圖片位址" /><!--[endif]--></div></div>
按下「儲存範本」，重新檢視Blog，大致上就可以完成了！本站的bottom圖片是放在sidebartop-wrap之下，若要放在sidebartop-wrap2也是可以！只要將上面語法兩者互換，一樣可以達到效果！
以上，希望能對大家有點幫助囉！
Read More...
Summary only...
這是之前格友 
項目清單(list)在網頁編寫上是很常用到的元素，常見的項目符號除了「1、2、3」數字之外，大多使用圓點或是方塊來標注個個清單，區分條列。CSS語法裡面也能選擇清單樣式的宣告，像是「list-style-type」屬性，雖然這樣的符號相當容易使用，但是卻有著無法彈性修正位置以及自訂樣式的缺點。另外一種屬性，「list-style-image」也許可以讓你替換自訂的樣式圖片，卻在各瀏覽器上存在著不一致的情況，在位置上的調整上也具有難以異動的缺點！那麼，想要製作清單圖示 最好的選擇 是什麼呢？就是利用背景「background」元素來宣告！
發表文章
