CSS 相關_001 [with: DIV區塊標籤 《色碼表》]

 pixlr：怎麼讓圖片背景變透明？（去背景）

1. http://cooltemplate2013.blogspot.tw/                   CSS @WebTech   DIV區塊標籤 《色碼表》教學

2. Blogger template模板教學課程---CSS外觀解說

看過了模版基本結構的介紹，接下來先談比較重要的外觀設計，一個好的CSS設計不僅讓你的網頁更有吸引力，符合網頁標準技術的設計更能讓你的網頁在不同瀏覽器中運作正常，不會跑來跑去，我想很多人都有這經驗，逛到許多網站發現整個結構錯亂，邊欄跑到下方或是延伸到遙遠的右方（這以無名最嚴重），或是整個畫面一片空白，還要反白才能看清楚文章在寫些什麼(Yahoo有案例)，或是層層疊疊，文字都堆在一起，綸太郎都忍不住罵聲「這是什麼鬼啊！」，這就是沒有做好CSS外觀設計的失敗，如果你一直堅守在某個瀏覽器（不論IE或是FF），而不肯自己作改變，設計或修改模板來適合大部份瀏覽者的需要，我想這篇文章你也可以省略，不用浪費時間看了。

首先我們大概來看整個網頁的CSS結構配置圖，如下：


配合上圖來說明，
‧ body（藍色）：整個網頁的主體，通常不用設寬度，只要設底色，但如果有用固定背景圖，則建議要設，控制網頁的展示。

‧ outer-wrapper（淺黃色）：網頁大小layout的範圍，如果你想設計1024*768大小的模板，在此就要定義width的大小(例如width:990px;)，如果你想依解析度大小彈性運用，這裡就要設百分比（如width:95%;）

‧ header-wrapper（紅棕色）：標題區塊的大小，這個網頁元素通常包含
#header這個元素及.description（網誌形容），較高階的這裡會放導覽條(menu_bar或header_menu)，如下，

通常很多人會放圖片，使用網頁元素裡的標頭編輯可以插入圖片，但綸太郎建議不要這樣做，因為有時會縮減你的原始圖片，所以還是利用修改css碼來放圖片比較能放到你想放的位置，也能控制圖片大小，語法為
background: #00ffff url("圖片網址") no-repeat;
有時不能成功，試著改成
background-image: #00ffff url("圖片網址") no-repeat;
為什麼要加上#00ffff，這是標頭區的背景顏色（可自設），有時背景圖比較慢顯示或是叉燒包，至少還有背景顏色可看到，不會一片空白，或是跑出底色。
※ 如果你想將標題分成兩部份，像這篇如何將標題(頭)分兩欄，加入網頁元素的作法，那麼會有#header及#header-right兩個定義，兩者加起來就不能大於header-wrapper的寬度，否則元素會被推到下方去。

‧ content-wrapper（橘色），包含main-wrapper＋sidebar-wrapper，寬度要設好，通常都要預留邊界的空間，很多時候sidebar往下掉，就是因為寬度不夠，譬如文章裡的圖片超過post的寬度，或是sidebar裡的元件widget超過sidebar設的寬度，而這些都可以透過修改寬度來避免，或是利用overflow:hidden;來設定。

‧ main-wrapper（綠色），主文區（#main），包含
* 文章標題（.post h3）,通常會和日期（.date-header）擺一起
* 內容（.post）
* 文章相關資訊（.post-footer），如創作者(posted by)、發佈時間、意見及文章分類等，這部份很多人勾選了版面配置的網誌文章編輯，還是無法控制這些元素的出現或隱藏及移動位置，通常原因是出在你使用的模板不是官方設計的，所以更改後還是沒有效果，這時就要利用html裡面的語法來作調整，這以後再談。
* 意見區（comments）。
這裡可以加些讓文章內容格式更漂亮、更專業的元素，例如利用
‧ blockquote，引用他人文章的區塊設計。
‧ code，程式碼的外觀設計。
‧ 讓文字加上底線，顯示重要性。
這些透過Google查詢都可以取得相關的教學文章。

‧ sidebar-wrapper（黃色），sidebar邊欄的配置，這裡可以放網頁元素，很多小工具widget的地方，有的模板會分兩欄或常看到的三欄式，或是綜合式（多欄）模板，這裡寬度控制更要留心，儘量讓你的widget寬度與邊線預留5px的空間。

‧ footer-wrapper（靛青色），頁尾，通常綸太郎會放網站連結及版權宣告、模版設計來源，後台登入等資料，


可參考Blogger 新手基本技巧問答（四）說明，也有人會利用這區塊分成三欄來放網頁元素，這是比較高階的用法。

這裡常看到的定義h1、h2、h3，這些通常用來定義元素的標題大小，從h1~h6都有，常見的是，
#header h1，網站標題
.post h3，文章標題
h2.date-header，每篇文章日期的格式
.sidebar h2 ，邊欄的標題，例如最新文章、最新回應
#comments h4，意見，文章下方顯示幾則意見的文字格式。大部分模板都是如此定義，但也有少數有自己獨特定義的型態。

另外CSS裡的元素定義名稱，每個模版都不盡相同，須靠自己判斷，尋找類似意思的名稱即可，以上為CSS外觀的結構大綱說明，細節部份等下篇再談了。
延伸閱讀：
Blogger template模板教學課程---概說及基本結構
Blogger template模板教學課程---HTML內容架構
blogger模版CSS語法細部介紹(上)
Blogger模版CSS語法細部介紹(下)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

開始進行CSS+DIV畫表格 (取代Table)

為了讓大家方便在DIV和table之間的轉換，所以在CSS的命名上主要就是使用「css_」作為開頭，方便做一個對照。首先，以前面的範例table範例語法：

<table>
    <tr>
        <td>標題</td>
        <td>回應</td>
        <td>日期</td>
    <tr>
    <tr>
        <td>如何停用WordPress內建搜尋功能？</td>
        <td>5</td>
        <td>2011-10-30</td>
    <tr>
</table>

接著，我們將以上語法改成CSS+DIV的切板模式，如同前面所說，為了方便對照，所以CSS的定名開頭採用「css_」。

<div id="css_table">
      <div class="css_tr">
          <div class="css_td">標題</div>
          <div class="css_td">回應</div>
          <div class="css_td">日期</div>
      </div>
      <div class="css_tr">
          <div class="css_td">如何停用WordPress內建搜尋功能？</div>
          <div class="css_td">5</div>
          <div class="css_td">2011-10-30</div>
      </div>
</div>

接下來，我們套上CSS的語法，效果就會出現了！

#css_table {
      display:table;
  }
.css_tr {
      display: table-row;
  }
.css_td {
      display: table-cell;
  }

CSS語法與table比對

事實上，從上面的語法來看，要用table改成css的方式並不困難，所有的樣式定義需要全部透過CSS的id或是class全部獨立出來，其他部分寫起來是差不多的。上面的語法，並沒有對CSS畫出的表個做顏色、邊線、寬度作定義，可能看起來醜醜的，這部分就請大家自己摸索了。這篇文章主要是要告訴大家，利用CSS也是可以達到table的效果。下面列出一些display對應table的屬性：

• inline-table：顯示成前後沒有換行的表格
• table：對應<table>標籤，以表格方式顯示。
• table-row：對應<tr>標籤。
• table-row-group：對應<tbody>標籤。
• table-cell：對應<td>標籤。
• table-caption：對應<caption>標籤。
• table-column：對應<col>標籤
• table-column-group：對應<colgroup>標籤。
• table-header-group：對應<theader>標籤。
• table-footer-group：對應<tfooter>標籤。

可使用有意義的標籤如title、h1、h2，使得搜尋引擎更容易去判斷此網站的內容及關鍵字為何，進而 [提升網站的排名]