week06.key

Size: px

Start display at page:

Download "week06.key"

金郜
6 years ago
Views:

1 基礎網頁設計第六週老師 : 蔡孟珂

2 大綱 HTML 標籤屬性 DOM(Document Object Model) 文件物件模型樹的概念 CSS 撰寫與常用語法

3 HTML 標籤屬性

4 id 唯一值同一份 html 中, 標籤裡不能有重複的 id 名稱 <div id="footer" class="box"> 頁底資訊 1 <p> 連結 <a href=" target="_blank">google.com</a> </p> <div id="footer"> 頁底資訊 2 class 可複數, 同一份 html 中, 允許重複的名稱, 也可寫兩個以上的名稱, 需以空白分開 <div class="top box"> <div class="logo"> <img src="images/123.jpg" /> <img src="images/ads.jpg" class="ads"/> <div class="middle box"> 我是在中間成 <a href=" target="_blank">google.com</a>

5 DOM(Document Object Model) 文件物件模型樹的概念

6 <!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title> 第六週程式碼 </title> <meta name="description" content=" 這是第六週的教學內容, 包含了 DOM 標籤觀念常用 CSS 語法等 "> <meta name="author" content=" 蔡孟珂 "> </head> <body> <div class="top"> <div class="logo"> <img src="images/123.jpg" /> <img src="images/ads.jpg" class="ads"/> <div class="middle"> 我是在中間層 <a href=" target="_blank">google.com</a> <div id="footer"> 頁底資訊 1 <p> 連結 <a href=" target="_blank">yahoo 奇摩 </a> </p> </body> </html>

7 html head body meta sctipt div class= top div class= top div id= footer title link rel= shortcut link rel= stylesheet class= logo div img class= ads text... text 1 img a p text a google.com

8 html head body meta sctipt div class= top div class= top div id= footer title link link rel= shortcut rel= stylesheet div img class= logo class= ads text text... 1 img a p text a google.com

9 CSS 撰寫與常用語法

10 CSS 撰寫瀏覽器讀取 CSS 順序由是上往下選擇器可以同時選擇多個元素子元素會繼承父元素的設定子元素可以覆寫父元素的設定兩個以上的選擇器, 若有選到同一個元素, 後者會覆寫前者的設定

11 CSS 撰寫 <!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title> 第六週程式碼 </title> <meta name="description" content=" 這是第六週的教學內容, 包含了 DOM 標籤觀念常用 CSS 語法等 "> <meta name="author" content=" 蔡孟珂 "> <link rel="stylesheet" href='css/style.css'> </head> <body> <div class="top"> <div class="logo"> <img src="images/logo.gif" /> <img src="images/ads.png" class="ads"/> <div class="middle"> 我是在中間層 body { <a href=" target="_blank">google.com</a> <div id="footer"> 頁底資訊 1 <p> </p> </body> </html> div{ margin: 10px; 連結 <a href=" target="_blank">yahoo 奇摩 </a> background: #aaa url( color:#b03f01; div.middle{ width:1024px; margin: 0 auto; div#footer{ text-align:center; a{ color:#333; a:hover{ color:#7f007f;

12 CSS 常用語法參考語法 width min-width max-width height min-height max-height color 屬性功用範例寬度高度文字顏色 width: 200px; min-width: 100px; // 最小寬度 max-width: 500px; // 最大寬度 height: 200px; min-height: 100px; // 最小高度 max-height: 500px; // 最大高度 color: #333333; color: blue; color: rgba(12,33,33,0.1); font 字型文字 font: 10pt " 微軟正黑體 ",'Lucida Sans Unicode', Helvetica, Arial, sans-serif; font-size 文字大小 background-color 背景顏色 font-size: 10pt; font-size: 10px; font-size: 1.2em; background-color: #333333; background-color:rgba(100,21,100,0.7); background-image 背景底圖 background-image: url( background-repeat 圖片重複方式 background-repeat: no-repeat; /* 不重複 */ background-repeat: repeat-x; /* 往右重複 */ background-repeat: repeat-y; /* 往下重複 */ background 背景 background: url( img/123.jpg ) #ccc repeat-x; border 邊框 border: #cccccc solid 1px; /* 四邊 */ border-top: #cccccc solid 1px; /* 上邊 */ border-right: #cccccc solid 1px; /* 右邊 */ border-bottom: #cccccc solid 1px; /* 下邊 */ border-left: #cccccc solid 1px; /* 左邊 */

13 CSS 常用語法參考語法 padding margin 屬性功用範例區塊內間隔區塊外元素間隔 padding: 10px 5px 3px 20px; padding: 10px 5px; padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin: 10px 5px 3px 20px; margin: 10px 5px; margin: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; text-align 內容物水平對齊 text-align: center; /* 選項 :left center right */ vertical-align 內容物垂直對齊 vertical-align: middle; /* 選項 :top middle bottom */ float clear 浮動清除浮動 float: left; /* 選項 :left right */ float: right; /* 選項 :left right */ clear: left; /* 選項 :left right */ clear: right; /* 選項 :left right */ opacity 透明程度 0 ~ 1 (0.1, 0.2, 0.3 ) filter 透明程度 for IE alpha(opacity=0) 0~100 display 區塊顯示 display:none; // 不顯示 display:inline; // 行內

14 CSS 常用語法參考語法屬性功用範例 box-shadow 陰影 border-radius 圓角 box-shadow: 10px 10px 2px 1px #333; box-shadow: x 軸 y 軸模糊半徑散佈半徑顏色 ; 陰影產生器 : border-radius: 10px; // 四角 border-top-left-radius: 10px; // 左上角 border-top-right-radius: 12px; // 右上角 border-bottom-right-radius: 30px;// 右下角 border-bottom-left-radius: 40px; // 左下角圓角產生器 : 事件效果說明範例標籤元素 :hover 當滑鼠移動到該元素上時標籤元素 :active 當在該元素點擊時 ( 往下點的動作 ) a{ color: #aaaaaa; a:hover{ color: #333; a{ color: #aaaaaa; a:active{ color: red;

15 HTML+CSS

16 HTML+CSS

week04.key

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