Microsoft Word - Chap04.doc

Size: px
Start display at page:

Download "Microsoft Word - Chap04.doc"

Transcription

1 CSS 樣式與 HTML5 我們將融合前面兩章的內容, 為 HTML5 網頁搭配 CSS 設計樣式 本章的結果可能因為您的瀏覽器 ( 廠商 ) 或是版本新舊而有差異, 建議您使用新版瀏覽器來觀賞, 本文撰寫時的瀏覽器為 IE 11 與 Chrome 32.0.x 版 ( 註解 : 本書後續還有一章專門介紹新版的 CSS3) 圖 4-1 CSS 與 HTML5 標籤 ( 元素 ) 的對應 4-1 字體,fonts 我們可以針對字體的 字型 (font-family) 大小(font-size) 樣式(font-style) 寬度(font-weight) 這些屬性(Property) 進行設計

2 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 字型 (font-family): 可以一次設定多個字型, 把您想呈現的字型放在前面, 如果找不到此字型就會使用下一個 倘若您完全不設定就會沿用使用者電腦上的預設字型 以下三種寫法都可以 詳見範例 CSS04_01.html font-family : Arial, Candara, Verdana, sans-serif; font-family : Georgia, Corbel, "Times New Roman", serif; font-family : Consolas, "Courier New", monospaced; 圖 4-2 字型 (font-family) 會用到的字型, 您可以在 Word 軟體裡面找到字體名稱, 或是在 Windows 控制台 裡面的 字型 找到 4-2

3 CSS 樣式與 HTML5 Chapter 4 圖 4-3 範例 CSS04_01.html 執行成果, 字型 (font-family) 大小 (font-size): 字體大小有三種表示方法, 像素 (pixel) 通常以 px 為單位, 用來表示螢幕上的字體大小 也可以使用 百分比 (%) 或是 em 為單位 詳見範例 CSS04_02.html font-size : 16px; font-size : 150%; /* 字體比平常大 1.5 倍 寫成 150% */ font-size : 1em; /* 1em = 網頁的基礎字體大小, 通常是 16px */ 也可以搭配 xx-large( 特大字 ) x-large large medium ( 一般大小 ) small x-small 和 xx-small( 特小字 ) 改變字體的大小 4-3

4 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-4 範例 CSS04_02.html 執行成果, 字體大小 (font-size) 這裡要提到絕對單位與相對單位兩者的差異 : 絕對單位, 包含了 in( 英吋 ) cm( 公分 ) mm( 公釐 ) ( 英磅, 一磅等於 1/72 英吋 ) pc(oica, 一個 pica 等於 12 英磅 ) 絕對單位, 就是上面介紹的 em px( 像素,pixel) %( 百分比 ), 還有 ex( 字體的 x-height 通常是 font-size 的一半 ) 與 rem 樣式 (font-style): 可以寫成 normal( 正常字, 預設值就不用寫 ) 斜體 (italic) 或是 oblique font-style : italic; 圖 4-5 三種字體樣式 (font-style) 4-4

5 CSS 樣式與 HTML5 Chapter 4 寬度 (font-weight): 寫法如下 詳見範例 CSS04_03.html font-weight : bold; font-weight : normal; /* 厚 (bold 粗 ) 更厚 (bolder) 正常 (normal)*/ font-weight : 800; /* 數字共有九組 從 ( 最厚 )*/ 圖 4-6 範例 CSS04_03.html 執行成果, 兩種不同的寫法, 但成果相同 ( 上面的第一種寫法是縮寫 ) 行列高度 (line-height): 段落之間的高度, 寫法如下 詳見範例 CSS04_04.html line-height : normal; line-height : 250%; line-height : 80px; 4-5

6 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-7 範例 CSS04_04.html 執行成果, 兩種不同的寫法, 但成果相同 ( 上面的第一種寫法是縮寫 ) 出個題目考考您 : <span id="myspan1" class="redtext">hello!</span>, 想要做到 : 這段 HTML 標籤裡面的 字 是紅色的 該撰寫哪一個 CSS 來表示? 參考解答 ( 兩者都正確 ): span#myspan1 { color:red; } 或是.redText { color:red; } 4-6

7 CSS 樣式與 HTML5 Chapter 色彩 (color) 與透明度 (opacity) 不管是字體的顏色或是顏色的透明度, 都直接影響了網頁的設計與美感 本章範例檔 色彩表_HEX_RGB.html 有完整列表 色彩 (color) 可以有三種寫法 第一種是 147 種事先定義好 對應常用英文單字的顏色, 例如 red green blue 等 第二種, 十六進位 Hex 前面請加上 # 符號 十進位的 RGB 則寫成 rgb( 號碼 1, 號碼 2, 號碼 3) 舉例來說, 藍色也可以細分成 navy( 海軍藍, 也可寫成 Hex: # 以及 RGB(0, 0, 128)) darkblue( 深藍, 也可寫成 Hex: #00008B 以及 RGB(0, 0, 139)) 詳見下面範例 CSS04_05.html: color : olive; /* 橄欖綠 */ color : #808000; /* 十六進位, 前面請加上 # 符號 */ color : rgb(128, 128, 0); /* 十進位的表示法 */ /* 請參閱本章範例檔 : 色彩表 _HEX_RGB.html 或是 Color_ 顏色表.html 有完整列表 */ 圖 4-8 範例 CSS04_05.html 執行成果, 色彩 (color) 的寫法採用 256 色的常用英文單字 4-7

8 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-9 基本色彩名稱 HEX( 十六進位 ) 與 RGB( 十進位 ) 編碼 資料來源 : 透明度 (opacity), 數值從 0.0( 顏色很淡, 幾乎看不到 )~1.0( 正常顏色 ) 請看下圖與範例 CSS04_06.html 的解說 opacity: 0.8; /* 從 0.0 ~ 1.0, 數字越大, 顏色越深!*/ filter:alpha(opacity=60); /* IE8 與更早期版本的寫法 */ 圖 4-10 範例 CSS04_06.html 執行成果, 色彩 (color) 的透明度, 數字越小越透明 4-8

9 CSS 樣式與 HTML5 Chapter 印刷 (Typographic) 屬性 這是認證考試的重點! 死背也得記下來! 您可以在這一節學到行列高度 (line-height, 段落之間的距離 ) 對落對齊(alignment) 等等的 CSS 屬性 letter-spacing: 文字段落之中, 每個字元之間的距離, 您可以增加也能減少, 單位是 em 或 px 等等 預設的狀態下, 跟您在前一節設定的 font-size 有關連 letter-spacing: 2em; letter-spacing: -3px; /* 減少字元間距 */ line-height : 段落之間的高度, 寫法如下 詳見上一節範例 CSS04_04.html line-height : normal; line-height : 250%; line-height : 80px; text-align: 對齊方向, 例如 : 置中 (center) 靠右(right) 靠左(left) 等等 詳見範例 CSS04_07_TextAlign.html text-align : justify; /* 左右兩側對齊 */ 圖 4-11 以 Word 為例,text-align:justify 如同圖片裡的 左右對齊 text-decoration: 例如文字下方出現底線 (underline) 的效果, 當您撰寫這個屬性,Visual Studio 會自動出現相關的值讓您挑選, 所以不用死背 詳見下圖成果與範例 CSS04_08_TextDecoration.html 4-9

10 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-12 當您撰寫 CSS 屬性時,Visual Studio 自動出現 值 與 簡易說明 讓您挑選 inherit 表示從父元素繼承 text-decoration 的設定值 圖 4-13 範例 CSS04_08_TextDecoration.html 執行成果 text-transform: 文字大小寫, 例如 none( 預設值 ) capitalize( 每個單字的字首都以大寫呈現 ) uppercase( 強制改成英文大寫 ) 與 lowercase ( 強制改成英文小寫 ),inherit 表示從父元素繼承 text-transform 的設定值 詳見下圖成果與範例 CSS04_09_ TextTransform.html 這是認證考試的重點! 死背也得記下來! 4-10

11 CSS 樣式與 HTML5 Chapter 4 圖 4-14 範例 CSS04_09_TextTransform.html 執行成果 注意看 HTML 碼的文字大小寫, 執行後會被修改 text-transform 與 text-shadow 兩者是考試的重點, 題庫與考題經常出現, 提醒您多加注意!! 出個題目考考您 : 畫面上想加入一個陰影 (drop shadow) 在文字下方一英吋的地方 而且設定陰影的圓角 (radius) 為 5 px 以下答案何者為真? ( 這題滿常考的, 出現機率頗高!) (1) text-shadow : 5px 1in 0px( 正確解答 ) (2) text-shadow : 5px 1in 5px (3) text-decoration : 5in 1in 5px (4) text-dropshadow : 5em 1in 0px (5) text-transform : 5pt 1in 5em 出個題目考考您 : text-transform 屬性裡面, 哪個值才是對的? ( 微軟考試裡面常出現這種題目, 利用同義的英文詞彙讓您混淆, 在英文裡面或許意思相同, 但在 HTML 或是 CSS 裡面沒有這些屬性, 故意讓您選錯 ) 4-11

12 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 (1) capitalize( 正確解答, 只有字首以 大寫 來表示 ) (2) capital (3) uppercase( 全部改成大寫字母, 請瞭解 uppercase 與 capitalize 的差異 ) (4) UpperFirst (5) FirstWordUpper 出個題目考考您 : text-transform 屬性裡面, 哪個值才是對的? (1) Lowercase( 正確解答, 以 小寫 來表示 ) (2) Blink (3) Upperword (4) Line-through (5) 25px 出個題目考考您 : 下列的 CSS 會呈現出什麼效果, 哪個選項是對的? table { border:2px solid black; font-family: Tahoma; } tr:nth-child(odd) { background-color: green } tr td:nth-ofotype(evan) { background-color: blue } (1) Table 表格的第一列, 底色是綠色 ( 正確解答 ) (2) Table 裡面的字體 ( 字型 ) 是 Arial, 格線 ( 框線 ) 是 2px (3) 表格 第三列 裡的第一個格子, 背景顏色是藍色 (4) 表格 第三列 裡的第二個格子, 背景顏色 不是 藍色 (5) 表格 第三列 裡的第二個格子, 背景顏色是藍色 ( 正確解答 ) 4-12

13 CSS 樣式與 HTML5 Chapter CSS 排版觀念與 Box Model 此為認證考試重點! 中間的 Content( 內容 ) 通常是我們擺放的文字與圖片, 這才是重點! 而外圍的 Padding( 內邊界 留白 ) Border( 邊框 邊線 ) 與 Margin( 外邊界 ) 則是我們為了美觀而加入的排版效果 圖 4-15 CSS Box Model, 資料來源 : 網路上有幾張圖片更能表達 CSS Box Model 的含意, 這些圖片更清楚 圖片來源與出處均標示在圖片下方 圖 4-16 CSS Box Model 立體示意圖, 資料來源 : 4-13

14 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-17 CSS Box Model, 資料來源 : padding 與 margin 的設定比較特別, 他們倆者的用法一樣 如果您寫 padding: 10px;( 或是寫 margin 也一樣 ) 就代表四周的距離都是 10px 如果您寫了四個值, 代表的順序是 上 右 下 左 四個位置, 請不要搞錯喔! 第一種寫法 : padding: 10px 11px 12 px 13px; /* 如果寫四個值, 順序是 上 右 下 左 四個位置 */ 第二種寫法 : padding-top: 10px; /* 順序是 上 右 下 左 */ padding-right : 11px; padding-bottom : 12px; padding-left : 13px; 上 右 下 左 這四個屬性不難記, 請記住關鍵字 TRouBLe( 英文單字, 麻煩 ) 就能想起 Top( 上 ) Right( 右 ) Bottom( 下 ) 與 Left ( 左 ) 四個關鍵字, 是不是很簡單呢? 或是請您以 順時針 的方向來記憶也行 設定值與呈現結果的差異 當我們設計了下面的樣式, 其實 呈現出來的 Box" 寬度 " 等於 280px 而非您定義的 250px, 這是為什麼呢? 4-14

15 CSS 樣式與 HTML5 Chapter 4 width:250px; padding:10px; border:5px solid gray; margin:10px; /* 設定為 auto, 代表上右下左都會置中對齊 */ /* margin 的寬度不包含在內 */ 280px 因為要加上左右兩邊的 padding border 的寬度 所以計算後的寬度為 250px (width) + 20px ( 左右兩邊的 padding 寬度,10 x 2) + 10px ( 左右兩邊的 border 寬度,5 x 2) margin 的寬度不包含在內 ( 左右兩邊的 margin 寬度,10 x 2) = 280px 圖 4-18 本例的 Box Model 個別寬度與總寬度 下圖可以看見 padding border 兩者不光是左右兩側的 寬度 而已, 也包含上下的 高度 請您特別注意! 4-15

16 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-19 CSS Box Model 除了左右兩側的 寬度 也包含上下的 高度 資料來源 : Case Study 實際做一個例子會更有感覺, 請看範例 CSS04_10_BoxModel.html 圖片原始大小為 100x132 經過我們設計之後,Box Model 排版效果如下圖 <head> <style> div.ex { width: 220px; padding: 10px; border: 5px solid gray; margin: 0px; } </style> </head> <body> <img src="w3css.gif" width="250" height="250"> <div class="ex"> The picture above is 250px wide. The total width of this element is also 250px. </div> </body> 4-16

17 CSS 樣式與 HTML5 Chapter 4 瀏覽器裡面都有針對網頁設計師提供好用的觀察工具 : 以 IE 瀏覽器來觀看網頁, 請按下 F12 按鈕便能啟動 Developer 工具 使用 Chrome 瀏覽器檢視網頁, 在畫面 ( 網頁成果 ) 中點選 滑鼠右鍵 並選擇 檢查元素 可以看到下方的 Box Model 解析圖 從下圖的執行結果可以看見,<div> 的文字部分沿用了我們定義的 Box Model 而出現 padding 與 border 的寬度 雖然文字內容 (content) 只有 220px 寬, 但呈現的結果會加上左右兩側的 padding(10px X 2 = 20px 寬度 ) 與 border(5px X 2 = 10px 寬度 ), 最後呈現出來的 Box 寬度是 = 250px(margin 的寬度不包含在內 ) 圖 4-20 範例 CSS04_10_BoxModel.html 將圖片加上 Box Model 以後出現 padding border 等等 Collapsing margins 與設定負值 如果您有兩個 Box 相連在一起 ( 不管是上下相連或是左右相連 ), 兩者都設定 margin:10px 其實這兩個 Box 的 間隔 只有一個 margin(10px, 取兩者 margin 最大值 ) 而非兩者的 margin 的總和 (10px X 2) 都算在內 4-17

18 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 這種情況稱為 Collapsing( 折疊 崩壞 )margins, 如下圖所示, 請您動手看範例 CSS04_10_BoxModel.html 並仔細體會 圖 4-21 Collapsing margins, 上下兩個 Box,<div class="ex"> 其間的 margin 有重疊, 共用 10px 的間距 ( 取兩者 margin 最大值 ) 而非 20px(10px X 2) 提醒您,margin 可以設定 負值, 讓多個 Box 的邊界可以彼此重疊在一起 但是 padding 就不允許負值 請留意 請看範例 CSS04_10_ BoxModel_Margin.html, 成果如下圖 圖 4-22 margin 設定 負值, 讓多個 Box 邊界彼此重疊 4-18

19 CSS 樣式與 HTML5 Chapter padding border 與 margin 四周設定值 上 右 下 左 瞭解上面 Box Model 的觀念以後, 我們實際設定 padding border 與 margin 上右下左 的設定值 以範例 CSS04_11.html 說明如下 : <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <style> h2.highlight { height: 100px; width: 500px; /* 主要內容 (Content) 的大小 */ padding: 10px; border: 2px dotted blue; /* 虛線 藍色 */ margin: 25px 0 25px 0; /* 也可以簡單寫成 25px 0 即可 */ } </style> </head> <body> <h2 class="highlight"> 您好, 這是一個 Box Model 範例!</h2> </body> </html> IE 瀏覽器的用戶可以按下 F12 按鈕, 而 Chrome 瀏覽器在畫面 ( 網頁成果 ) 中點選 滑鼠右鍵 並選擇 檢查元素 可以看到下方的 Box Model 解析圖 4-19

20 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-23 範例 CSS04_11.html 執行結果與 IE 瀏覽器的 Box Model 解析圖, 請按下 F12 按鈕 4-20

21 CSS 樣式與 HTML5 Chapter 4 圖 4-24 範例 CSS04_11.html 執行結果與 Chrome 瀏覽器的 Box Model 解析圖 點選 滑鼠右鍵 並選擇 檢查元素 便能看見 當然, 您也可以逐一設定 padding border 與 margin 四周 上 右 下 左 的設定值 這四個屬性不難記, 請記住關鍵字 TRouBLe( 英文單字, 麻煩 ) 就能想起 Top( 上 ) Right( 右 ) Bottom( 下 ) 與 Left( 左 ) 四個關鍵字, 或是請您以 順時針 的方向來記憶也行 padding-top: 10px; padding-right : 10px; padding-bottom : 10px; padding-left : 10px; /* padding 不可以有負值 */ 4-21

22 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 Border ( 框線 ) 可以設定的東西更多了, 您可以參閱前面的範例 CSS04_08_TextDecoration.html( 如下圖 ), 使用已經學習過的 text-decoration 的設定值 border-width: 2px; border-style: dotted; /* 虛線 可參閱下圖 text-decoration 的設定值 */ border-color: blue; 圖 4-25 範例 CSS04_08_TextDecoration.html 執行成果 Content( 內容 ) 的其他設定 Box Model 的內容 (Content) 還有其他的設定可以用來凸顯資訊, 建議您參閱 CSS 的書籍以獲得更進一步的資訊, 以下僅是簡單介紹 : visibility 屬性可以搭配 visible( 此為預設值 ) 與 hidden( 隱藏 看不見 ) display 屬性可讓您設定如何顯示在頁面上的元素 這包括 隱藏 所選擇的元素, 或完全從頁面 移除 它們 範例 CSS04_13_DisplayNone.html 將會解釋兩者差異 :visibility:hidden 與 display:none( 文字與格子都在表格內消失了 ) 4-22

23 CSS 樣式與 HTML5 Chapter 4 圖 4-26 範例 CSS04_13_DisplayNone.html 展示 visibility:hidden 與 display:none 這兩者的差異 下圖的範例 CSS04_14_DisplayBlock.html 展示三種 display 的設定值 重點! 這裡是常見的出題範圍 Inline, 此為預設值 none, 這一段文字在畫面 ( 瀏覽器 ) 會消失 請比對上圖 ( 上一個範例 ) 更能瞭解 block, 會有分行 換行 ( 換段落 ) 的符號加入 4-23

24 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-27 範例 CSS04_14_DisplayBlock.html 展示三種 display 的設定值 出個題目考考您 : 下圖的排版原來是左上方的樣子, 如何改成圖片右下方的樣式呢? 請問您要撰寫的 CSS 碼為何?( 微軟考試會用選擇題的方式, 列出幾個答案讓您選擇, 比較不會讓您自己打字 寫程式碼 ) 圖 4-28 請把原本的 CSS 排版, 改成圖片右側的樣式 參考答案為 ( 這類的題目滿常見, 會出現好幾題 ): document.getelementbuid("mylogo").style.display = "inline"; 4-24

25 CSS 樣式與 HTML5 Chapter 4 position 屬性使您能夠設置定位方法 這是常考的重點!! 四種值是 static( 靜態, 此為預設值 )fixed( 固定的 ) absolute( 絕對的 ) 與 relative( 相對的 ) 請參閱範例 CSS04_15_Position.html 這是常考的重點!! 出個題目考考您 : 網頁上要放入一個 Logo 圖案, 比網頁上沿還要 低 往下 5 pixels, 請問您要撰寫的 CSS 碼為何?( 微軟考試會用選擇題的方式, 列出幾個答案讓您選擇, 比較不會讓您自己打字 寫程式碼 ) HTML 網頁上已經有 : <div> LOGO : <br /> <div id="mylogo"></div> </div> 參考答案為 ( 這類的題目滿常見, 尤其是 relative 關鍵字 ): document.getelementbuid("mylogo").style.position = "relative"; document.getelementbuid("mylogo").style.top = "5px"; 出個題目考考您 : 網頁上有一段 HTML( 如下 ), 想要把 inner 段落固定在距離左上角 15px 的位置, 您該使用 position 的哪個值來做? HTML 網頁上已經有 : <div id="outter" style="position:relative"> <p id="inner"> </p> </div> 參考答案為 : (1) relative (4) static (2) absolute( 正確解答 ) (5) share (3) fixed 4-25

26 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 float 屬性使您能夠選擇的元素出來的內容流, 並讓它們 浮動 在包含元素的左側或右側 請參閱範例 CSS04_15_Float.html 圖 4-29 範例 CSS04_15_Float.html 使用 float:right 的成果 圖片會 漂浮 在文字右側 圖 4-30 透過 IE 瀏覽器的 F12 按鈕看得更清楚, 圖片 <img> 的確是 漂浮 在文字段落之上, 並且靠右對齊 4-26

27 CSS 樣式與 HTML5 Chapter 4 overflow 屬性, 當元素的內容 ( 文字 ) 太大 ( 大於 box 時 ) 會如何處置 設定為 scroll 時候, 資料量太大就會出現 Scroll Bar 讓您拉動 ( 如下圖, 範例 CSS04_17_Overflow.html) 圖 4-31 範例 CSS04_17_Overflow.html, 設定 overflow:scroll 之後, 資料量太大時這區塊就出現 Scroll Bar box-sizing 屬性, 可以設置任一元素 Box Model 的 width 和 height 屬性 設為 content-box( 此為預設值 ) 會如文章前面所述的運作 設為 border-box, 那麼 width 和 height 屬性適用於 content padding border 與 margin 全部統合在一起 ( 詳見範例 CSS04_18_ BoxSizing.html) 4-27

28 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-32 範例 CSS04_18_BoxSizing.html, 設定 box-sizing: border-box 4-5 背景 (Background) 很多網頁都有背景顏色 背景圖片等等, 本節要介紹的就是 CSS 的背景 (background) 設定 background-image, 背景圖片 通常使用 url(' 圖片的網址或是存放的目錄與檔名 ') background-image:url('../images/pattern.jpg'); /* url 可以寫上網址.. 符號代表網站的 上一層 目錄 */ background-image:url('logo.jpg'); /* 圖片與網頁在同一個目錄下, 只需寫上圖片檔名即可目錄 */ 4-28

29 CSS 樣式與 HTML5 Chapter 4 background-size, 背景大小 可以使用 px( 像素 ) 為單位或是百分比 (%) background-size: 40px 60px; /* 第一個是 寬度 (width), 第二個是 高度 (height) */ background-color, 背景顏色 使用常見的英文單字代表顏色 HEX 或是 RGB 編碼 本章前面 4-2 節 色彩 (color) 與透明度 (opacity) 已經介紹過, 可參閱範例 色彩表 _HEX_RGB.html 的完整列表 以下列出三原色的基本寫法, 供您參考 英文單字 ( 顏色 ): 紅色 red 綠色 green 藍色 blue HEX 十六進位 : 紅色 #ff0000 綠色 #00ff00 藍色 #0000ff RGB 十進位 : 紅色 rgb(255,0,0) 綠色 rgb(0,255,0) 藍色 rgb(0,0,255) background-color : green; background-color : #00FF00; /* HEX 顏色編碼 */ background-color : rgb(0, 255, 0); /* RGB 顏色編碼 */ background-color : transparent; /* 透明 */ 另外還有新的 RGBA HSL HSLA 三種新的顏色表示法, 唯有新版瀏覽器才支援, 所以僅供參考 ( 微軟 MOA 教材沒有提到這部分 ) RGBA 有四碼, 前三碼跟 RGB 一樣, 第四個參數是 opacity 透明度 ( 可寫成 0.0 透明 ~ 1.0 代表完全不透明 ) HSL 有三碼, 分別是 hue saturation 與 lightness( 色相 飽和度 亮度 ), 第一個 hue 代表色輪 (color wheel) 的角度, 從 0~360 0 或 360 代表紅色,120 是綠色,240 是藍色 第二個是飽和度的百分比 (%), 從 0%( 灰階 ) 到 100%( 全彩 ) 第三個是亮度, 從 0% ( 黑 ) 到 100%( 白 ) HSL 的三原色分別是 : 紅色 (0, 1, 0.5) 綠色(0, 1, 0.5) 藍色 (240, 1, 0.25) HSLA 有四碼, 前三碼是上面介紹過的 HSL, 第四碼是 opacity 透明度 ( 可寫成 0.0 透明 ~ 1.0 代表完全不透明 ) 4-29

30 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-33 色輪 (color wheel) 與 HSL 顏色碼 hue saturation 與 lightness( 色相 飽和度 亮度 ) ( 圖片來源 :wiki 維基百科 ) background-position, 背景位置 第一個參數是水平 (horizontal position), 第二個是垂直 (vertical) 可以使用絕對值(absolute value, 如 top bottom left right center) px( 像素 ) 或是百分比 (%) background-position : left top; /* 把圖片鎖定在左上方 */ background-position : 100% 100%; background-position : 8px 8px; /* 圖片鎖定在左邊 8px 上方 8px 的位置 */ background-repeat, 背景圖片可以重複出現 如果背景圖片較小, 您需要它重複出現以填滿整個畫面 可以設為 repeat( 此為預設值, 重複出現並填滿畫面 ) repeat-x( 橫向填滿 左右填滿 ) repeat-y( 直式填滿 上下填滿 ) 或是 no-repeat( 不填滿 ) 詳見範例 CSS04_19_ background-repeat.html background-repeat : repeat-x; /* 橫向填滿 左右填滿 */ background-repeat : no-repeat; /* 不填滿, 以圖片原始大小來呈現 */ 4-30

31 CSS 樣式與 HTML5 Chapter 4 圖 4-34 範例 CSS04_19_background-repeat.html, 設定 background-repeat : repeat; 背景圖片重複填滿整個網頁 background-origin, 背景位置 這是 CSS3 新推出的功能, 比較新的瀏覽器才能展示這個效果 可以設定為 content-box( 此為預設值, 詳見下頁上圖 ) padding-box( 如下頁下圖 ) 以及 border-box 您務必親自動手做並修改這個範例才能體會, 請看檔案 CSS04_20_backgroundorigin.html 與下圖的執行成果 background-origin : content-box; 4-31

32 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 圖 4-35 範例 CSS04_20_background-origin.html, 設定 background-origin : content-box; 圖 4-36 範例 CSS04_20_background-origin.html, 設定 background-origin : padding-box; 4-32

33 CSS 樣式與 HTML5 Chapter 4 background-attachment, 背景圖是否隨著 Scroll Bar 的上下拉扯而滾動? 預設值為 scroll( 背景圖固定在同一位置, 不移動 ), 也可以改成 fixed 這是認證考試重點! 這裡的文字說明容易引起誤解, 建議您親自觀看範例的成果, 詳見範例 CSS04_21_background-attachment.html background- attachment : fixed; /* 文字太多時, 感覺 背景圖會隨之上下滾動 因為背景圖片永遠 固定 在那個角落 ( 位置 ) 上 */ 圖 4-37 當您設定 background-position : fixed; 而文字太多時, 感覺背景圖會隨之上下滾動 因為背景圖片永遠固定在那個角落 ( 位置 ) 上 最後做一個總複習, 看看下面的設定, 您能說明這段 CSS 執行的成果嗎? article { background : transparent repeat-x url('logo.jpg'); } /* 上面第一種寫法, 縮寫 成果跟下面第二種寫法一樣 */ 4-33

34 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 article { background-color : transparent; background-repeat : repeat-x; background-image : url('logo.jpg'); } 考試的時候, 題目常常會出現 CSS 的考題 而且會故意混用各種屬性與數值, 讓您搞混 例如 :background- attachment : fixed; 與 backgroundposition : fixed; 如果您不小心就會搞錯, 後者是錯誤的! 出個題目考考您 : 下面何者 不是 Box Model 的屬性? (A) padding (B) style( 錯!) (C) Box( 錯!) (D) margin (E) content (F) border 出個題目考考您 : 下圖 ( 表格 ) 所呈現的外觀, 該撰寫哪一個 CSS 來表示? 參考解答 :( 微軟考試不會讓您撰寫程式, 而是提供多組程式碼讓您挑選其中一個 但會故意提供類似的答案讓您混淆 ) <style type="text/css"> #grid { display: -ms-grid; -ms-grid-columns: 100px 300px 100px 300px 100px; // 註解 : 這題要考您是不是看的懂 ms-grid-columns, 每個 格子 的間距大小 -ms-grid-rows: auto; // 為了混淆您, 這裡會出現類似的選項, 例如 ms-grid-rows: min-content; 請注意! 不要選到錯的 } </style> 4-34

35 CSS 樣式與 HTML5 Chapter 4 出個題目考考您 : 下面的 HTML 表格所呈現的外觀, 想要作到 : 標題 第一列 最後一列的 底色 是藍色 該撰寫哪一個 CSS 來表示? <table> <thead> <tr> <th> 產品標題 </th> </tr> </thead> <tbody> <tr> <td>asp.net 專題實務 </td> </tr> <tr> <td>asp.net Web Form</td> </tr> <tr> <td>html5 認證考試教材 </td> </tr> </tbody> </table> 參考解答 : tr:first-of-type, tr:last-of-type 出個題目考考您 : 下列的 HTML 碼與元素 ( 標籤 ) 想要幫每一個 <section> 裡面的第一個 <article> 加上背景顏色, 該怎麼做? <section id="news1"> <h1>html5 認證考試 </h1> <article>...</article> <article>...</article> </section> <section id= news2 > <h1> ASP.NET 專題實務 </h1> <article>...</article> <article>...</article> </section> 4-35

36 微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 認證教材 參考解答 : (1) $("section article:first-chold").css("background-color": "#EE11FF"); (2) $("section:first-child").css("background-color": "#EE11FF"); (3) $("article: first-of-type").css("background-color": "#EE11FF"); 正確解答 (4) $("section:first-of-type").css("background-color": "#EE11FF"); 4-36

5-1 nav css 5-2

5-1 nav css 5-2 5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

More information

week06.key

week06.key 基礎網 頁設計 第六週 老師 : 蔡孟珂 大綱 HTML 標籤屬性 DOM(Document Object Model) 文件物件模型 樹的概念 CSS 撰寫與常 用語法 HTML 標籤屬性 id 唯 一值 同 一份 html 中, 標籤裡不能有重複的 id 名稱 頁底資訊 1 連結

More information

Chapter V.S. PC

Chapter V.S. PC Chapter 14 14-1 V.S. PC 14-2 14-3 14-4 14-1 V.S. PC PC PC Yahoo! PC (https://tw.yahoo.com/) Yahoo! (https:// tw.mobi.yahoo.com/) Yahoo! a b a PC b PC PC Flash HTML5 CSS3 PC 14-2 14-3 PC PC Yahoo! PC https://tw.yahoo.com/

More information

HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS

HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS 12 Chapter 12-1 12-2 12-3 HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS 3 http://www.w3.org/tr/css3-color/ 12-1-1 color ( ) (foreground color)

More information

CU0594.pdf

CU0594.pdf 8 SOHO 1 3 003 SOHO SOHO Coder Programmer HTML CSS PHP JavaScrip 009 LECTURE 1-1 1 048 PART 2 LECTURE 1-1 1 049 SOHO Landing Page Landing 050 PART 2 LECTURE 1-1 1 SEO SEO P.093 SEO SEO SEO SEO SEO 051

More information

bootstrap - 2

bootstrap - 2 RITA TEACHING Bootstra p ENTER bootstrap - 2 bootstrap - 3 bootstrap 101 Template

More information

Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 (

Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 ( Stylin with CSS a Designer s Guide 2/e Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 (spacer GIF)

More information

投影片 1

投影片 1 Introduction to CSS Cascading Style Sheets 網頁設計 / 林金祥 Webpage Design/ by Chin-Hsiang Lin 網頁設計概念 java, asp: CSS: 特殊功能 式樣設計 HTML: 文字 圖像內容 Webpage Design/ by Chin-Hsiang Lin 2 CSS:Fly! My Webpage! CSS: Cascading

More information

05 01 accordion UI containers 03 Accordion accordion UI accordion 54

05 01 accordion UI containers 03 Accordion accordion UI accordion 54 jquery UI plugin Accordion 05 01 accordion UI containers 03 Accordion accordion UI accordion 54 05 jquery UI plugin 3-1

More information

<img>

<img> 04 圖片 4-1 4-2 4-3 4-4 網頁程式設計 4-1 網頁多媒體 Flash Java Applets HTML 8 4-1-1 圖片 JPEG Joint Photographic Experts Group 非失真模式 (lossless) 基本模式 (baseline standard) 1 2 12 JPEG 6 JPEG.jpg.jpe.jpeg GIF (graphic

More information

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2 HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /

More information

大漠 伪前端, 就职于淘宝

大漠 伪前端, 就职于淘宝 CSS Grid Layout 2016-12-17 @ 大漠. #CSSConf https://www.flickr.com/photos/19139526@n00/8331063530/ 大漠 伪前端, 就职于淘宝 古老的 table 布局 现代 Web 布局 Float inline-block display: table position (absolute 或 relative)

More information

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2.

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2. 2005-06 p.1 HTML HyperText Mark-up Language 1. HTML Logo, Pascal, C++, Java HTML 2. HTML (tag) 3. HTML 4. HTML 1. HTML 2. 3. FTP HTML HTML html 1. html html html cutehtmleasyhtml 2. wyswyg (What you see

More information

ebook37-4

ebook37-4 4 4.1 H T M L F r o n t P a g e i m a g e m a p H T M L We b We b 4.1.1 We b We b We b We b 4.1.2 We b 4 35 4.1.3 4-1 G I F 4-2 36 4-1 ( 4-2 ) 4.1.4 We b We b 4-3 4-3 4 37 Ly n x 4-4 4-4 4.1.5 We b We

More information

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4 JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling

More information

Microsoft Word - Ch06.docx

Microsoft Word - Ch06.docx Chapter 6-1 6-2 6-2 l ASP.NET 6-1 (theme) ASP.NET (skin).skin ButtonLabelHyperLink (cascading style sheet).css TreeView 1. 2. (page theme) (global theme) IIS l 6-3 6-1-1 (page theme) (global theme) App_Themes

More information

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript

More information

XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vsp

XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vsp XHTML CSS CSS CSS DOCTYPE Switch XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vspace big tabindex accesskey

More information

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt]

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt] HTML CSS / 2011 HTML CSS 1/ 47 1 2 HTML 3 4 HTML 5 5 : CSS 6 CSS 7 HTML CSS 2/ 47 HTML CSS 3/ 47 ( BOM) UTF-8 Notepad++ (Winodws), Fraise/Smultron (Mac), VIM ( ) HTML CSS 4/ 47 UTF-8? UTF-8 (unicode),

More information

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5 網頁程式設計 HTML JavaScript CSS HTML JavaScript CSS HTML 5 JavaScript JavaScript HTML 5 API CSS CSS Part 1 HTML HTML 5 API HTML 5 Apple QuickTime Adobe Flash RealPlayer Ajax XMLHttpRequest HTML 4.01 HTML 5

More information

投影片 1

投影片 1 CSS 的運用 Speaker:Kevin Yang Date:2007/3/10 何謂 CSS CSS 的全名是 Cascading Style Sheets( 串接樣式表 ) CSS 是用來延伸 html 而非取代 htnl, 是用來補 html 的不足 CSS 的特點 加快網頁傳輸的速度 : 減少圖檔的使用, 便可以達到文字變化的需求 集中管理樣式 : 當修改時只需針對樣式修改即可 共享樣式設定

More information

導讀 ASP.NET HTML ASP 第一篇 基礎篇第 1 章 認識 ASP.NET ASP.NET ASP.NET ASP.NET ASP.NET 第 2 章 認識 Visual Studio 20 開發環境 Visual Studio 20 Visual Studio 20 第二篇 C# 程式

導讀 ASP.NET HTML ASP 第一篇 基礎篇第 1 章 認識 ASP.NET ASP.NET ASP.NET ASP.NET ASP.NET 第 2 章 認識 Visual Studio 20 開發環境 Visual Studio 20 Visual Studio 20 第二篇 C# 程式 導讀 ASP.NET HTML ASP 第一篇 基礎篇第 1 章 認識 ASP.NET ASP.NET ASP.NET ASP.NET ASP.NET 第 2 章 認識 Visual Studio 20 開發環境 Visual Studio 20 Visual Studio 20 第二篇 C# 程式語言篇第 3 章 C# 程式語言基礎 C# C# 3.0 var 第 4 章 基本資料處理 C# x

More information

Microsoft Word - 改版式网页全文.doc

Microsoft Word - 改版式网页全文.doc 第 4 章 Dreamweaver CS3 高 级 篇 4.1 表 单 概 述 表 单 是 用 来 收 集 浏 览 者 的 用 户 名 密 码 E-mail 地 址 个 人 爱 好 和 联 系 地 址 等 用 户 信 息 的 输 入 区 域 集 合 浏 览 者 填 写 表 单 的 方 式 一 般 是 输 入 文 本 选 择 单 选 按 钮 或 复 选 框 以 及 从 下 拉 列 表 框 中 选 择

More information

WordPress OSSF OSSF is Seeking Software Freedom 1 blog WordPress WordPress WordPress WordPress 2 WordPress WordPress is a state-of-the-art semantic pe

WordPress OSSF OSSF is Seeking Software Freedom 1 blog WordPress WordPress WordPress WordPress 2 WordPress WordPress is a state-of-the-art semantic pe WordPress OSSF OSSF is Seeking Software Freedom 1 blog WordPress WordPress WordPress WordPress 2 WordPress WordPress is a state-of-the-art semantic personal publishing platform aesthetics web standards

More information

week04.key

week04.key 基礎網 頁設計 第四週 老師 : 蔡承洋 大綱 HTML 的圖片使 用 HTML5 播放 音樂 影片 網站加上 favicon DOM(Document Object Model) 文件物件模型 樹的概念念 開始來來寫 CSS CSS 常 用屬性 HTML 的圖片使 用 html 使 用 img 標籤顯 示圖片 圖片格式有 jpg : 不需 用到透明底, 檔案容量量 小 png: 可有透明底, 但檔案較

More information

Microsoft Word - 最新正文.doc

Microsoft Word - 最新正文.doc 2 2 Web 2.0 Ajax StarTrackr! GPS RFID jquery JavaScript StarTrackr! JavaScript jquery 1 jquery jquery jquery JavaScript HTML jquery JavaScript jquery jquery jquery $(document).ready()! jquery jquery (document)

More information

APA Preliminaries Text Reference 1. Cover Page 2. Title Page 3. Signature Page 4. Advisor s recommendation letter 5. Approval page 6. Copyri

APA Preliminaries Text Reference 1. Cover Page 2. Title Page 3. Signature Page 4. Advisor s recommendation letter 5. Approval page 6. Copyri 1 研究報告與論文的寫作格式 CHAPTER 1-1 1-2 專 題 研究報告, 乃至論文寫作都 有一定的標準與規範, 而寫作的 工具, 除了堪稱石器時代所用的筆與紙 外, 打字機及電動打字機仍是至今尚未完 消失的機具, 然而, 步入雲端世紀之後, 電腦文書處理的軟體早已是不可或缺的必備利器 這裡首推大家耳熟能詳的 Microsoft Word 1-2 1-2-2 APA Preliminaries

More information

CSS教學

CSS教學 講師 : 張秀山 CSS 說明 CSS 是 Cascading Style Sheets 的縮寫,Cascading 是串接 連接之意 ;Style 則是風格 款式之意 ; Sheets 則是一頁紙 表的意思 所以呢, 要以中文來解釋 CSS 的話呢, 您可以稱之為 串接樣式表 CSS 放在那裡? 網頁內 CSS 語法放在 之間! CSS 放在那裡?css 檔案 寫在一個

More information

chapter 2 HTML5 目錄iii HTML HTML HTML HTML HTML canvas

chapter 2 HTML5 目錄iii HTML HTML HTML HTML HTML canvas Contents 目錄 chapter 1 1-1... 1-2 1-2... 1-3 HTML5... 1-3... 1-5 1-3... 1-9 Web Storage... 1-9... 1-10 1-4 HTML5... 1-14... 1-14... 1-15 HTML5... 1-15... 1-15... 1-16 1-5... 1-18 Apps... 1-18 HTML5 Cache

More information

F477

F477 FrontPage & Flash 連 CSIE, NTU September 15, 2007 Outline September 15, 2007 Page 2 連 FrontPage September 15, 2007 Page 3 連 FTP Email FrontPage HTML tag September 15, 2007 Page 4 連 September

More information

css-03.pdf

css-03.pdf 3 71 7 2 r e d p u r p l e H1 {color: maroon;} H1 {color: gray;} H2 {color: silver;} H3 {color: black;} 7 3 H1 {color: orange;} H 1 o r a n g e 7 4 o r a n g e RGB rgb(100%,100%,100%) 7 5 0 % H1 {color:

More information

1. 2. Flex Adobe 3.

1. 2. Flex Adobe 3. 1. 2. Flex Adobe 3. Flex Adobe Flex Flex Web Flex Flex Flex Adobe Flash Player 9 /rich Internet applications/ria Flex 1. 2. 3. 4. 5. 6. SWF Flash Player Flex 1. Flex framework Adobe Flex 2 framework RIA

More information

吉安人事招聘网2012年江西省面向村干部招考300名公务员(2013年1月13日

吉安人事招聘网2012年江西省面向村干部招考300名公务员(2013年1月13日 吉 安 人 事 招 聘 网 2012 年 江 西 省 面 向 村 干 部 招 考 300 名 公 务 员 (20 1 月 13 日 www.hmkpk.com http://www.hmkpk.com 吉 安 人 事 招 聘 网 2012 年 江 西 省 面 向 村 干 部 招 考 300 名 公 务 员 (2013 年 1 月 13 日 为 从 基 层 和 临 盆 一 线 选 拔 出 色 群 众

More information

<4D6963726F736F667420576F7264202D20D6D0CEC4B7A88C57B454CABF8C57CEBBD593CEC4D28EB9A0>

<4D6963726F736F667420576F7264202D20D6D0CEC4B7A88C57B454CABF8C57CEBBD593CEC4D28EB9A0> 澳 門 大 學 法 學 院 中 文 法 學 碩 士 學 位 論 文 規 範 一 適 用 範 圍 ( 一 ) 中 文 法 學 碩 士 學 位 論 文 是 中 文 法 學 碩 士 學 位 研 究 生 在 指 導 教 師 的 指 導 下 獨 立 完 成 的, 合 乎 嚴 格 的 寫 作 規 範 並 標 誌 著 獲 得 法 學 碩 士 學 位 的 一 篇 書 面 作 品 中 文 法 學 碩 士 研 究 生

More information

第一章

第一章 第 二 章 建 築 研 究 與 分 析 第 二 章 建 築 研 究 與 分 析 第 一 節 清 代 科 舉 與 考 棚 建 築 一 科 舉 與 貢 院 建 築 清 代 政 府 拔 取 人 才, 大 體 延 續 明 代, 但 也 有 改 進 之 處, 例 如 詔 舉, 由 皇 帝 下 詔 徵 取 人 才 為 國 家 所 用, 有 博 學 鴻 詞 孝 廉 方 正 直 言 山 林 隱 逸 孝 子 等 科

More information

06 01 action JavaScript action jquery jquery AJAX CSS jquery CSS jquery HTML CSS jquery.css() getter setter.css('backgroundcolor') jquery CSS b

06 01 action JavaScript action jquery jquery AJAX CSS jquery CSS jquery HTML CSS jquery.css() getter setter.css('backgroundcolor') jquery CSS b 06 01 action JavaScript action jquery jquery AJAX 04 4-1 CSS jquery CSS jquery HTML CSS jquery.css() getter setter.css('backgroundcolor') jquery CSS background-color camel-cased DOM backgroundcolor.css()

More information

第 1 列 的 按 鈕 從 Albatross ~ Duck 1, 第 2 列 按 鈕 從 Eagle ~ Hawk 2, 第 3 行 按 鈕 從 Ibis ~ Lark 3, 而 只 有 第 3 列 按 鈕 多 設 定 span 元 素 ( 理 由 後 面 會 詳 細 說 明 ) html 具 h

第 1 列 的 按 鈕 從 Albatross ~ Duck 1, 第 2 列 按 鈕 從 Eagle ~ Hawk 2, 第 3 行 按 鈕 從 Ibis ~ Lark 3, 而 只 有 第 3 列 按 鈕 多 設 定 span 元 素 ( 理 由 後 面 會 詳 細 說 明 ) html 具 h Chapter 04 01 在 按 鈕 上 附 加 hover 效 果 本 節 的 HTML 範 例 套 用 了 3 種 當 滑 鼠 移 入 移 出 按 鈕 時 的 hover 效 果 下 圖 共 有 12 個 按 鈕, 我 們 會 在 同 一 列 按 鈕 套 用 同 一 效 果, 總 共 3 種 效 果 本 節 使 用 的 HTML 範 例 檔 SampleFile /Chapter04/01/index.html

More information

! 2000 CSSsprites.com Web FTP app 20% 80% getelementbyid() UI Facebook F8 Web CSSsprites.com Web JavaScript CSS React xi React UI UI 反應 UI 宣告 d

! 2000 CSSsprites.com Web FTP app 20% 80% getelementbyid() UI Facebook F8 Web CSSsprites.com Web JavaScript CSS React xi React UI UI 反應 UI 宣告 d ! 2000 CSSsprites.com Web FTP app 20% 80% getelementbyid() UI Facebook 2015 3 F8 Web CSSsprites.com Web JavaScript CSS React xi React UI UI 反應 UI 宣告 declare 元件 DOM state JavaScript xi React Web ios Android

More information

ebook111-4

ebook111-4 Flash 4 Flash 4 F l a s h 5 Flash 4 Flash Flash 4 Flash 4 Flash 4 4.1 Flash 4 Flash 4 Flash 4 Flash Flash 4 Flash 4 4.2 Flash 4 Flash 4 A Flash 4 S h i f t F i l e P r e f e r e n c e s > > Flash 4 Flash

More information

1 1 大概思路 创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由 编写 Jquery EasyUI 界面 运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 ->

1 1 大概思路 创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由 编写 Jquery EasyUI 界面 运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 -> 目录 1 大概思路... 1 2 创建 WebAPI... 1 3 创建 CrossMainController 并编写... 1 4 Nuget 安装 microsoft.aspnet.webapi.cors... 4 5 跨域设置路由... 4 6 编写 Jquery EasyUI 界面... 5 7 运行效果... 7 8 总结... 7 1 1 大概思路 创建 WebAPI 创建 CrossMainController

More information

网 页 设 计 实 训 教 程 1.4 实 现 过 程 任 务 1: 制 作 诗 词 欣 赏 页 面 步 骤 1: 打 开 编 辑 环 境, 创 建 HTML 文 档 1 1.html, 保 存 到 指 定 位 置, 在 文 档 中 输 入 HTML 文 档 的 基 本 结 构, 代 码 如 下 :

网 页 设 计 实 训 教 程 1.4 实 现 过 程 任 务 1: 制 作 诗 词 欣 赏 页 面 步 骤 1: 打 开 编 辑 环 境, 创 建 HTML 文 档 1 1.html, 保 存 到 指 定 位 置, 在 文 档 中 输 入 HTML 文 档 的 基 本 结 构, 代 码 如 下 : 实 训 一 实 训 一 制 作 诗 词 欣 赏 页 面 1.1 实 训 目 标 了 解 HTML 网 页 基 本 语 法 和 结 构 了 解 HTML 基 本 元 素 掌 握 对 网 页 中 文 字 格 式 化 的 方 法 掌 握 对 网 页 中 段 落 格 式 化 的 方 法 1.2 实 训 内 容 文 字 是 网 页 的 基 础 部 分, 具 体 内 容 包 括 浏 览 器 中 要 显 示 的

More information

主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片 狗狗名字 狗狗生日 // 狗狗圖片 int[] pic =new

主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片 狗狗名字 狗狗生日 // 狗狗圖片 int[] pic =new ListView 自訂排版 主程式 : public class Main3Activity extends AppCompatActivity { ListView listview; // 先整理資料來源,listitem.xml 需要傳入三種資料 : 圖片 狗狗名字 狗狗生日 // 狗狗圖片 int[] pic =new int[]{r.drawable.dog1, R.drawable.dog2,

More information

《linux从入门到精通》实验指导第三讲:文件及目录操作

《linux从入门到精通》实验指导第三讲:文件及目录操作 Web 前端开发 实验教学指导 实验五 : 文字排版 一 实验目的 1 掌握 CSS 进行页面表现控制的基本方法和 CSS 的基本原理 ; 2 掌握 CSS 进行文字排版的基本内容和使用方法 二 实验环境 1 Windows XP/Windows 7 操作系统 ; 2 安装有 Adobe Dreamweaver CS6 软件的计算机一台 ; 3 局域网网络环境, 并且使用固定 IP 地址 三 实验要求

More information

《linux从入门到精通》实验指导第三讲:文件及目录操作

《linux从入门到精通》实验指导第三讲:文件及目录操作 Web 前端开发 实验教学指导 实验七 :JQuery 实现网页动画 一 实验目的 1 理解 Web 交互的基本模式和概念 ; 2 掌握 Web 中 JavaScript 使用的基本方法 ; 3 了解 jquery 的特性及用法 ; 4 熟悉的 jquery 基本语法 ; 5 编写代码实现 jquery 的基本动画效果 二 实验环境 1 Windows XP/Windows Server 2003

More information

Chapter 01 Chapter 02 Chapter 03 Chapter 04 LOGO Chapter 05 Chapter 06 LOGO 005

Chapter 01 Chapter 02 Chapter 03 Chapter 04 LOGO Chapter 05 Chapter 06 LOGO 005 Photoshop / Illustrator Q&A STEP STEP CHECK Point Column 004 Chapter 01 Chapter 02 Chapter 03 Chapter 04 LOGO Chapter 05 Chapter 06 LOGO 005 Chapter 01 CS5 CS6 CC 01 CMYK97 130px STEP_01 Adobe Illustrator

More information

CH15.indd

CH15.indd Chapter 15 Bootstrap 15-1 (RWD) 15-2 Bootstrap 15-3 15-4 15-5 CSS 15-6 15-1 (RWD) (RWD Responsive Web Design) ( ) PC W3C ( ) ( ) ( ) ( ) ( ) ( ) 15-2 15 15-2 Bootstrap Bootstrap Twitter Blueprint Twitter

More information

嘉義市政府暨附(所)屬機關電話禮貌測試實施要點

嘉義市政府暨附(所)屬機關電話禮貌測試實施要點 嘉 義 市 政 府 暨 所 屬 機 關 電 話 禮 貌 測 試 實 施 要 點 83 年 8 月 17 日 83 府 計 研 字 第 50337 號 函 頒 90 年 10 月 12 日 90 府 企 研 字 第 87210 號 修 訂 95 年 12 月 20 日 95 府 企 研 字 第 0950141214 號 函 修 訂 97 年 3 月 21 日 97 府 企 研 字 第 0970110046

More information

F477

F477 FrontPage & Flash 連 CSIE, NTU September 15, 2007 Outline September 15, 2007 Page 2 F477 September 15, 2007 Page 3 September 15, 2007 Page 4 September 15, 2007 Page 5 連 September 15, 2007 Page 6 連 September

More information

(CIP) Web /,. :,2005. 1 ISBN 7 81058 782 X.W............T P393.4 CIP (2004) 118797 Web ( 99 200436) ( http:/ / www.shangdapress.com 66135110) : * 787

(CIP) Web /,. :,2005. 1 ISBN 7 81058 782 X.W............T P393.4 CIP (2004) 118797 Web ( 99 200436) ( http:/ / www.shangdapress.com 66135110) : * 787 Web (CIP) Web /,. :,2005. 1 ISBN 7 81058 782 X.W............T P393.4 CIP (2004) 118797 Web ( 99 200436) ( http:/ / www.shangdapress.com 66135110) : * 787 1092 1/ 16 30.75 748 2005 1 1 2005 1 1 : 1 3 100

More information

XP11067_內文.pdf

XP11067_內文.pdf Adobe Flash Steve Jobs 2010 ios Flash http://www.apple.com/ hotnews/thoughts-on-flash/ ios Flash ios HTML5 NimbleKit ipad HTML5 HTML5 NimbleKit Objective-C iphone ipod touch HTML5 ipad iphone ipod touch

More information

Microsoft Word - 《师范教育信息参考》 2011年第2期

Microsoft Word - 《师范教育信息参考》 2011年第2期 师 范 教 育 信 息 参 考 北 华 大 学 图 书 馆 参 考 咨 询 服 务 部 主 办 师 范 教 育 信 息 参 考 本 期 导 读 热 点 聚 焦 教 育 部 2011 年 工 作 要 点 ( 下 ) 温 总 理 在 东 北 师 大 免 费 师 范 生 来 信 上 作 出 重 要 批 示 首 届 免 费 师 范 生 全 部 到 中 小 学 任 教 教 育 基 础 道 德 : 通 往 幸

More information

Photoshop CS3 影像創造力 基礎講堂 8 學習流程 學習重要性 學習難度 必學指令工具 實作應用範例 創造舞台燈光的漸層繪圖 延伸學習 雜訊與半透明漸層 8-1 Photoshop Photoshop 8 136

Photoshop CS3 影像創造力 基礎講堂 8 學習流程 學習重要性 學習難度 必學指令工具 實作應用範例 創造舞台燈光的漸層繪圖 延伸學習 雜訊與半透明漸層 8-1 Photoshop Photoshop 8 136 漸層填色與圖樣填色 08 8-1 漸層填色 8-2 漸層填色編輯 8-3 油漆桶填色 8-4 編輯圖樣 Photoshop CS3 影像創造力 基礎講堂 8 學習流程 學習重要性 學習難度 必學指令工具 8-1 8-2 8-3 8-4 實作應用範例 創造舞台燈光的漸層繪圖 延伸學習 雜訊與半透明漸層 8-1 Photoshop 8-1-1 Photoshop 8 136 漸層填色與圖樣填色 漸層填色

More information

CSS

CSS CSS 吳錦昂老師整理 CSS 是什麼 CSS 的全名為 Cascading Style Sheets W3C 所制訂的標準 可以將資料層及顯示層分開 HTML 文件就只包括資料 ( 資料層 ) CSS 則是告訴瀏覽器這些資料應該要如何顯現出來 ( 顯示層 ) 目的是為了對標記語言例如 XHTML 及 HTML 之類的提供一個顯示層 學會 CSS 可以自由的變化自己部落格的樣式 CSS 語法 選擇器

More information

week04.key

week04.key 基礎網 頁設計 第四週 老師 : 蔡承洋 大綱 HTML 標籤 元素 屬性 常 用標籤 標籤屬性 網 頁檔案命名 網站資料夾與檔案路徑關連 課後作業 HTML 標籤 元素 屬性 tag 標籤 使 用 < > 包起來, 包住的是 tag 名稱 http://www.w3schools.com/tags/ 所有 tag 列表 element 元素 開始標籤 我是 一段 文字

More information

CSS样式表

CSS样式表 CSS 样 式 表 教 学 重 点 : CSS 样 式 表 基 础 知 识 CSS 样 式 的 分 类 CSS 样 式 的 链 接 添 加 CSS 样 式 的 其 它 相 关 知 识 教 学 难 点 : 如 上 一.CSS 样 式 表 基 础 Css 和 HTML 都 是 一 种 标 示 语 言 Html 用 来 表 现 网 页 文 件 的 内 容 和 结 构, 而 CSS 来 决 定 用 什 么

More information

泰州招聘365bet博彩网站三亚海棠湾东方的迪拜回归年少的童真快乐

泰州招聘365bet博彩网站三亚海棠湾东方的迪拜回归年少的童真快乐 泰 州 招 聘 365bet 博 彩 网 站 三 亚 海 棠 湾 东 方 的 迪 拜 回 归 年 少 的 童 真 快 乐 www.hmcdp.com http://www.hmcdp.com 泰 州 招 聘 365bet 博 彩 网 站 三 亚 海 棠 湾 东 方 的 迪 拜 回 归 年 少 的 童 真 快 乐 大 兴 安 岭 鄂 尔 多 斯 博 尔 塔 拉 泰 州 招 聘 网 泰 州 雇 用 365bet

More information

Microsoft PowerPoint - HTML(3)

Microsoft PowerPoint - HTML(3) HTML(3) 高雄大學資工系 嚴力行 HTML Tables Purposes of using tables The obvious purpose of arranging information in a table The less obvious - but more widely used - purpose of creating a page layout with the use

More information

Microsoft PowerPoint - Ch00-4-XHTML.ppt [相容模式]

Microsoft PowerPoint - Ch00-4-XHTML.ppt [相容模式] Chapter 0-4 (XHTML) 陈瑞奇 (J.C. Chen) 亚洲大学资讯工程学系 多媒体网站技术应用 整合性课程 IE, Firefox, Safari, Opera, Chrome HTML/CSS DHTML/XHTML/XML JavaScript, JScript, VBScript Java Applet, ActiveX, AJAX Plug-in (eg, Flash, PDF,

More information

Chapter 3 Camera Raw Step negative clarity +25 ] P / Step 4 0 ( 下一頁 ) Camera Raw Chapter 3 089

Chapter 3 Camera Raw Step negative clarity +25 ] P / Step 4 0 ( 下一頁 ) Camera Raw Chapter 3 089 Photoshop CC Camera Raw Photoshop Camera Raw Step 1 3 1 2 3 SCOTT KELBY Step 2 B Camera Raw 088 Chapter 3 Camera Raw Chapter 3 Camera Raw Step 3-4 -100 negative clarity +25 ] P / -75-50 Step 4 0 ( 下一頁

More information

0 0 = 1 0 = 0 1 = = 1 1 = 0 0 = 1

0 0 = 1 0 = 0 1 = = 1 1 = 0 0 = 1 0 0 = 1 0 = 0 1 = 0 1 1 = 1 1 = 0 0 = 1 : = {0, 1} : 3 (,, ) = + (,, ) = + + (, ) = + (,,, ) = ( + )( + ) + ( + )( + ) + = + = = + + = + = ( + ) + = + ( + ) () = () ( + ) = + + = ( + )( + ) + = = + 0

More information

RMF Shape/ 外觀 : Tubular Photo Fiber Photo Area Ultrasonic s Model / 型號 RMF-DU10 RMF-DU40 RMF-DU10 K RMF-DU40 K RMF-DU10 K1 RMF-DU40 K1 Diffuse reflect

RMF Shape/ 外觀 : Tubular Photo Fiber Photo Area Ultrasonic s Model / 型號 RMF-DU10 RMF-DU40 RMF-DU10 K RMF-DU40 K RMF-DU10 K1 RMF-DU40 K1 Diffuse reflect Shape/ 外觀 : Tubular Photo RMF Model / 型號 RMF-10KP2 RMF-10KP2K RMF-DU30KP2 RMF-DU30KP2K Through beam / 對照式 Diffuse reflection / 擴散反射式 10M 30 cm Infrared LED 850 nm Infrared LED 875 nm 45 ma Max./Each side

More information

untitled

untitled .Net ADF ArcGIS Server ESRI ( ) .NET (ADF.NET) ADF.NET Web Controls Demo .NET (ADF.NET) ADF.NET ArcGIS Web C# and VB.NET Web Server Page Layout, Map, TOC, Overview Map ArcGIS Server.NET ? GIS web ArcGIS

More information

《linux从入门到精通》实验指导第三讲:文件及目录操作

《linux从入门到精通》实验指导第三讲:文件及目录操作 Web 前端开发 实验指导 : 实验八 : 下拉菜单 一 实验目的 1 掌握 CSS 动画 JS 动画和 jquery 动画的基本原理和基本方法 ; 2 掌握下拉菜单制作的基本原理; 3 理解技术多样性的概念 二 实验环境 1 Windows XP/Windows 7 操作系统的计算机 ; 2 局域网网络环境, 并且使用固定 IP 地址 ; 3 支持互联网访问; 4 Adobe CS 6 组件支持

More information

46 2011 11 467 數位遊戲式學習系統 7 2011 11 467 47 3 DBGameSys 48 2011 11 467 正規化資料模組 如何配置並儲存電子化資料 以 便減少資料被重覆儲存的程序 DBGameSys的主要功能模組包 學習者 審核評分模組 含 正規化資料模組 審核評分 模組 高分列表模組3大區塊 系統資料庫 在正規化資料模組的執行 高分列表模組 過程中 先要求學習者瀏覽遊戲

More information

untitled

untitled 12-1 -2 VC# Web Blog 12-1 -1-1 12-1.1-1 C:\ ChartModuleSample_CSharp\Application\2001\ Files\ 4096 KB 120 Web.Config httpruntime maxrequestlength executiontimeout 12-2

More information

09 F9 128 peer to peer, P2P file transfer protocol bittorrent 10 P2P P2P GNU/ Linux P2P CC 單機版的智慧財產權 vs. 人權戰爭 1980 DVD content

09 F9 128 peer to peer, P2P file transfer protocol bittorrent 10 P2P P2P GNU/ Linux P2P CC 單機版的智慧財產權 vs. 人權戰爭 1980 DVD content 當智慧財產 侵犯人權? 智慧財產與人權 Kickstarter The Matrix The Matrix Avatar Eywa 12 2013 4 484 09 F9 128 peer to peer, P2P file transfer protocol bittorrent 10 P2P P2P GNU/ Linux P2P CC 單機版的智慧財產權 vs. 人權戰爭 1980 DVD content

More information

Microsoft Word - ch02.doc

Microsoft Word - ch02.doc 第 2 章 认 识 Dreamweaver 8 教 学 提 示 :Dreamweaver 是 一 款 功 能 强 大 的 可 视 化 的 网 页 编 辑 与 管 理 软 件 利 用 它, 不 仅 可 以 轻 松 地 创 建 跨 平 台 和 跨 浏 览 器 的 页 面, 也 可 以 直 接 创 建 具 有 动 态 效 果 的 网 页 而 不 用 自 己 编 写 源 代 码 Dreamweaver 8

More information

RUN_PC連載_10_.doc

RUN_PC連載_10_.doc PowerBuilder 8 (10) Jaguar CTS ASP Jaguar CTS PowerDynamo Jaguar CTS Microsoft ASP (Active Server Pages) ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar Server ASP

More information

致理技術學院

致理技術學院 致 理 技 術 學 院 商 務 科 技 管 理 系 實 務 專 題 報 告 彩 繪 指 甲 預 覽 系 統 指 導 老 師 : 彭 建 文 博 士 學 生 : 蕭 全 佑 (19833150) 鄭 任 翔 (19833111) 林 育 璇 (19833114) 中 華 民 國 101 年 12 月 致 理 技 術 學 院 商 務 科 技 管 理 系 實 務 專 題 報 告 彩 繪 指 甲 預 覽 系

More information

A-2 l 跨裝置網頁設計 A-1 <frameset> <frame> <noframes> (frame) HTML (navigation bar)

A-2 l 跨裝置網頁設計 A-1 <frameset> <frame> <noframes> (frame) HTML (navigation bar) AppendixA HTML A-1 A-2 A-3 A-2 l 跨裝置網頁設計 A-1 (frame) HTML (navigation bar) HTML 框架元素 l A-3 1. 2. 3. 4.

More information

AutoCAD 用戶如何使用 ArchiCAD

AutoCAD 用戶如何使用 ArchiCAD AutoCAD 用戶如何使用 ArchiCAD AutoCAD用戶如何使用ArchiCAD ( 中文版 ) 由 Scott MacKenzie, Simon Gilbert, Geoffrey Moore Langdon, David Byrnes, Ralph Grabowski 編寫 龍庭資訊有限公司 1/73 - 2. 3. 4. -

More information

IsPostBack 2

IsPostBack 2 5 IsPostBack 2 TextBox 3 TextBox TextBox 4 TextBox TextBox 1 2 5 TextBox Columns MaxLength ReadOnly Rows Text TextMode TextMode MultiLine TextMode MultiLine True False TextMode MultiLine Password MulitLine

More information

Text 文字输入功能 , 使用者可自行定义文字 高度, 旋转角度 , 行距 , 字间距离 和 倾斜角度。

Text 文字输入功能 , 使用者可自行定义文字  高度, 旋转角度 , 行距 , 字间距离 和 倾斜角度。 GerbTool Wise Software Solution, Inc. File New OPEN CLOSE Merge SAVE SAVE AS Page Setup Print Print PreView Print setup (,, IMPORT Gerber Wizard Gerber,Aperture Gerber Gerber, RS-274-D, RS-274-X, Fire9000

More information

Preface This guide is intended to standardize the use of the WeChat brand and ensure the brand's integrity and consistency. The guide applies to all d

Preface This guide is intended to standardize the use of the WeChat brand and ensure the brand's integrity and consistency. The guide applies to all d WeChat Search Visual Identity Guidelines WEDESIGN 2018. 04 Preface This guide is intended to standardize the use of the WeChat brand and ensure the brand's integrity and consistency. The guide applies

More information

TPM BIOS Infineon TPM Smart TPM Infineon TPM Smart TPM TPM Smart TPM TPM Advanced Mode...8

TPM BIOS Infineon TPM Smart TPM Infineon TPM Smart TPM TPM Smart TPM TPM Advanced Mode...8 Smart TPM Rev. 1001 Smart TPM Ultra TPM Smart TPM TPM...3 1. BIOS... 3 2. Infineon TPM Smart TPM... 4 2.1. Infineon TPM...4 2.2. Smart TPM...4 3. TPM... 5 3.1. Smart TPM TPM...5 3.2. Advanced Mode...8

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Perl CGI 1 Perl CGI 2 Perl CGI 3 Perl CGI 4 1. 2. 1. #!/usr/local/bin/perl 2. print "Content-type: text/html n n"; 3. print " n"; 4. print " n"; 3. 4.

More information

02 2 成立 Facebook 粉絲專頁 Facebook Facebook Facebook 1, Facebook Facebook 1 Facebook 2-21

02 2 成立 Facebook 粉絲專頁 Facebook Facebook Facebook 1, Facebook Facebook 1 Facebook 2-21 賺更多 24 24 2-10 我就是沒錢! 所以我只能利用免費的資源來獲取網路流量, 怎麼做比較好? 1 透過 Facebook 貼文在自己的個人頁面, 讓好友看見 Facebook Facebook 2-20 02 2 成立 Facebook 粉絲專頁 Facebook Facebook Facebook 1,000 100 Facebook Facebook 1 Facebook 2-21 賺更多

More information

使用 CSS+Div 布局网页 实训目的 常见网页布局方式有表格布局 框架布局和使用 CSS+DIV 布局等方式 使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术 熟练掌握 CSS+DIV 布

使用 CSS+Div 布局网页 实训目的 常见网页布局方式有表格布局 框架布局和使用 CSS+DIV 布局等方式 使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术 熟练掌握 CSS+DIV 布 使用 CSS+Div 布局网页 实训目的 常见网页布局方式有表格布局 框架布局和使用 CSS+DIV 布局等方式 使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术 熟练掌握 CSS+DIV 布局方式, 是网页设计者必备的技能 实训目的 : 掌握网页界面设计流程 ; 掌握与网页元素定位相关的 CSS

More information

無障礙網頁開發規範二版(草案)

無障礙網頁開發規範二版(草案) 國 家 通 訊 傳 播 委 員 會 無 障 礙 網 頁 開 發 規 範 2.0 版 ( 草 案 ) 委 辦 單 位 : 國 家 通 訊 傳 播 委 員 會 執 行 單 位 : 中 華 民 國 資 訊 軟 體 協 會 中 華 民 國 1 0 3 年 0 5 月 I II 目 錄 壹 前 言... 1 貳 適 用 範 圍... 2 參 用 語 釋 義... 3 肆 規 範 內 文... 14 一 規 範

More information

2.4 Selenium Python Selenium Selenium Selenium Selenium pip install selenium Chrome WebDriver Google Chrome (Linux, Mac, Windows) Chrome WebDriv

2.4 Selenium Python Selenium Selenium Selenium Selenium pip install selenium Chrome WebDriver Google Chrome (Linux, Mac, Windows) Chrome WebDriv Chapter 02 大數據資料爬取與分析 Python Python Requests BeautifulSoup Regular Expression Selenium Pandas Python 2.4 Selenium Python 2.4.1 Selenium Selenium Selenium Selenium pip install selenium Chrome WebDriver

More information

本 课 程 作 为 非 计 算 机 专 业 本 科 通 识 课 程, 是 一 门 理 论 和 实 践 紧 密 结 合 的 实 用 课 程, 内 容 包 括 计 算 机 基 础 部 分 和 程 序 设 计 部 分 计 算 机 基 础 部 分 涵 盖 计 算 机 软 硬 件 组 成 数 制 表 示 操

本 课 程 作 为 非 计 算 机 专 业 本 科 通 识 课 程, 是 一 门 理 论 和 实 践 紧 密 结 合 的 实 用 课 程, 内 容 包 括 计 算 机 基 础 部 分 和 程 序 设 计 部 分 计 算 机 基 础 部 分 涵 盖 计 算 机 软 硬 件 组 成 数 制 表 示 操 计 算 机 基 础 部 程 序 设 计 类 课 程 介 绍 1. Java 语 言 程 序 设 计 Java 简 介 Java 是 一 种 开 放 的 可 以 撰 写 跨 平 台 应 用 程 序 的 面 向 对 象 的 程 序 设 计 语 言 Java 技 术 具 有 卓 越 的 通 用 性 高 效 性 平 台 移 植 性 和 安 全 性, 广 泛 应 用 于 PC 数 据 中 心 科 学 超 级

More information

目 錄 壹 實 務 專 題 製 作 競 賽 ( 複 賽 ) 實 施 計 畫 1 貳 實 務 專 題 製 作 競 賽 ( 複 賽 ) 參 選 作 品 一 覽 表 13 參 評 審 委 員 名 單 23 肆 活 動 照 片 25 伍 實 務 專 題 製 作 競 賽 ( 複 賽 ) 優 良 作 品 名 錄

目 錄 壹 實 務 專 題 製 作 競 賽 ( 複 賽 ) 實 施 計 畫 1 貳 實 務 專 題 製 作 競 賽 ( 複 賽 ) 參 選 作 品 一 覽 表 13 參 評 審 委 員 名 單 23 肆 活 動 照 片 25 伍 實 務 專 題 製 作 競 賽 ( 複 賽 ) 優 良 作 品 名 錄 教 育 部 職 業 學 校 電 機 與 電 子 群 科 中 心 學 校 101 年 度 全 國 高 職 電 機 與 電 子 群 科 專 題 製 作 競 賽 優 良 作 品 集 複 賽 優 勝 作 品 ( 複 賽 優 勝 含 佳 作 共 63 件 ) 指 導 單 位 : 教 育 部 中 部 辦 公 室 執 行 單 位 : 國 立 臺 中 高 級 工 業 職 業 學 校 中 華 民 國 101 年 12

More information

書面

書面 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 5.4 互動功能畫面 程式碼請參考附件-程式三 在進入互動頁面時 會執行setAllText()依寵物狀態數值來 設定狀態文字與頭像 並且依心情決定是否要不要播放音效 觸摸的區域 由於是自己寫的 view 所以並未透過xml來設置 而是透過Layut.addview()來動態新增

More information

付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探

付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探 付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探索建设中 成时间 : 2017-07-20 12:13:21 Since 8.6 定义键盘 定义键盘使

More information

灰狐就是协作 collaboration for everyone! 灰狐 Huihoo Huihoo 是个社区, 一个协作与分享的社区, 我们关注自由 开源软件

灰狐就是协作 collaboration for everyone! 灰狐 Huihoo Huihoo 是个社区, 一个协作与分享的社区, 我们关注自由 开源软件 Allen Long ihuihoo@gmail.com 微博 : http://weibo.com/huihoo Twitter: http://twitter.com/huihoo 2011-04 灰狐就是协作 collaboration for everyone! 灰狐 Huihoo Huihoo 是个社区, 一个协作与分享的社区, 我们关注自由 开源软件 议题 目前最热的 Web 技术 :

More information

Chapter 1 什麼是響應式 網頁設計?

Chapter 1 什麼是響應式 網頁設計? Chapter 1 什麼是響應式 網頁設計? 2 RWD 002 Android 6000 2009 WordPress breakpoints RWD HTML CSS Ethan Marcotte A List Apart http://rwdwp.com/1 Responsive Web Design Chapter 1 003 什麼是響應式網頁設計 3 其餘正如它們所說的是歷史 行動電話已是現在的社會不可或缺的

More information

VRML 2.0 < VRML vrml vrml vrml (Node) (Field) VRML (Virtual Reality) (1) (2)Three Dimension (3D) (3) (4) (5) (Virtual Reality Modeling LanguageVRML) (

VRML 2.0 < VRML vrml vrml vrml (Node) (Field) VRML (Virtual Reality) (1) (2)Three Dimension (3D) (3) (4) (5) (Virtual Reality Modeling LanguageVRML) ( VRML 2.0 < VRML 2.0 VRML VRML VRML VRML VRML VrmlPad CosmoPlayer VRML VRML VRML VRML 97 VRML & JavaScript XML X3D VRML 2.0 < VRML vrml vrml vrml (Node) (Field) VRML (Virtual Reality) (1) (2)Three Dimension

More information

Bus Hound 5

Bus Hound 5 Bus Hound 5.0 ( 1.0) 21IC 2007 7 BusHound perisoft PC hound Bus Hound 6.0 5.0 5.0 Bus Hound, IDE SCSI USB 1394 DVD Windows9X,WindowsMe,NT4.0,2000,2003,XP XP IRP Html ZIP SCSI sense USB Bus Hound 1 Bus

More information

RUN_PC連載_8_.doc

RUN_PC連載_8_.doc PowerBuilder 8 (8) Web DataWindow ( ) DataWindow Web DataWindow Web DataWindow Web DataWindow PowerDynamo Web DataWindow / Web DataWindow Web DataWindow Wizard Web DataWindow Web DataWindow DataWindow

More information

ebook50-11

ebook50-11 11 Wi n d o w s C A D 53 M F C 54 55 56 57 58 M F C 11.1 53 11-1 11-1 MFC M F C C D C Wi n d o w s Wi n d o w s 4 11 199 1. 1) W M _ PA I N T p W n d C W n d C D C * p D C = p W n d GetDC( ); 2) p W n

More information

840 提示 Excel - Excel -- Excel (=) Excel ch0.xlsx H5 =D5+E5+F5+G5 (=) = - Excel 00

840 提示 Excel - Excel -- Excel (=) Excel ch0.xlsx H5 =D5+E5+F5+G5 (=) = - Excel 00 Excel - - Excel - -4-5 840 提示 Excel - Excel -- Excel (=) Excel ch0.xlsx H5 =D5+E5+F5+G5 (=) = - Excel 00 ( 0 ) 智慧標籤 相關說明提示 -5 -- Excel 4 5 6 7 8 + - * / % ^ = < >= & 9 0 (:) (,) ( ) Chapter - :,

More information

Microsoft Word - diy_chi.doc

Microsoft Word - diy_chi.doc 目 录 1. DIY 网 页 功 能 设 定... 1 1.1. 更 改 密 码 功 能... 2 1.2. 选 择 的 语 言 版 本... 2 1.3. 联 络 电 邮... 2 1.4. 网 页 名 称 ( 英 文 版 )... 2 1.5. 网 页 介 绍 ( 英 文 版 )... 2 1.6. 网 页 Keywords( 英 文 版 )... 2 1.7. 查 询 表 格 ( 英 文 版

More information

4 5 6 7 8 CONTENTS 9 10 11 12 13 14 1 CHAPTER SECTION1. 16 17 2. SECTION 18 19 20 21 22 3. SECTION 23 24 25 4. SECTION 26 27 5. SECTION 28 29 30 31 6. SECTION 32 33 2 CHAPTER 34 SECTION 1. 35 36 37 38

More information

13 根 据 各 种 网 络 商 务 信 息 对 不 同 用 户 所 产 生 的 使 用 效 用, 网 络 商 务 信 息 大 致 可 分 为 四 级, 其 中 占 比 重 最 大 的 是 ( A ) A 第 一 级 免 费 信 息 B 第 二 级 低 收 费 信 息 C 第 三 级 标 准 收 费

13 根 据 各 种 网 络 商 务 信 息 对 不 同 用 户 所 产 生 的 使 用 效 用, 网 络 商 务 信 息 大 致 可 分 为 四 级, 其 中 占 比 重 最 大 的 是 ( A ) A 第 一 级 免 费 信 息 B 第 二 级 低 收 费 信 息 C 第 三 级 标 准 收 费 助 理 电 子 商 务 考 试 真 题 试 题 第 一 部 分 : 理 论 部 分 一 单 项 选 择 题 1 ( B ) 是 信 息 系 统 的 核 心 组 成 部 分 A 逻 辑 模 型 B 数 据 库 C 概 念 模 型 D 以 上 全 部 2 ping www.163.com -t 中 参 数 t 的 作 用 是 :( A ) A 进 行 连 续 测 试 B 在 新 窗 口 中 显 示 C

More information

簡報技巧

簡報技巧 2 Q & A 4 7 Presenter Audienc e 7 10 / 11 7 / 11 / 7 55 11 / 7 55 38 11 12 13 14 Q & A 1. : 1. : 1. : / 5W Who What When Where Why 1. : / 5W Who What When 5W2H How to do How much Where Why 1.

More information

Microsoft PowerPoint - ch16_1.ppt

Microsoft PowerPoint - ch16_1.ppt CSS 16-1 認識 CSS CSS (Cascading Style Sheets, 串接樣式表 ) 是由 W3C 所提出, 主要的用途是控制網頁的外觀 最早的版本是 W3C 於 1996 年公布的 CSS 1, 接著 W3C 於 1998 年公布 CSS 2, 之後 W3C 於 2002 年公布 CSS 2.1 如果您想進一步瞭解 CSS, 可以參考 W3C 的 CSS 首頁 http://www.w3.org/style/css/

More information

彩色地图中道路的识别和提取

彩色地图中道路的识别和提取 9310016, i ii Abstract This thesis is on the researching of recognizing the roads in map image by computer. Based on the theory of Pattern Recognition, there is a method to be discussed, which can recognize

More information

XML/DTD (1) XML (Markup) SGML HTML XML XML XML 2004/7/ All Rights Reserved 2

XML/DTD (1) XML (Markup) SGML HTML XML XML XML 2004/7/ All Rights Reserved 2 XML/DTD (1) XML (Markup) SGML HTML XML XML XML 2004 All Rights Reserved 2 SGML Standard Generalized Markup Language ( ) XML Extensible Markup Language HTML HyperText Markup Language 2004 All Rights Reserved

More information

ACI pdf

ACI pdf 09 9.1 -...9-2 9.1.1...9-2 9.1.2...9-3 9.2 -...9-4 9.2.1 PMT - ()...9-4 9.2.2...9-6 9.3 -...9-8 9.3.1 PMT - ()...9-8 9.4...9-10 9.4.1... 9-11 9.4.2...9-12 9.4.3...9-14 9.5 -...9-17 9.5.1...9-18 1 Excel...9-21

More information

兽医临床诊断学实验指导

兽医临床诊断学实验指导 兽 医 临 床 诊 断 学 实 验 指 导 河 北 科 技 师 范 学 院 动 物 科 学 系 临 床 兽 医 学 实 验 室 2009 年 2 月 目 录 学 生 实 验 守 则... 3 实 习 一 动 物 的 接 近 保 定 和 基 本 检 查 法...4 实 习 二 临 床 基 本 检 查 法 及 一 般 检 查...10 实 习 三 循 环 系 统 的 临 床 检 查...15 实 习 四

More information