基礎網 頁設計 第六週 老師 : 蔡孟珂
大綱 HTML 標籤屬性 DOM(Document Object Model) 文件物件模型 樹的概念 CSS 撰寫與常 用語法
HTML 標籤屬性
id 唯 一值 同 一份 html 中, 標籤裡不能有重複的 id 名稱 <div id="footer" class="box"> 頁底資訊 1 <p> 連結 <a href="http://google.com" 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="http://google.com" target="_blank">google.com</a>
DOM(Document Object Model) 文件物件模型樹的概念
<!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="http://google.com" target="_blank">google.com</a> <div id="footer"> 頁底資訊 1 <p> 連結 <a href="http://tw.yahoo.com" target="_blank">yahoo 奇摩 </a> </p> </body> </html>
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
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
CSS 撰寫與常 用語法
CSS 撰寫 瀏覽器讀取 CSS 順序由是上往下 選擇器可以同時選擇多個元素 子元素會繼承 父元素的設定 子元素可以覆寫 父元素的設定 兩個以上的選擇器, 若有選到同 一個元素, 後者會覆寫前者的設定
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="http://google.com" target="_blank">google.com</a> <div id="footer"> 頁底資訊 1 <p> </p> </body> </html> div{ margin: 10px; 連結 <a href="http://tw.yahoo.com" target="_blank">yahoo 奇摩 </a> background: #aaa url(http://images.apple.com/v/ipod/home/b/images/gradient_texture.png); color:#b03f01; div.middle{ width:1024px; margin: 0 auto; div#footer{ text-align:center; a{ color:#333; a:hover{ color:#7f007f;
CSS 常 用語法 參考語法 http://www.w3schools.com/css/default.asp 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); http://boohover.pixnet.net/blog/post/20556952 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(http://123.com.tw/123.jpg); 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; /* 左邊 */
CSS 常 用語法 參考語法 http://www.w3schools.com/css/default.asp 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; // 行內 http://blog.xuite.net/vexed/tech/29221717
CSS 常 用語法 參考語法 http://www.w3schools.com/css/default.asp 屬性功 用範例 box-shadow 陰影 border-radius 圓 角 box-shadow: 10px 10px 2px 1px #333; box-shadow: x 軸 y 軸模糊半徑散佈半徑顏 色 ; 陰影產 生器 :http://www.cssmatic.com/box-shadow border-radius: 10px; // 四 角 border-top-left-radius: 10px; // 左上 角 border-top-right-radius: 12px; // 右上 角 border-bottom-right-radius: 30px;// 右下 角 border-bottom-left-radius: 40px; // 左下 角 圓 角產 生器 :http://border-radius.com/ 事件效果說明範例 標籤元素 :hover 當滑 鼠移動到該元素上時 標籤元素 :active 當在該元素點擊時 ( 往下點的動作 ) a{ color: #aaaaaa; a:hover{ color: #333; a{ color: #aaaaaa; a:active{ color: red;
HTML+CSS
HTML+CSS