<style> .blue{ color:#4A919E } </style> <h1 style="color: #4A919E">Web 第十週社課</h1> >[name= 張皓凱、林德恩][time= April Fools ,2022 ] ###### tags: `Web` `HTML` `CSS` `前端` `tcirc39th` `社課` `臺中一中電研社` [TOC] <div style="font-size: 30px;color: maroon">麻煩請各位認真聽課,我們段考趕上週講義,段考後又在三天內爆肝出這份講義,希望各位不要一直看手機。</div> --- ## <div class="blue">電研社</div> 社網:[tcirc.tw](https://tcirc.tw) online judge:[judge.tcirc.tw](https://judge.tcirc.tw) IG:[TCIRC_39th](https://www.instagram.com/tcirc_39th) 社課點名表單:[google 表單]() ## 本次社課實作 1. 到[這裡](https://github.com/unichk/tcircWebClass) -> 右邊的Releases -> 2022/4/1 -> Source code (zip) 2. vscode -> 右邊的extention -> 下載live sever、Auto Close Tag、Auto Rename Tag --- ## web ---- ![](https://i.imgur.com/tF79UB4.png) (圖片來源:[angularminds](https://www.angularminds.com/blog/article/top-web-development-stack-for-developers.html)) ---- 開發一個網頁可以包含前端(front-end)、後端(back-end)、資料庫(database)及伺服器(server) * 前端-處理網站的長相 * 後端-處理資料運算 * 資料庫-處存資料 * 伺服器-存放網路伺服器軟體及檔案的電腦,並可以透過URL將內容傳到用戶 本學期社課主題為網頁前端,包含HTML、CSS、JavaScript --- ## HTML ---- ### 簡介 > HTML(Hypertext Markup Language),中文全名為「超文字標示語言」,是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成,可能包含了段落、清單、圖片或表格...等。 > [來源](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics) HTML是一種標記語言(markup language),<span style="color:red">不是程式語言</span> ---- ### 語法 HTML是由多個元素所組成,每個元素包含起始標籤(opening tag)、結束標籤(closing tag)、內容(content) ![](https://i.imgur.com/q5aRozu.png) (圖片來源:[mozilla](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics)) ---- ### 標籤 標前決定元素的範圍及種類,範圍為起始標籤到結束標籤,起始標籤寫法為`<標籤名稱>`,結束標籤寫法為`</標籤名稱>`,標籤名稱決定了標籤的種類。起始標籤中可以加入屬性,屬性可以提供更多的資訊常搭配css使用。 ```html= <標籤名稱 屬性名稱=屬性內容>內容</標籤名稱> ``` ---- ### 巢狀元素 巢狀元素指在元素的內容中含有另一個元素,可以有無限層 ```html= <標籤名稱1 屬性名稱1=屬性內容1> <標籤名稱2 屬性名稱2=屬性內容2> 內容會同時具有屬性1, 2 </標籤名稱2> </標籤名稱1> ``` ---- <!-- ### 空元素(empty elements) --> ### 部分標籤允許格式不同 只有起始標籤沒有結束標籤和內容,仍可以有屬性,後面/斜線可加可不加 ```html= <img src="image.png" alt="My image"> <hr/> <hr> <hr/> ``` ---- ### Hello world ```html= <!DOCTYPE HTML> <html> <!--This is a hello world webpage--> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p> Hello world Hello world Hello world </p> </body> </html> ``` --- ## HTML tags --- ### \<!DOCTYPE html> 宣告 DOCTYPE 是用來告訴瀏覽器文件類型 (Document Type Declaration, DTD),DOCTYPE大小寫都可以,`<!DOCTYPE html>`代表這是一個HTML5文件 --- ### \<html> `<html>`的範圍即為整個HTML檔案的範圍 --- ### \<head> `<head>`是HTML檔案中的第一個tag,在檔案中必存在且只有一個,其中放置的元素為有關網頁的基本資訊,例如:`<title>`, `<meta>`, `<style>`, `<link>` ---- #### \<title> 設定標題 , 如本次社課講義標題是 ⌈Web 第九堂社課 臺中一中電研社 - HackMD⌋ ,在搜尋引擎中出現的即是標題。 ```html= <title>Your Webpage Title</title> ``` ---- #### \<meta> 非常重要的tag,`<meta>`會決定這個網站在搜尋引擎中的排序。 ```html= <meta charset="utf-8"> <!--設定字集,不同字集有不同的編碼,UTF-8是最常見也最通用的字集--> <meta name="description" content="Some content about your page"> <!---搜尋引擎中出現在標題下的字--> <meta name="keywords" content="keyword1, keyword2, keyword3"> <!--可以讓你的網頁更容易被找到--> <meta name="author" content="your name"> <meta name="copyright" content="版權歸屬"> <!--多少宣告個著作權--> ``` --- ## \<body> 內文都放在這邊 ---- ### \<h1~h6> 標題屬性 ---- ### \<p> 段落tag ---- ### \<br> 換行 ---- ### \<hr> 產生一個水平分隔線 <hr> ---- ### \<pre> 套用內部的排版(TAB, Space, enter etc.) ---- ### \<b> 設為<b>粗體字</b> ---- ### \<em> 設為<em>斜體</em> ---- ### \<mark> <mark>像這樣</mark> ---- ### \<small> 將字<small>縮小</small> ---- ### \<sub>、\<sup> <sup>上標</sup>`<sup>`、<sub>下標</sub>`<sup>` ---- ### \<ins> 加<ins>底線</ins> ---- ### \<del> 加上<del>刪除線</del> ---- ### \<ruby> 和`<rt>`並用加上<ruby>發<rt>ㄈㄚ</rt>音<rt>ㄧㄣ</rt></ruby>,用`<ruby>`包住要加上發音的部分 ---- #### \<rt> 用在`<ruby>`內,在要標記的文字後用`<rt>`包住發音 像<ruby>臺中第一高級中學<rt>臺中第一高級公園兼臺中第一高級考場</rt></ruby> ---- #### \<rp> 在瀏覽器不支援`<ruby>`的情況下會顯示`<rp>`包住的東西 ---- ### 特殊字元 &#[代碼](https://www.w3schools.com/tags/ref_charactersets.asp)使用 --- ### \<ol> 用編號排序 ---- #### `start` 設定數字從多少開始 ---- #### `reversed` 倒數 ---- #### `type` 有`1`、`A`、`a`、`I`、`i`可選 ---- #### \<li> 在`<ol>`內包住每一項 ```html= <ol start='10' type="I" reversed> <li>one</li> <li>two</li> </ol> ``` ---- ### \<ul> 列出每一點,也用`<li>`來包住每一項 如: <ul> <li>98</li> <li>XP</li> <li>7</li> </ul> --- ### \<a> 超連結 ---- #### `herf` ```html= herf="指向位置" herf="mailto:電子郵件" herf="tel:+號碼" ``` ---- #### 超連結用法 ```html= 網頁="網址" 同資料夾:="檔案名稱" 子資料夾:="子資料夾名/檔案名稱" 父資料夾:="../檔案名稱" 絕對路徑:="在電腦上的絕對路徑" ``` ---- #### `download` 可以使點下去會下在其指向的內容物 ---- #### `target` `_self`:此為預設,在自己的頁面開啟 `_blank`:在新分頁開啟 `_parent`:在父層級的畫面打開連結(像在該分頁iframe中的連結設定`target="_parent"`那就會在該分頁開啟連結,而非在iframe內部開啟) `_top`:在整個畫面開啟連結 `frame名稱`:在指定iframe開啟 ---- ### \<img> 嵌入圖片 ---- #### `src` 放入指定的圖片檔的連結,檔名可以是圖片的網頁超連結或在本機的位址<img src="https://i.imgur.com/xoNIKwK.jpg" width=100> ---- #### `height`、`width` 設定長寬,如果只設定其中一個的話,會自動等比例調整 ---- #### `alt` 設定無法顯示時顯示的文字,預設是<img src="https://"> ---- ### \<map> 在使用前要先在`<img>`用`usemap`來為要成為影像地圖的圖片命名 ---- #### `usemap` 用`#`定義map的名字 ---- #### `name` 選定指定的圖片 ---- ### \<area> map的子tag,設定連結的區域 ---- #### `shape` 設定連結區域形狀,有`rect`、`circle`、`poly`、`default` ---- #### `coords` 根據`shape`的值會須設定不同數量的座標,單位是px,左上是(0,0),x座標向右為正,y座標向下為正 `circle`:圓心x座標,圓心y座標,半徑 `rect`:左上x座標,左上y座標,右下x座標,右下y座標 `poly`:順時針列出多邊形所有點的x,y座標 ---- #### `herf` 設定超連結 範例 ```html= <img src="https://i.imgur.com/xoNIKwK.jpg" usemap="#Map"> <map name="Map"> <area shape="circle" coords="200,200,100" href="https://tcirc.tw"> </map> ``` ---- ### \<audio> 支援MP3、OGG、AAC 一樣用`src` ---- #### `preload` 設定是否預先下載 ---- #### `mediagroup` 在同一個URL同時撥放多個聲音 ---- #### `loop` 循環播放 ---- #### `muted` 靜音 ---- #### `autoplay` 自動撥放 ---- #### `controls` 增加按鈕 ---- ### \<video> 一樣用`src`、`controls`、`width`、`height`、`loop`、`muted`、`autoplay`、`preload` ---- #### `poster` 設定播放前顯示畫面 ---- ### \<sourse> `<video>`和`<audio>`的子tag,應付瀏覽器不支援的情況 ---- #### `src` 用法相同 ---- #### `type` 設定檔案的[MIME類型](https://zh.wikipedia.org/wiki/多用途互聯網郵件擴展#內容類型),讓瀏覽器先判斷是否可執行 ---- #### `media` 設定在哪一種媒體撥放如:`all`、`tv`、`screen`、`handheld` <!-- \ ### \<form> js再說 --> ---- ### \<embed> 單獨存在,有多項功能 用`type`、`src`來設定顯示的東西,並且可以用`width`、`hight`來調整大小 ---- ### \<iframe> 使用`src`來連結顯示畫面,也可以用`width`、`hight`來調整大小 ---- #### `srcdoc` 如果瀏覽器支援`srcdoc`屬性,會覆蓋`src`的內容,內部放HTML code ---- #### name 定義此`iframe`名稱來呼叫用 --- ### \<div> 無意義的Tag,但因為可以放屬性所以常用於排版 ---- ### \<table> 表格屬性 ---- #### \<tr> 每一橫行都要用這個標籤包住,要在`<table>`內 ---- ### \<th> 每一格標題欄,由左至右 ---- #### \<td> 每一格內容欄,由左至右 ---- <!-- #### \<thead> #### \<tbody> 表格內容 #### \<tfoot> --> ```html= <table> <tr> <th>標題一</th> <th>標題二</th> </tr> <tr> <td>一之一</td> <td>二之一</td> </tr> <tr> <td>一之二</td> <td>二之二</td> </tr> </table> ``` ---- <table> <tr> <th>標題一</th> <th>標題二</th> </tr> <tr> <td>一之一</td> <td>二之一</td> </tr> <tr> <td>一之二</td> <td>二之二</td> </tr> </table> --- ### \<button> ``` <button type="button"> button </button> ``` ### \<select> 建立一個可用於選擇的區域 #### \<option> 增加一個選項 `value`可以設定要傳出的值 #### \<optgroup> 增加一個選項的群組(會顯示但不能選) --- ## \<section> 標註文件區域,在內部標題會降一級輸出 --- ## \<footer> 頁尾區,通常放公司聯絡訊息、版權資訊、相關連結 --- # HTML實作 <!-- bootstrap --> https://unichk.github.io/tcircWebClass/ --- # CSS <!--我現在發現CSS要刪不少內容--> ---- ## 介紹 > 階層式樣式表(英語:Cascading Style Sheets,縮寫:CSS;又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表)是一種用來為結構化文件(如HTML文件或XML應用)添加樣式(字型、間距和顏色等)的電腦語言,由W3C定義和維護。CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中。[維基百科](https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8) ---- ## 基本語法 ![](https://i.imgur.com/K7Vq31C.png) (圖片來源:[alphacamp](https://tw.alphacamp.co/blog/css-guide-box-model)) ---- * 選擇器(selector):決定要套用格式的標的 * 屬性(propety):決定要更改的樣式種類 * 值(propety value):要設定屬性的值 選擇器後以大括號刮每一行,一行代表一個屬性+值,每一行結尾都必須有分號,css會將大括號內的每一行都套用在選擇器所選擇的目標上。 ---- ### 選擇器(selector) 1. 基本選擇器 1. 通用:`*`,選擇所有元素 2. 標籤(type):`標籤名稱`,選擇所有相同標籤名稱的元素 3. 類別(class):`.類別名稱`,選擇所有該類別名稱的元素(類別可在html標籤中用`class="類別名稱1 類別名稱2"`屬性設定) 4. ID(id):`#ID名稱`,選擇該ID名稱的元素(類別可在html標籤中用`id="ID名稱"`屬性設定) 5. 屬性:`[屬性名稱]`,選擇所有具有該屬性的元素 2. 分組選擇器 1.可用同時使用多個選擇器,以逗號(`,`)隔開 ---- 3. 組合選擇器 ![](https://i.imgur.com/PFfnNwZ.png =x600) (圖片來源:[csssolid](https://www.csssolid.com/35-css-selectors-to-remember.html)) ---- 4. 偽選擇器 1. Pseudo classes:非自行設定的類別而是預設符合某些條件的類別,用`:`隔開,例如`a:visited` 2. [Pseudo elements](https://www.w3schools.com/css/css_pseudo_elements.asp):非自行設定的ID而是預設符合某些條件的元素,用`::`隔開,例如`p::first-line` ---- ### 屬性和值 因為很多所以後面再慢慢列 ---- ### 設定CSS #### tag內 ```html= <tag style="css-declaration">content</tag> <p style="color: red">This text will be red</p> ``` ---- #### head內 習慣在`<head>`內用`<style>`包起來,用法如同.css檔 ```html= <head> <style> h1{ color: #ff0000; } </style> </head> ``` ---- #### 外部引入 ```html= <head> <link rel="stylesheet" href=".css檔的路徑"> </head> ``` ---- ### 單位 css中常用到的單位有 * 絕對單位 1. `px`:像素 * 相對單位 1. `em`:子元素透過「倍數」乘以父元素的 px 值 2. `rem`:每個元素透過「倍數」乘以根元素(html)的 px 值 3. `vw`:viewpoint width,1vw = 視窗寬度的1% 4. `vh`:viewpoint height,1vh = 視窗高度的1% 5. `%`:子元素透過「百分比」乘以父元素的 px 值 ---- ### 顏色表示方法 * 顏色英文名 * `#rrggbb` 由三個十六進位的十六位數字組成,由前至後分別為紅、綠、藍 * `rgb(0~255,0~255,0~255)`紅、綠、藍 * `rgba(0~255,0~255,0~255,0.0~1.0)`紅、綠、藍、不透明度 * `hsl(0~360,0%~100%,0%~100%)`角度,飽和度,明度 * `hsla(0~360,0%~100%,0%~100%,0.0~1.0)`角度,飽和度,明度,不透明度 [HSL](https://www.w3schools.com/html/html_colors_hsl.asp) ---- ### 註解 `/* comment*/` --- ## 屬性和值(統稱:declaration) 從這裡開始以下全部都是屬性和值 --- ## 文字編輯 ---- ### `font-family` 字型,如瀏覽器找不到會往後搜尋 [CSS Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp) ---- ### `font-size` 字型大小 ---- ### `font-style` 設定為普通/傾斜體/斜體 ---- ### `font-weight` 設定粗體粗度 ---- * 數字 * 100 * 200 * 300 * 400 * 500 * 600 * 700 * 800 * 900 ---- * 大小 * normal (400) * bold (700) * bolder * lighter ---- ### `font` 直接設定前面幾個的值 每個值用空白隔開 [詳見](https://www.w3schools.com/cssref/pr_font_font.asp) ```css= div{ font:10px "Times New Roman"; } ``` ---- ### `color` 設定文字[顏色](#顏色設定) --- ## 排版 ---- ### `text-align` * center 置中 * left 置左 * right 置右 * justify ---- ### `text-indent` 首行縮排大小 ---- ### `line-height` 行距大小 ---- ### `letter-spacing` 字元間距大小 ---- ### `word-spacing` 文字間距大小,是根據空白而定 如: <div style="word-spacing:20px"> 一二三 四五六 </div> ---- ### `text-shadow` 文字加上陰影 [詳見](https://www.w3schools.com/cssref/css3_pr_text-shadow.asp) ---- ### `text-decoration` 加上線條,可以是在 <div style="text-decoration:overline">overline:上方</div>: <div style="text-decoration:line-through">line-through:中間</div> <div style="text-decoration:underline">underline下方</div> [詳見](https://www.w3schools.com/cssref/pr_text_text-decoration.asp) ---- ### `text-decoration-color` <div style="text-decoration:overline;text-decoration-color:#5577ff"> 設定text-decoration的顏色 </div> <!-- 版本 --> --- ## background ---- ### `background-color` 設定背景[顏色](#顏色設定) <div style="background-color:lightblue">最基礎的用法</div> ---- ### `background-image` 設定背景圖片 ```css= background-image: url(圖檔超連結) ``` <div style="background-image:url(https://bbs.tcirc.tw/pictrs/image/0xCc05cb5j.jpg)">最基礎的用法 </div> ---- ### `background-repeat` 設定背景圖片是否重複出現 * repeat (預設) 在x方向和y方向重複出現 * repeat-x 在x方向重複出現 * repeat-y 在y方向重複出現 * no-repeat 不重複出現 * space 調整圖片間的間距,讓圖片完整呈現 * sound 調整圖片大小,讓圖片完整呈現 ---- ### `background-position` 設定背景圖片位置 * 由`center`/`left`/`right`和`center`/`top`/`bottom`組成兩個值,如:`right top`;如果只有一個值,另一個沒寫的值會是`center` * `x% y%` 用x座標、y座標比例去抓位置 * `x y` 用x座標、y座標去抓位置 * `x% y` / `x y%` 比例、座標混用 ---- ### `background-size` * `auto` 依原本的寬跟高顯示 * `x% y%` 可以只設一個,另一個會等比例縮放 * `x y` 可以只設一個,另一個會等比例縮放 * `cover` 等比例調整為一個圖片覆蓋整個背景 * `contain` 等比例調整為一個圖片完全顯示 ---- ### `background-attachment` 設定是否隨頁面捲動 * `scroll` (預設) 隨頁面捲動 * `fixed` 不隨頁面捲動 * `local` 除了在iframe外都會隨著頁面捲動 ---- ### `background` 將以上含background字眼的功能全部寫在同一個屬性上 --- ## 長寬 ---- ### `width` 設定物件的寬 ---- ### `hight` 設定物件的長 --- ## Box midel ---- ![](https://i.imgur.com/5oAPRfD.png) * `content box`:中間藍色那塊,顯示內容的位置(如:文字、圖片、標題…) * `padding`:內邊距,在內容和邊框間的空間,預設是0,加大可以使背景範圍加大 * `border`:邊框,可以設定一些邊框圖案 * `margin`:外邊距,邊框外的部分,預設是透明,如果父Tag有背景,在這裡會顯示 ---- ### `margin` 設定邊距大小可以用: * `margin-top:` * `margin-right:` * `margin-bottom:` * `margin-left:` ---- * `margin:` `上` `右` `下` `左` * `margin:` `上` `右和左` `下` * `margin:` `上下` `左右` * `margin:` `上下左右` ※順序不能改 ---- #### 合併 當兩個外邊距相遇時,會採用較大的一方 ---- ### border ---- #### `border-style` 用法類似[margin](#margin) 如:`border-left-style:none`、`boder-style:dotted` [詳見](https://www.w3schools.com/cssref/pr_border-style.asp) ---- #### `border-color` 用法類似[margin](#margin) 如:`border-left-color:red`、`boder-color:#ff0000` ---- #### `border-width` 用法類似[margin](#margin) 如:`border-left-width:5px`、`boder-width:thin` ---- #### `border-radius` * `border-top-left-radius:` * `border-top-right-radius:` * `border-bottom-leftradius:` * `border-bottom-right-radius:` 或是 * `border-radius:`左上 右上 左下 右下 * `border-radius:`左上 右上左下 右下 * `border-radius:`左上右下 右上左下 * `border-radius:`四角 <!-- #### border-image 自訂邊框圖像 --> ---- #### `border` `border:大小 樣式(必填) 顏色`,用法類似[margin](#margin) ---- #### 各方向單獨設定 如:`border-left:`,用法類似[margin](#margin) ---- ### `padding` 用法類似[margin](#margin) ---- ### `resize` 設定是否可以調整長寬 * `none`:不可調整 * `both`:長寬皆可 * `vertical`:可調整長 * `horizontal`:可調整寬 ---- ### display * block 會換行 * inline 不換行 * list-item 會以list呈現,不過預設的符號會在外側,需要用`list-style-position`來設定 [詳細](https://www.w3schools.com/cssref/pr_class_display.asp) ---- ### flex-basis 設定長度或用預設的`auto` ---- ### flex-direction 設定排列方向 * row (預設) 以水平方向由左至右 * row-reverse 以水平方向由右至左 * column 以垂直方向由上至下 * column-reverse 以垂直方向由下至上 ---- ### flex-wrap * nowrap (預設) 同行輸出 * wrap 多行輸出 * wrap-reverse 多行輸出,不過行數順序是右下到上 ---- ### flex-flow 綜合`flex-direction`和`flex-wrap`的功能。 第一像是`flex-direction`的值,第二項是`flex-wrap`的值 ---- ### flex-grow 設定有留白產生時,對留白的分配占比,設定是純數字,會依同一區塊的左數來進行分配 ---- ### flex-shrink 設定有溢出版面的情況時,對溢出進行要減少的部分的分配占比,設定是純數字,會依同一區塊的左數來進行分配 ---- ### align-items 排版處理 * stretch (預設) 如未設定width和hight,會填滿區塊 * flex-start 會將物件往上貼齊,不會自動填滿 * flex-end 會將物件向下貼齊,不會自動填滿 * center 將物件置中 * baseline 會依基準線對齊 ---- ### align-content 用於多行時排版 * stretch (預設) 如未設定width和hight,會填滿區塊 * flex-start 會將物件往上貼齊,不會自動填滿 * flex-end 會將物件向下貼齊,不會自動填滿 * center 將物件置中 * space-between 將一個放最上面,令一個放最下面,剩下平均分配 * space-around 類似`space-between`,但最上方和最下方有其他部分空白的${1\over2}$ ---- ### align-self 個別設定的排版,可以單個單個設定排版方式 ---- ### justify-content * flex-start 放最前 * flex-end 放最後 * center 置中 * space-between 首項在最前,末項在最後、其他均勻分配間隔 * space-around 每個元素**周圍**分配相同空間 * space-evenly 每個元素**間隔**相等 --- ## `position` * `static`:(預設) * `absolute`:以畫面左上角為(0,0),會隨畫面捲動 * `fixed`:以畫面左上角為(0,0),不隨畫面捲動 * `relative`:以元素正常方式定位 <!-- ### clear ### float --> --- ## `visibility` 設定是否顯示 * `visible` (預設) 顯示 * `hidden` 隱藏,但原本的位置會空著 * `collapse` 在\<tr>、\<tbody>、\<col>、\<colgroup>使用是消去該項,其他則與`hidden` --- ## `object-fit` 調整`img`或`video`在指定框架內呈現方式 * `none`:(預設) 保持原尺寸 * `cover`:等比例調整為一個圖片覆蓋整個背景 * `contain`:等比例調整為一個圖片完全顯示 * `fill`:無視比例填滿 --- ## transition ---- ### transition-property 設定游標停在上面時的動畫效果(css屬性) ---- ### transition-duration 設定動畫總時間(單位為s或ms) ---- ### transition-timing-function 改變動畫的速度曲線 [詳細](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) ---- ### transition-delay 設定動畫延遲時間(單位為s或ms) ---- ### :hover 在游標停在上面時使用的值<!--?--> ``` transition-delay:1s ``` --- ## cursor 設定游標圖示(如要上傳自訂圖示,記得用.cur檔) <!-- ## Media Query 設定不同客戶端顯示 --> --- ## CSS framework CSS框架是預先準備好的軟體框架,讓css的撰寫更容易,且可以有標準化的頁面。框架主要包含至少一種的柵格設計(grid),且配備了更多及基於JavaScript的功能。最常見的例如:[Bootstrap](https://getbootstrap.com/) --- # HTML+CSS實作 https://unichk.github.io/tcircWebClass/login.html --- ## 參考資料 https://www.w3schools.com/tags https://www.w3schools.com/cssref/default.asp <!-- https://github.com/unichk/tcircWebClass -->
{"title":"Web 第十週社課 臺中一中電研社","slideOptions":{"theme":"serif","transition":"fade"}}
    543 views
   owned this note