一、請先學會基本功：排隊．請編輯元素一個接著一個出場：easy jQuery
二、本單元著重在應用 1px 技法：讓空白版面消失。1px技法css: style="width: 1px; height: 1px;"
【click the picture ↓】
|
這是超甜的鳳梨！
黃澄澄的顏色保證，好吃！ ★
原產地是台南關廟。
團購超搶手。 電話：#0028888888 
▼ 我削得超漂亮的 ▼ |
jQuery 程式碼（請放於body之後）：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
互動驅動程式 （請放於body之後）：
<script>
$(function() {
var flag = 'a0608';
$('#a010608').click(function() {
if(flag == 'a0608') {
$('#b010608').delay(0).show('slide', {direction: 'right'}, 800);
$('#b020608').delay(400).show('slide', {direction: 'left'}, 800);
$('#b030608').delay(1300).show('slide', {direction: 'up'}, 800);
flag = 'b0608';
}
else {
$('#b010608, #b020608, #b030608').hide();
flag = 'a0608';
}
});
});
</script>
CSS 文字語法：
<style>
/* 基本黑體內文（粗）：置中*/
.ironcontentbo0601 {
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: bold;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}
/* 基本黑體內文 （粗）：靠右*/
.ironcontentbo060102 {
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: bold;
line-height: 1.8;
text-align: right;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}
/* div消失 */
.displano {
display: none;
}
</style>
影音教學：