我們常常在網頁設計的時候，會需要使用到Table表格來排版，有時候多少需要加一點顏色來美化
今天要教大家的是僅透過簡單的CSS語法，來讓Table表格達到奇偶底色相間，整個語法不需要用到任何javascript，但是，僅限使用在IE7版本以上，若IE7以下恐怕還是不支援（不過這年頭IE7以下直接可以捨棄掉了），但即使是如此，還是不影響整個程式上的運作，頂多也只是美觀上的問題而已。
首先，很簡單，僅需要加上以下兩行CSS語法，就可以達到Table的奇偶底色相間：
目前分類：CSS (22)
- Sep 21 Sun 2014 18:46
【CSS教學】- 簡單CSS語法美化Table表格底色奇數偶數相間
- Aug 25 Mon 2014 11:22
Font Awesome 一行語法，輕鬆在網頁加入ICON圖示
Font Awesome 一行語法，輕鬆在網頁加入ICON圖示
以往在網頁製作的時候，有時候要考慮到美編的內容，所以會在網頁中加入一些小ICON的圖示，一方面最主要用來增加網站的美觀；另外一方面則是用來讓瀏覽者好辨識該按鈕的內容，也就是我們俗稱的UI（User Interface - 使用者介面）
只不過以往的方法，對於網頁設計師人員相當麻煩，因為在網站設計的過程中，他們必須自行去網路蒐集或請美編人員設計這樣的ICON，再者，這些圖示ICON都還只是圖片檔，所以無形之中會造成以下幾點的缺點：
- Jun 23 Mon 2014 10:24
RWD(Responsive Web Design)自適應網站的製作方式
RWD(Responsive Web Design)自適應網站的製作方式
首先，你必須先在網站開始的地方加上以下meta語法，用於規定裝置的的結構規則：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
其次，需將所有有圖片的地方，加上以下CSS語法，方便圖片按照螢幕寬度的自動縮放：
img {
height: auto;
max-width: 100%;
}
最後在CSS的地方加上以下規則（通常最少我們都分3個尺寸），讓不同寬度大小，給予新的不同CSS規則，就完成了：
- Apr 16 Wed 2014 01:17
[CSS] DIV區塊內文字左右對齊的CSS語法
DIV區塊內文字左右對齊的CSS語法
英文的單字長度都不大一樣，所以我們常常會碰到在某一區塊裡面，英文無法左右對齊的窘境；這時候我們可以使用CSS的一個對齊的語法-- text-justify 與 text-align
但是text-justify它有支援上的限制：
- Jan 09 Thu 2014 00:58
CSS3 - 全螢幕背景、CSS全畫面背景、全畫面自動縮放背景
- Jun 29 Fri 2012 20:17
CSS3 - 各瀏覽器對於HTML5及CSS3的支援程度及各家瀏覽器語法
- Jun 29 Fri 2012 20:05
CSS3 - CSS3的基本介紹及重要概念
- Jan 04 Wed 2012 01:37
[CSS教學] - CSS Sprites Generator，快速產生網頁圖示，加快網頁載入速度
何謂CSS Sprite?
一般在做網頁時，都會加入許多圖示來讓整體網頁看起來更為活潑，不過你可能不知道，當一個頁面裡圖示越多，使用者就必須花更多時間來讀取這些零散的圖示，但透過CSS Sprites這項技術，可以幫你把所有圖示合併成一張大圖，在以CSS的定位方式來讓某圖示出現。
CSS Sprites Generator是一個幫你把圖片組合起來的網站工具，除了幫你組合起來之外，還會幫你算好位置並且顯示出來，讓你不必自己辛苦計算位置，因為CSS Sprites Generator會幫你搞定。
哪些知名網站使用這項技術呢?
最常見的Yahoo就是個很好的例子，我們常在Yahoo首頁看到網站的小圖示（如下圖）
- Nov 17 Thu 2011 13:09
[CSS教學] - 讓IE6.0 IE7.0 IE8.0支援CSS3圓角、陰影
最近在網路上找到補強IE6.0、IE7.0、IE8.0的支援CSS3補丁
不過使用要注意以下的內容
- Nov 12 Sat 2011 06:23
[CSS教學] - CSS 選取器（Selector）種類簡介
CSS的語法為：
選取器（Selector），也有人稱之為選擇器，不過 Dreamweaver 內稱之為選取器，小魚也跟著 Adobe 如此稱呼。
選取器 { 屬性：設定值；}這篇就要來介紹選取器（Selector）的種類及應用。
選取器（Selector），也有人稱之為選擇器，不過 Dreamweaver 內稱之為選取器，小魚也跟著 Adobe 如此稱呼。
- Nov 12 Sat 2011 05:05
[CSS教學] - CSS基礎您不能不知道的block(塊元素)、inline(內聯元素)差別
我們首先要了解，所有的html元素，要馬是block(塊元素)、要馬是inline(內聯元素)。下面了解一下block、inline各自的特點：
block元素的特點：
總是在新行上開始；
- Nov 12 Sat 2011 01:56
[CSS教學] - 純CSS二、三階層動態選單按鈕 (完美支援各版本瀏覽器)
如何不使用任何JavaScript或jQuery，僅使用純CSS語法
來達到二階層、三階層的下拉選單按鈕?
- Nov 07 Mon 2011 01:19
[CSS教學] - CSS表單美化
- Oct 13 Thu 2011 16:03
[CSS教學] - CSS背景漸層顏色語法產生器 (Ultimate CSS Gradient Generator)
- Aug 09 Tue 2011 01:05
[CSS教學] - CSS取消連結上的虛線框（IE&Firefox通用）
- Aug 02 Tue 2011 03:15
[CSS教學] - css3maker - CSS3線上效果產生器
- Jul 23 Sat 2011 03:03
[CSS教學] - CSS實現水平垂直居中的區塊
透過 css 設定可以讓區塊水平垂直居中在網頁
CSS CODE:
<style type="text/css">
#div {
position:absolute;
height:200px; width:400px;
margin:-100px 0px 0px -200px;
top: 50%;left: 50%;
text-align: left;
background-color: #efefef;
border: 1px dotted #999;
overflow: auto;
}
< /style>
- Jul 23 Sat 2011 02:27
[CSS教學] - 區塊內文字斷行設定:強迫斷行、一般斷行
1.依照區塊大小強制段行,但會截斷英文單字 word-break: break-all;
| CODE : |
<div style="width: 200px; word-break: break-all;"> 文字內容 </div> |
2.依照區塊大小強制段行,不會截斷英文單字 word-break: normal;
- Jun 29 Wed 2011 02:37
[CSS教學] - 如何使用CSS設計細框線Table表格
- Feb 26 Sat 2011 03:05
DIV+CSS 簡單實現仿Facebook固定底部漂浮導航
