title: 中興資訊社 社課 HTML & Bootstrap author: PastLeo & 杜杰
%%%%%%%%%%%%%%%%%%% % Use '%' to comment or directive (ex:css below)
%%%%%%%%%%%%%%%%%%% %% Add some inline style rules...
%css
.slogen_with_pic h2 { margin-top: 10%; }
.bigger_h2 h2 { margin-top: 15%; font-size: 3.5em; }
%end
%%%%%%%%%%%%%%%%%%% %% occupation of scale=1: %% x = 1200 %% y = 700 %% occupation of scale=2: [occupation of scale=1] * 2 %% x = 2400 %% y = 1400 %% occupation of scale=3: [occupation of scale=1] * 3 %% x = 3600 %% y = 2100 %% occupation of scale=4: [occupation of scale=1] * 4 %% ... %% the location of one step (slide) is originated from the center!
%% !SLIDE x=7500 y=-6000 z=-100 rotate=60 rotate-x=90 rotate-y=90 rotate-z=90 scale=2
%%%%%%%%%%%%%%%%%%% %% Here we go...
%%%%%%%%%%%%%%% !SLIDE x=0 y=0 scale=10
%%%%%%%%%%%%%%% !SLIDE x=0 y=-7000 scale=10
%%%%%%%%%%%%%%% !SLIDE center slogen_with_pic x=-3000 y=-4750 scale=2
%%%%%%%%%%%%%%% !SLIDE center slogen_with_pic x=0 y=-4750 scale=2
%%%%%%%%%%%%%%% !SLIDE center slogen_with_pic x=3000 y=-4750 scale=2
%%%%%%%%%%%%%%% !SLIDE unclickable x=0 y=-7000 scale=10
%%%%%%%%%%%%%%% !SLIDE center x=-12000 y=-7000 scale=10
%%%%%%%%%%%%%%% !SLIDE center x=-7700 y=-9500 scale=4
%%%%%%%%%%%%%%% !SLIDE bigger_h2 x=-7700 y=-7300 scale=4
%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center x=-7700 y=-7300 z=1600 rotate-x=-90 rotate-y=180 scale=4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title!</title>
</head>
<body>
<!-- Contents here ... I am comment! -->
</body>
</html>
%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5500 scale=4
%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5100 z=1000 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5100 z=700 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5100 z=400 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5100 z=100 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-9500 scale=4
%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-8200 scale=4
%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-8800 z=700 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-8800 z=400 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-8800 z=100 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE bigger_h2 x=-16300 y=-6500 scale=4
%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center x=-16300 y=-6500 z=1600 rotate-x=-90 scale=4
<table>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
</tr>
</table>
%%%%%%%%%%%%%%% !SLIDE bigger_h2 x=-16300 y=-4400 scale=4
%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center x=-16300 y=-4400 z=1600 rotate-x=-90 scale=4
<ul> <!-- unsorted list -->
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ol> <!-- ordered list -->
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
%%%%%%%%%%%%%%% !SLIDE unclickable center x=-12000 y=-7000 scale=10
%%%%%%%%%%%%%%% !SLIDE center x=-12000 y=-7000 z=-12500 scale=10
HTML5 的 Tag 多到說不完
%%%%%%%%%%%%%%% !SLIDE center x=12000 y=-7000 scale=10
%%%%%%%%%%%%%%% !SLIDE x=16300 y=-9500 scale=4
%%%%%%%%%%%%%%% !SLIDE x=16300 y=-10100 z=1800 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=16300 y=-10100 z=1200 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=16300 y=-10100 z=600 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE unclickable x=16300 y=-9800 z=600 rotate-x=-45 scale=4
%%%%%%%%%%%%%%% !SLIDE x=16300 y=-7700 scale=4
%%%%%%%%%%%%%%% !SLIDE slogen_with_pic x=16300 y=-5900 scale=4
background : [ color ] [ image-url ] [ repeat ] [ attachment ] [ position-x ] [ position-y ];
background : image-url [ repeat ] [ attachment ] [ position-x ] [ position-y ] [, image-url ...];
%%%%%%%%%%%%%%% !SLIDE center x=16300 y=-4100 scale=4
%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center slide x=16300 y=-4000 z=1600 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=16300 y=-3400 scale=4
%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center slide x=16300 y=-3400 z=1600 rotate-x=-90 scale=4
static
(default): 就是原本的樣子,這時候上下左右是沒用的absolute
: 由 上下左右 絕對定位 於 上個有設定定位的元件fixed
: 由 上下左右 絕對定位 於 viewportrelative
: 由 上下左右 偏移原本的位置
%%%%%%%%%%%%%%% !SLIDE center x=7700 y=-9500 scale=4
%%%%%%%%%%%%%%% !SLIDE center x=7700 y=-7800 scale=4
%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=1300 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=1000 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=400 rotate-x=-90 scale=4
%%%%%%%%%%%%%%% !SLIDE center x=7700 y=-6500 scale=4
%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=-400 rotate-x=-90 scale=4 rotate-y=180
%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=-1000 rotate-x=-90 scale=4 rotate-y=180
%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=-1600 rotate-x=-90 scale=4 rotate-y=180
%%%%%%%%%%%%%%% !SLIDE x=7700 y=-6500 scale=4
%%%%%%%%%%%%%%% !SLIDE center x=7700 y=-4700 scale=4
%%%%%%%%%%%%%%% !SLIDE unclickable x=12000 y=-7000 scale=10
%%%%%%%%%%%%%%% !SLIDE picture center x=0 y=7000 scale=10
%%%%%%%%%%%%%%% !SLIDE picture center x=0 y=7000 z=-12500 scale=10
%%%%%%%%%%%% % image or resource source: % photos? http://www.zclub.com.tw/discuz/thread-113245-1-1.html (http://www.zclub.com.tw/discuz/data/attachment/forum/201204/29/135319ssnfgsvvsnsykosi.jpg) % cross platform http://designli.co/blog/its-time-to-go-cross-platform/ % html5 https://commons.wikimedia.org/wiki/File:HTML5_logo_and_wordmark.svg % green cat http://www.dailymail.co.uk/news/article-2871954/So-hiding-field-long-grass-Bulgaria-s-mysterious-green-cat-returns-vanishing-three-days.html % treasure http://bbs.comic.qq.com/thread-123475-1-1.html % CSS3 http://logonoid.com/css3-logo/ % web stack http://blog.teamtreehouse.com/progressive-enhancement-past-present-future