05c_main

• 透過搜尋，跳到指定的註解
• #main和banner的內距(padding)
• #main的漸層背景
• #main <article
• SIDEBAR區塊
• TABS區塊
• COMMENTS區塊
• .tabList li的框線設定
• css屬性重覆時，優先權設定
• 簡化css，合併用法相近的css
• #category、#archieve、.tabs樣式設定
• SPONSOR區塊

---

透過搜尋，跳到指定的註解

接下來開始準備寫MAIN的部份了，因此寫入MAIN的標記

現在就可以看得出我們之前替每個css區塊做標記的效果了，舉例來說，當你想要跳至BANNER區塊時，只要搜尋-BANNER就會跳至指定的位置。如此一來，你就不用擔心當你css愈寫愈多時，找不到你所要尋找的區塊在哪裡

#main和banner的內距(padding)

開始寫#main的部份，為了和標題間留點間隔，我們將其內距上端(padding-top)設為50px

回到photoshop，觀察原圖，可看到原圖的標題也有保留內距

#main的漸層背景

並且解說#main的背景是由漸層組成的

因此我們開始逐步進行背景漸層的設定

先量測psd檔中的#main背景顏色，可量測出顏色為#f8eedf

讓我們先試試看漸層的效果，先任意填入漸層右端的顏色為紅色

運行結果，可看到是有漸層的效果了。但因為子容器浮動(float)的原因，父容器的背景會被子容器蓋住

因此，需設定#main層的overflow:hidden

運行結果，可看到背景正常顯示了。

確定漸層成功後，開始量測真正的漸層顏色。先量測位於右側的漸層顏色(#eeddc6)

並將此顏色(#eeddc6)，填入右側的漸層

運行結果，漸層成功了。但是漸層顏色的比例不大正確，psd的原圖左右二個欄位的顏色區分是很明顯的。

所以要如何調整左右漸層所佔的比例呢?
左欄所佔的比例為63.5%(因為左欄的寬度為609px，609/960=0.635)
右欄的顏色從63.6%處開始設置

運行結果，可看到左右欄位的漸層有明顯的區分了

回到photoshop，觀察原圖，可看到左欄位的邊框線也是有顏色的(#fff7ea)

因此設置左欄的框線顏色(#fff7ea)和位置(63.6%)

回到photoshop，觀察原圖，右欄位也是有框線顏色的(#dfcdb2)

因此設置右欄的框線顏色(#dfcdb2)和位置(63.7%)

因設置了邊框的漸層，所以右欄的漸層也往後調整位置(63.8%)

運行結果，漸層幾乎都設好了，只是邊框顏色有點太明顯了一點，應調整漸層位置，使之看起來平滑一點

將左右欄的邊框都設在相同位置(63.6%)

運行結果，可看到邊框沒這麼明顯了

回到photoshop，量測右欄最右邊的漸層顏色(#f8eedf)

剛好和最左邊的漸層顏色一樣(#f8eedf)

因此最右側的漸層，就設為#f8eedf

運行結果，漸層完全設置好了

漸層確定設好後，要確保其它瀏灠器也可以運行漸層功能，所以依序寫入其它瀏灠器的寫法，漸層部份就此大功告成

#main <article

接下來，來處理#main區的<article>部份，為了不要跟右側的欄位過於接近，要在右方留點空間，所以設右內距為50px

運行結果，可看到<article>就會和右方欄有些間隔了

圖片需和左右對齊，且和其下方文字的間距也要留點間距，所以設margin:0 0 10px

運行結果，圖片成功和下方文字產生適當的間距

<article>的<h2>標題，需和其下方的<h6>標題貼齊，因此設margin-bottom:0，且不需設為粗體，因此設font-weight:normal

想讓滑鼠滑過<h2>標題時，讓底線消失，且設為粗體

但是超連結滑過的動作，不應由<h2>負責，應由其內部的子元件<a>來負責

運行結果，完成了滑鼠滑過具超連結功能的標題時，標題粗體化的功能

大標題<h2>下方的子標題<h6>，分別設定其顏色和斜體

運行結果，完成了子標題<h6>的設定。<article>區塊的標題和文字設定完成

SIDEBAR區塊

在psd檔中，解說SIDEBAR區塊的頁籤區塊。設明這一個部份必需考慮到有無啟用javascript時，需套用不同的設計

開始了SIDEBAR的部份

右側欄SIDEBAR是由3個section所組成的，為了必免浮動造成位置亂跑，所以設clear:both。
先設置背景為紅色來觀察其排列方式。
3個section需有間距，設置margin-bottom:40px

運行結果，可看到SIDEBAR內的<section>位置分佈

設置section的img為向左浮動排列

運行結果，可看到SPONSORS區內的那2張代表圖片的文字，變成向左浮動排列了

確定圖片可向左浮動排列後，加入其圖片的位置

運行結果，圖片成功顯示

TABS區塊

接下來為TABS的部份(點選頁籤後，所顯示的欄位區塊)

由於父容器<section class="tabs">，內會含有子容器<ul>，為防止浮動溢位的問題造成背景無法正常顯示，設其overflow:hidden

剛剛設背景為紅色只是為了測試用的而已，現在用不到了，移除這一段紅色背景的設定，並設定好.tabs的背景顏色

運行結果，.tabs區塊的背景成功設置了

回到photoshop中，觀察.tabs區塊的樣式設定，發現其背景為漸層、邊框有圓角、且和最下方的邊線間有一定的間隔距離

因此依序設其漸層背景、圓角、及下方內距

運行結果，.tabs區塊成功設置了圓角、漸層背景和下方內距

#tabHeadings(頁籤標題列)用來放置切換tab的連結，
為了讓內部的元件以區塊式來排列，設display:block;
想和下方的.tabf區塊沒有間隔，設margin-bottom:0;
設置不同瀏灠器的左上、右上的圓角;
overflow先設為visible，觀察背景是否會有問題;
最後，設其下框線和背景顏色

#tabHeadings 內的<li>，是提供給使用者點選用的，所以需設定選取(selected)、滑過(hover)的視覺回饋。因此設定不同的背景顏色和位移。

運行結果，完成了滑鼠滑過時的視覺回饋

但不只滑鼠滑過需要視覺回饋，目前是哪一個<li>被點選也需讓使用者知道，所以增加一個selected的類別，運用在目前被點選的<li>上(預設為第一個<li>被點選)

運行結果，完成了第一個<li>被點選的視覺效果。但是目前的樣式並不美觀，需修改其排列、寬度等設定。使其成為更容易操作的頁籤標題列。

將點選用的頁籤標題<li>，設為向左浮動排列、寬度為83px、文字置中、鼠標滑過時需變成手形(pointer)、內距為10px

運行結果，可看到較美觀的頁籤標題了，但其文字顏色和背景仍需加以修改

設置超連結頁籤標題顏色為白色

運行結果，超連結的字被設為白色了，但是很明顯的頁籤標題列的背景有問題。

返回photoshop中，可看到理想的頁籤標題列背景顏色應為黑色，但為何頁籤標題列(#tabHeadings)的背景會不見呢?

因為其overflow不應設為visible，應該設為hidden才能讓身為父容器的#tabHeadings的背景正確出現，不被其子容器的背景顏色蓋掉。

運行結果，頁籤標題列的樣式設定完成。

接下來，設定頁籤頁(.tab)，內的<ul>的樣式。
設定padding使其內部的文字和邊框留點距離。
margin-bottom設為0，使<ul>能緊緊的靠在一起，不留間距。
border-top，設置其上邊線樣式

我們來觀察看看，如果margin-bottom不設為0，會有什麼影響

運行結果，可看到標題和<ul>會產生不必要的間距

先將上邊線設為紅色，來觀察上邊線的位置是在哪裡

運行結果，看到了上邊線的位置了

觀察完畢，將邊線顏色套用至原先的設定。完成了頁籤區塊的排列樣式，但是文字的樣式尚未設定喔。

返回photoshop，觀察Comments區塊的樣式，可發現有邊線、白色字、超連結用的標題

COMMENTS區塊

開始COMMENTS的部份

分別設定<li>的下邊線、上邊線、內距、字顏色

運行結果，可發現第一個上邊線和最後一個下邊線，產生了重複的邊線

所以設定最後一個和第一個<li>的邊線為無

運行結果，可看到重複的邊線被成功移除了

在<footer>內的<h6>加入超連結

運行結果 ，標題的超連結是出現了，但還需設定該<h6>的樣式

<h6>需和<li>的下邊線切齊，不留任何間隔，所以設margin-bottom:0;
字顏色設白色;
不需設為粗體且字大小設為10px，才不會因字太大而分為二行;
margin-top設為-13，是為了和上端的<p>靠近，以下會解釋為何這麼做

在firebug中，檢查<p>的邊距設定，可發現預設中<p>的下內距為20px，也因此會產生不必要的間隔。
如果將<p>的下內距改為0px，當然也可以解決<p>和<h6>間的間距問題，但這樣改的話，又得要判斷是哪一個<p>需做此設定，所以與其修改<p>，不如直接將<h6>的margin-top設為-13

所以這就是為何要將<h6>設為margin-top:-13px的原因

運行結果 ，完成了Comments的超連結標題設定

.tabList li的框線設定

接下來， 觀察CATEGORIES和ARCHIVES這二個區塊，可發現它們的共通點，都是清單的形式

所以，有關CATEGORIES和ARCHIVES這二個區塊的樣式，都統一設定在#secondary .tabList

返回html中，將categories加入樣式tabList

archives也同樣加入樣式tabList

.tabList內的<li>以區塊式排列、設定上下邊線、內距為10px

運行結果， <li>的樣式較清楚了，但有2個問題:
1:第一和最後一個<li>有多餘的邊線
2:滑鼠移過超連結時，鼠標應呈現手形

因此，將<li>滑過時的鼠標設為手形，第一個<li>上邊線和最後一個<li>的下邊線設為無

css屬性重覆時，優先權設定

此時，理論上第一個<li>的border-top和最後一個<li>的border-bottom應該能成功的移除才對

運行結果， 但是border-top和border-bottom的邊線仍然存在，剛才的設定並沒有成功，這是為什麼呢?

這是因為優先權的原因，css設定屬性時，id名稱屬性的會比類別屬性的優先設定。所以.tabList會被#secondary .tabList給取代掉。如果不想被取代，那就將.tabList改寫為#secondary .tabList

運行結果，重覆的上下邊線成功的移除了

如果只是要單純的測試是否為優先權問題，可直接在後寫入!important，就可將優先權設為最高。

運行結果， 一樣能解決了優先權問題，上下邊線成功移除。

為了避免id屬性的#secondary優先權太高而取代了其他設定，也可將#secondary直接移除掉，讓優先權一致

運行結果，上下邊線一樣可成功移除， 優先權的問題解決了。

簡化css，合併用法相近的css

觀察#comments li和.tabList li，所寫的樣式相當的類似，所以保留.tabList li的設定就好，把#commments li給移除。

因為#commments li被移除了，所以要讓#comments套用新的樣式tabList

運行結果， Comments的樣式大都維持原樣，只是原本的字是白色的，套用了.tabList的樣式後，變成了黑色，所以還需加以設定字的顏色

在.tabList li的樣式中，加入了字為白色的設定

運行結果， Comments的樣式設定成功

我們來觀察<section>內的<ul>所套用的樣式，發現都是使用tabList

既然重複用了許多的tabList，那還不如將樣式統一為.tabs >ul

因此，將所用原先寫為.tabList li的改為.tabs >ul li

運行結果， 得到了一樣的效果，但是卻減少了許多重複的程式碼，使css更加簡潔

接下來， 我們希望滑鼠滑過<li>時，背景有些變動，讓使用者知道目前他滑動到哪一個<li>

運行結果， 滑鼠經過時，背景成功改變了

但目前的.tabs li:hover會套用到全部的<li>，如果你並不想讓Comments的<li>也一起套用這滑鼠滑過的背景設定的話，需指定特定的<li>不需套用相同的設定

指定.tab內的第一個<li>滑鼠滑過時，背景不要變

指定.tab內的第一個<ul>內的所有<li>滑鼠滑過時，背景不要變

運行結果， Comments的所有<li>，滑鼠滑過時，背景就不會變動了

當然，剛才只是在教各位如何限定特定<li>的背景特效。在此範例中，所有的<li>在滑鼠滑過時，背景產生變動並無影響，所以我們將限定特定<li>的背景特效的效果給移除掉。<li>背景特效的部份到此設定完成。

#category、#archieve、.tabs樣式設定

接下來， 我們來觀察<ul id ="categories" >，預設的<ul>左右內距為20px，這會造成多餘的內距，所以將左右內距設為0px較好。

由於#categories和#archieves都是一樣的清單樣式，所以同樣設定左右內距為0px

.tabs內的超連結顏色設為白色

運行結果， 超連結成功設為白色了，但是滑鼠移過時，預設會產生底線

不希望滑鼠滑過時產生底線，因此將text-decoration設為none

返回photoshop，可發現我們已經完成了此頁籤頁(.tab)的所有樣式設定，剩下的部份就只有運用javascript的功能，讓使用者點選頁籤標題時，能切換所需顯示的部份而已。

此外，仍需考慮使用者的流灠器是否支援javascript，javascript的支援與否，會決定html的顯示方示。
當有支援javascript時，頁籤標題可供點選，所以<ul>內的<h4>不需顯示，需設為display:none。
不支援javascript時，頁籤標題就不能點選了，沒有了頁籤標題，<ul>內的<h4>就需顯示。

運行結果， 觀察我們已經完成的部份，我們已完成了<header>、<banner>、#main的<article>和tab的部份。

接下來， 來處理SPONSORS的部份，二張圖片不需靠這麼緊，設為左右排列較美觀，而且應加外框線。

SPONSOR區塊

開始寫SPOONSORS的css

#sponsors內有2個<li>，將第2個<li>設為右浮動排列

運行結果， 第2個<li>的圖片向右排列了。完成了圖片一左一右的效果。

寫入圖片外框線的樣式

運行結果， 外框線成功顯示了

但我們希望#secondary內的所有<img>都能有外框線效果，所以改成#secondary img

加入陰影的效果

運行結果， 邊框和陰影都出現了，但是陰影的顏色太深了一些

返回photoshop， 量測邊框中的顏色(#febf5d)

再選擇顏色較深的部份(#fdb84d)來做為陰影的顏色

運行結果， 邊框的陰影柔和多了，邊框效果完成。

返回photoshop， #main的效果幾乎都完成了，只剩下超連結的顏色需要設定綠色和粗體

設定#main內<p>區塊內的超連結，顏色為線色且為粗體

運行結果，超連結設定完成，完成了#main的所有部份