# <font color="#5B4787 ">網頁設計＆創意實作筆記</font> :notebook_with_decorative_cover:
教師筆記連結：https://hackmd.io/@iamfefe/H1HisJiJj
# <font color="#5B4787 ">新版網站</font>
## <font color="#7E67B0 ">影像地圖語法</font>

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="帆布包.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="click" title="click" href="https://www.youtube.com/" coords="655,76,181,78,182,324,185,587,650,590,651,244" shape="poly">
</map>

## <font color="#7E67B0 ">表單語法</font>
<iframe src="https://drive.google.com/file/d/1x31F5G7TKnG4iDaltHYFlOeLc13OB3co/preview" width="640" height="480" allow="autoplay"></iframe>

<iframe width="100%" height="640" frameborder="0" allow="xr-spatial-tracking; gyroscope; accelerometer" allowfullscreen scrolling="no" src="https://kuula.co/share/5NVPM?logo=1&info=1&fs=1&vr=0&sd=1&thumbs=1"></iframe>

# <font color="#5B4787 ">電子書製作</font>
## <font color="#7E67B0 ">主題&組員</font>
==慾望．束縛：421曾羽岑(我)、421陳雨琪、423林椀嫺==
* ### <font color="#5B4787 ">成果展示</font>
<iframe width="1280" height="693" src="https://www.youtube.com/embed/_UOkZsaIzu0" title="慾望．束縛 — 電子書" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

* ### <font color="#5B4787 ">個人貢獻</font>
>封面/底、隔頁、染色小雞由來、多媒體
* ### <font color="#5B4787 ">心得反思</font>
:::info
很多人說：「動物，能夠治癒人心。」其中，最好的例子，就是現代人大多會飼養＂毛小孩＂來當作寂寞時的陪伴，透過牠們的行為、聲音，得到慰藉，但，有的人卻把牠們當作炫耀的資本，過度地訓練牠們不同的技能，穿上各式各樣的外衣，那本該屬於牠們的純與真，早已隨著一層又一層的束縛消失。因此，想透過這本電子書，讓牠們有向大眾發聲的機會。在製作過程中，我也學到了不一樣的多媒體技巧，雖然在截止的那天被我不小心刪掉了一些，因此有點遺憾，但，付出努力所得到的知識，是更大的收穫。
:::
* ### <font color="#5B4787 ">學習重點</font>
>電子書的多媒體操作、大字排版
---
# <font color="#5B4787 ">專題網站VSCODE</font>
## <font color="#7E67B0 ">專題架構</font>
<iframe src="https://drive.google.com/file/d/1VoPHQWB08l-M-_hA-odvr1XPfmAe5H9z/preview" width="640" height="480" allow="autoplay"></iframe>

## <font color="#7E67B0 ">主題&組員</font>
:::info
客家藍染：421曾羽岑(我)、421陳雨琪、423林椀嫺
:::

* ### <font color="#5B4787 "> 工作分配：</font>
> 421曾羽岑（我）：首頁+博採眾議
421陳雨琪：產品頁+細節處理+團隊介紹
423林椀嫺：DIY頁+地圖
* ### <font color="#5B4787 "> 製作心得：</font>
:::info
這次的專題是利用VSCode製作，跟上次用Figma比起來真的難了許多，如何把想法寫成程式，讓它在網頁上呈現出心中想要的樣子，是我在整個過程中遇到最大的難題，但是，從中我也學會了如何溝通、承受壓力、分擔責任，我很謝謝我的組員願意犧牲他們的時間，仔細處理每個細節，讓結果更加理想。
:::
<iframe src="https://drive.google.com/file/d/10k7I9l9yynOZRLXl4gKqC82FCgFeEkp7/preview" width="640" height="480" allow="autoplay"></iframe>
<iframe src="https://drive.google.com/file/d/1a43dyfvh_Yb2B8lzSIWc4ZAZhkcLG4Bx/preview" width="640" height="480" allow="autoplay"></iframe>
<iframe src="https://drive.google.com/file/d/1P5mTaKEwKyYaKchi80vro7bLM7YEZ5hY/preview" width="640" height="480" allow="autoplay"></iframe>
<iframe src="https://drive.google.com/file/d/1Jf4wjOo96DPVnQftKJItwrfdT1k40ggE/preview" width="640" height="480" allow="autoplay"></iframe>

---
# <font color="#5B4787 "> 專題網頁UIUX設計</font>
## <font color="#7E67B0 ">主題&組員</font>
:::info
客家藍染：421曾羽岑(我)、421陳雨琪、423林椀嫺
:::
* ### <font color="#5B4787 "> 工作分配：</font>

> 421曾羽岑（我）：頁首（固定欄）、超連結、登入介面
421陳雨琪：內容主體、細節處理
423林椀嫻：頁尾、地圖、客服介面、"關於我們"介紹

* ### <font color="#5B4787 "> 製作心得：</font>
:::info
在製作網站的過程中，其實是真的很緊張，害怕拖後腿，因為我知道自己在這方面真的沒有甚麼天分。在設計頁首時，常常會去問她們的意見，問這樣好不好、問有沒有要再調整的地方，感覺她們都快被我問到煩了，但還是會提出自己的意見、看法。所以很謝謝我的組員願意包容我的不足，用她們的能力來補足我的缺失，在半夜我腦袋當機的時候，能一次又一次，不厭其煩地說明我需要改進的地方。
:::

* ### <font color="#5B4787 "> 網站截圖：</font>
<iframe src="https://drive.google.com/file/d/1QtRF0Kokw1MczUgVxzbi2k1Vat0lk82E/preview" width="640" height="480" allow="autoplay"></iframe>
<iframe src="https://drive.google.com/file/d/1x1ocv9BHdLrDdihoyoL9VxxVHwkXNdE4/preview" width="640" height="480" allow="autoplay"></iframe>

* ### <font color="#5B4787 "> 網站：</font>
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FnOFu9LZSBDcOeKUUlWZgIh%2F10%25E7%25B4%259A%25E8%25B3%2587%25E6%2596%2599014135%25E6%259B%25BE%25E7%25BE%25BD%25E5%25B2%2591's-team-library%3Fpage-id%3D0%253A1%26node-id%3D0%253A1%26viewport%3D1607%252C405%252C0.15%26scaling%3Dscale-down-width%26starting-point-node-id%3D414%253A3" allowfullscreen></iframe>

* ### <font color="#5B4787 "> 網址：</font>
https://reurl.cc/3YzLA8

* ### <font color="#5B4787 "> QRcode：</font>

## <font color="#7E67B0 ">參考書籍</font>

全國專題得獎作品
https://vtedu.mt.ntnu.edu.tw/nss/s/business/505</font>
___
## <font color="#7E67B0 ">開發練習</font>
<font color="#5B4787 ">* Google Chrome與網頁開發
* f12,改色,改字,下程式,抓全頁畫面(Ctrl+shift+P) 打capture full size screenshot
* https://popcat.click/
setInterval(function () { document.dispatchEvent(new KeyboardEvent(‘keydown’)); }, 500);</font>
## <font color="#7E67B0 ">學習工具</font>
<font color="#5B4787 ">W3 school https://www.w3schools.com/

標題大小
<h1>My First Heading</h1>
<h2>My First Heading</h2>
<h3>My First Heading</h3>
段落
<p>My first paragraph.</p>
<br>換行
<p>My first<br> paragraph.</p>

<h1 style="color:rgb(155,155,255);background-color:blue;">421 35 曾羽岑</h1>

VS code https://code.visualstudio.com/
常用套件 html,live server,prettier,chinese
</font>
___
## <font color="#7E67B0 ">靈感開發</font>
<font color="#5B4787 ">pinterest
https://www.pinterest.com/

___
Wix
https://www.wix.com/

自我介紹網站
https://0141353.wixsite.com/my-site
</font>
___
## <font color="#7E67B0 ">各種素材</font>
<font color="#5B4787 ">質感圖片下載pexels
https://www.pexels.com/zh-tw/
影片下載pexels video
https://www.pexels.com/search/videos/videos/
使用規則
https://www.pexels.com/zh-tw/license/
向量設計freepik
http://www.freepik.com/
插畫圖片 https://undraw.co/illustrations
組合插畫 https://www.openpeeps.com/</font>
___
## <font color="#7E67B0 ">配色網站</font>
<font color="#5B4787 ">https://coolors.co/
改背景,改box背景,改字顏色等-超美漸層產生器 https://webgradients.com/
改插圖-超好用插圖
Humaaans：人物角色與場景插畫 use with blush
OpenDoodles：可愛的人物角色插畫
unDrawn：簡報利器插畫圖庫
Glaze：精緻向量插畫
manypixels：可自行定義配色
mixkit-Art：充滿藝術感的精緻插畫
illlustrations：生活物品插畫
isoflat：最大的免費立體投影插畫網站
Paaatterns：Patterns 圖樣插畫</font>

---
## <font color="#7E67B0 ">職涯心得影片</font>
<font color="#5B4787 ">VR超牆職業-遊戲設計
https://www.youtube.com/watch?v=XTDHxJ28kZA&t=75s
* 創意發想
* 產品設計
* 產品開發</font>
:::info
看完影片之後，我更加了解了遊戲設計師，不僅本身是跨領域的工作，工作團隊裡面也有著各式各樣的職業，他們各司其職，完成遊戲的研發。工作環境的自由度也很大，可以去看書或打遊戲尋找靈感，其中我覺得最特別的是那個由各種靈感組合成的便利貼牆，能將想法隨時紀錄、寫下。
:::
___
## <font color="#7E67B0">UI介面設計</font>
### <font color="#5B4787 ">AdobeXD

Plugins
* unDraw 插圖
* Icondrop 按鈕
* iconsout 找icon
* UIFaces 自動人臉
* Quick Mockup 各類預設模板
* unsplash 找圖
* quickmockup
* color spark 隨機變色
* blobular 隨意色塊
* vizzy charts 統計圖表
* lottie files小動圖(X) 改用iconsout找lottie animations
* google sheet 對照資料庫
* rotato 專案展示(X)
* lorem ipsum 產生假字
### Figma
</font>
---
## <font color="#7E67B0">小論文製作筆記&心得</font>
* <font color="#5B4787 ">前言：</font>
>清楚描述動機、背景、問題
具體說明目的
條列式列點 e.g.(一)...(二)...(三)...
說明獨特性 :arrow_right: 商店印象

>世界觀察
研究對象&議題關聯、開放性論述
不可揭露個人隱私:exclamation::exclamation::exclamation:

>中華民國統計資訊網 stat.gov.tw/mp.asp?mp=4
數據分析資料競賽 datastation.org.tw/
SDGs sdgs.un.org/goals
親子天下 www.parenting.com.tw/
未來城市 uturecity.cw.com.tw/

>九宮格思考法&學習單
:arrow_right: 動機、背景、目的

* <font color="#5B4787 ">文獻探討：</font>
>子議題：
　1.意義
　2.內涵
　3.發展
　4.相關論述、研究

==商店印象結合顧客滿意度==

* <font color="#5B4787 ">研究方法：</font>
> 文獻分析法
調查法->問卷
訪談法->人名用代號,質性研究
實驗研究法

* <font color="#5B4787 ">結論：</font>
> 總結前面論點
提出個人觀點

:::info
心得：
很開心能夠參與這次的講座，也讓我更加了解如何製作小論文，哪些地方是需要加強的，哪些地方是需要避免的，怎麼貼緊主題，怎麼清楚描述動機、背景、目的，連貫上下文。
:::
___

# <font color="#5B4787 ">Html</font>
vscode：https://code.visualstudio.com/
codepen：https://codepen.io/pen/

### 常用vscode套件 html,live server,prettier,chinese,HTML format
:::info
html:5按tab
h1按tab
啟用live sever
:::
## <font color="#7E67B0 ">語法練習</font>

> html5 基本頁面
h1…h6 大標題
p 段落
lorem 假字
br 換行
pre 預設排版
a 超連結
href 放連結,或是#段落命名
target _self 在同一個標籤頁跳轉 _blank 另開標籤頁
b 粗體
em 斜體
span 段落裏的小片段
ul>li5 項目符號
ol>li3 項目編號
< !-- 註解 - - > 中間無空格，ctrl+/
table 表格
tr 列
td 欄 (colspan跨欄,rowspan跨列)
img 圖片
div 盒子
## <font color="#7E67B0 ">結構型HTML</font>
注意網頁基本結構 :heavy_exclamation_mark::heavy_exclamation_mark:



## <font color="#7E67B0 ">網頁結構</font>
# <font color="#5B4787 ">CSS</font>
>width 寬
height 高
border 框 1px solid red 粗度，實線，紅色

>color 顏色 有4種寫法:寫英文,rgb,rgba,#色碼
background-color 背景顏色
background-image 背景圖片
url(“img/2.jpg”) 路徑與檔名

>font-size 字大小
font-family 字型
font-weight 字重
text-shadow 字陰影(box-shadow 方塊陰影)
letter-spacing 字間距

>padding內距 上左下右
margin外距 [border三者差別]

>display 佈局 flex彈性盒子 df
justify-content 對齊主軸內容 jcc
align-items 對齊交錯軸內容 aic
/* 註解*/ ctrl+/

>transform 變形說明
transform 3d
filter 濾鏡說明
animate 動畫說明
position:absolute 絕對定位
position:relative 相對定位
position:fixed 固定定位
overflow:hidden 溢出隱藏
z-index 圖層順序
transition:all 2s ease 動畫速度

## <font color="#7E67B0 ">注意單位寫法:grey_exclamation: </font>


## <font color="#7E67B0 ">青蛙排版練習:frog: </font>
## <font color="#7E67B0 ">HTML&CSS練習成果:computer: </font>
<iframe src="https://drive.google.com/file/d/1ghXmCJHWNgA_XXosUPtr2Z1lSVkrtgRZ/preview" width="640" height="480" allow="autoplay"></iframe>

<!DOCTYPE html>


<!-- 網頁開始(ctrl+/)-->
<html lang="en">

<!-- 頭 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* "*"代表全部都要套用 */
        * {
            /* 動畫速度0.5秒減速 */
            transition: all 0.5s ease;
            font-family: 微軟正黑體;
            margin: 0px;
            padding: 0px;
        }

        body {
            /* background-color: rgb(185, 169, 221); */
            background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
        }

        h1 {
            color: rgb(216, 95, 156);
            font-size: 50px;
            text-shadow: #000;
        }

        h1:hover {
            color: blanchedalmond;
            /* 字間距 */
            letter-spacing: 10px;
            /* 橫坐標、縱座標、陰影大小、顏色 */
            text-shadow: 1px 1px 5px #000;
        }

        img {
            width: 150px;
            height: 150px;
            /* 切圓角 */
            border-radius: 50%;
        }

        img:hover {
            border: 5px solid rgb(243, 230, 253)
        }

        .pics {
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 高度固定400 */
            height: 300px;
            /* 寬度60% */
            width: 60%;
            /* 邊界自動 */
            /* margin:auto; */
            /* 邊界上、左、下、右 */
            /* margin:100px 60px 200px 90px; */
            margin-left: 200px;
            /* 圓角邊 */
            border-radius: 20px;
        }

        .pics:hover {
            /* margin:100px 60px 200px 9px; */
            margin-left: 300px;
            /* 橫坐標、縱座標、陰影大小、顏色 */
            box-shadow: 1px 1px 10px #000;
        }

        .pics img,
        .pics2 img {
            margin: 1vw;
            filter: grayscale(1) blur(3px);
        }

        .pics img:hover {
            filter: grayscale(1);
            filter: blur(0px);
            transform: rotate(60deg) scale(1.3);
        }

        .pics2 {
            /* bgc,df,jcc,aic */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 高度固定400 */
            height: 300px;
            /* 寬度60% */
            width: 60%;
            /* 邊界自動 */
            /* margin:auto; */
            /* 邊界上、左、下、右 */
            /* margin:100px 60px 200px 90px; */
            margin-left: 200px;
            /* 圓角邊 */
            border-radius: 20px;
        }

        section {
            /* padding: 4vw; */
            padding-left: 4vw;
            padding-right: 4vw;
        }

        nav {
            /* 背景顏色 */
            /* background-color: rgb(211, 130, 214); */
            background-image: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);
            /* 顏色(字) */
            color: rgb(255, 255, 255);
            width: 100%;
            /* 固定在上面 */
            position: fixed;
        }

        nav ul {
            list-style: none;
            /* 讓項目符號變彈性，就可以橫排 */
            display: flex;
        }

        nav ul li a {
            font-size: 20px;
            font-weight: 400;
            margin: 20px;
            color: white;
            text-decoration: none;
            display: flex;
        }

        nav ul li:hover {
            font-size: 25px;
            font-weight: 400;
            margin: 20px;
            transition: all 0.2s ease;
        }

        nav ul li:first {
            font-size: 24px;
            font-weight: 800;
            margin-top: 15px;
            transition: all 0.2 ease;
        }

        @keyframes movetgo {
            0% {
                color: rgb(158, 55, 98);
            }

            50% {
                margin-left: 30px;
            }

            100% {
                color: rgb(231, 124, 187);
            }
        }

        #movet {
            animation: movetgo 1s ease infinite;

        }

        table {
            width: 80%;
            background-color: #fff;
            color: rgb(2, 0, 1);
            margin: auto;
            margin-top: 20px;
            text-align: center;


        }

        /* 列第一個 */
        tr:first-child {
            background-color: rgb(235, 170, 186);
        }

        tr:nth-last-child(even) {
            background-color: rgb(197, 157, 172);

        }

        p:first-letter {
            font-size: 50px;
            color: rgb(209, 80, 134);
        }

        p:nth-child(even) {
            color: #fff;
        }

        td {
            /* 文字置中 */
            text-align: center;
        }

        #s1 {
            padding-top: 60px;
        }
    </style>




</head>


<!-- 主體開始 -->

<body>

    <header>
        <nav>
            <ul>
                <li class="logo">
                    <ion-icon name="heart-half-outline"></ion-icon>
                </li>
                <li><a href="#s1">沉與其</a></li>
                <li><a href="#s2">沉與其</a></li>
                <li><a href="#s3">沉與其</a></li>
                </ul3>
        </nav>
    </header>
    <!-- <br><br> -->
    <section id="s1">
        <h1>Hello</h1>
        <h1>沉與其</h1>
        <p>
            <b>Lorem</b> ipsum dolor sit amet consectetur adipisicing elit. Quis tempore veniam fuga perspiciatis, sequi
            iusto? A sit repudiandae saepe nisi tempore? Laudantium iure architecto iste laboriosam possimus odio modi
            error.
            <span>Quasi repellendus adipisci possimus illum.</span> Eum similique amet quia, vitae ab voluptatem ullam
            repellendus alias libero, vel dolorum non repudiandae. Reprehenderit nihil et quam doloribus accusamus
            voluptas consequuntur aliquam ipsa.
            Earum amet consectetur quibusdam odit sunt nostrum aliquam, laboriosam aut? Inventore suscipit eius
            consequatur corporis perspiciatis aliquid saepe repellat totam placeat? Voluptate tempora deleniti vitae
            aliquam, natus voluptas necessitatibus incidunt.
            <br>
            <em>----by Doris</em>
        </p>
        <!-- ctrl shift +d 可快速刪除一行 -->
        <div class="pics">
            <img src="https://picsum.photos/seed/picsum/200/300" alt="">
            <img src="https://picsum.photos/seed/picsum/200/300" alt="">
            <img src="https://picsum.photos/seed/picsum/200/300" alt="">
            <img src="https://picsum.photos/seed/picsum/200/300" alt="">
        </div>
    </section>


    <section id="s2">
        <h1 id="movet">Hello</h1>
        <h1>沉與其</h1>
        <p>
            <b>Lorem</b> ipsum dolor sit amet consectetur adipisicing elit. Quis tempore veniam fuga perspiciatis, sequi
            iusto? A sit repudiandae saepe nisi tempore? Laudantium iure architecto iste laboriosam possimus odio modi
            error.
            <span>Quasi repellendus adipisci possimus illum.</span> Eum similique amet quia, vitae ab voluptatem ullam
            repellendus alias libero, vel dolorum non repudiandae. Reprehenderit nihil et quam doloribus accusamus
            voluptas
            consequuntur aliquam ipsa.
            Earum amet consectetur quibusdam odit sunt nostrum aliquam, laboriosam aut? Inventore suscipit eius
            consequatur
            corporis perspiciatis aliquid saepe repellat totam placeat? Voluptate tempora deleniti vitae aliquam, natus
            voluptas necessitatibus incidunt.
            <br>
            <em>----by Doris</em>
        </p>
        <!-- ctrl shift +d 可快速刪除一行 -->
        <div class="pics2">
            <img src="https://picsum.photos/seed/picsum/200/300" alt="">
            <img src="https://picsum.photos/seed/picsum/200/300" alt="">
            <img src="https://picsum.photos/seed/picsum/200/300" alt="">
            <img src="https://picsum.photos/seed/picsum/200/300" alt="">
        </div>
    </section>

    <section id="s3">
        <h1>hiiiiii</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptate eligendi a incidunt cumque
            eveniet provident maiores sapiente, dolorum, mollitia, suscipit itaque aut. Odio, doloremque. Eaque
            quibusdam magnam quae ullam?
            Voluptates, quaerat aperiam non assumenda modi iure reiciendis doloribus beatae corrupti harum quia
            distinctio quasi ipsa voluptatem! Doloribus at ipsam fugiat minima dolorum dicta quam modi. Eos, repudiandae
            minima? Repellat?
            Illum quidem laboriosam impedit est accusamus sequi minus optio ut, debitis provident possimus cum beatae
            esse, tempore labore tenetur distinctio. Repellat incidunt est consequuntur porro. Omnis porro itaque minus
            voluptates.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptate eligendi a incidunt cumque
            eveniet
            provident maiores sapiente, dolorum, mollitia, suscipit itaque aut. Odio, doloremque. Eaque quibusdam magnam
            quae
            ullam?
            Voluptates, quaerat aperiam non assumenda modi iure reiciendis doloribus beatae corrupti harum quia
            distinctio quasi
            ipsa voluptatem! Doloribus at ipsam fugiat minima dolorum dicta quam modi. Eos, repudiandae minima?
            Repellat?
            Illum quidem laboriosam impedit est accusamus sequi minus optio ut, debitis provident possimus cum beatae
            esse,
            tempore labore tenetur distinctio. Repellat incidunt est consequuntur porro. Omnis porro itaque minus
            voluptates.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti voluptate eligendi a incidunt cumque
            eveniet
            provident maiores sapiente, dolorum, mollitia, suscipit itaque aut. Odio, doloremque. Eaque quibusdam magnam
            quae
            ullam?
            Voluptates, quaerat aperiam non assumenda modi iure reiciendis doloribus beatae corrupti harum quia
            distinctio quasi
            ipsa voluptatem! Doloribus at ipsam fugiat minima dolorum dicta quam modi. Eos, repudiandae minima?
            Repellat?
            Illum quidem laboriosam impedit est accusamus sequi minus optio ut, debitis provident possimus cum beatae
            esse,
            tempore labore tenetur distinctio. Repellat incidunt est consequuntur porro. Omnis porro itaque minus
            voluptates.
        </p>
        <div>
            <table>
                <tr>
                    <td>byebye沉與其</td>
                    <td>byebye沉與其</td>
                    <td>byebye沉與其</td>
                </tr>
                <tr>
                    <td>沉與其</td>
                    <td>沉與其</td>
                    <td>沉與其</td>
                </tr>
                <tr>
                    <td>沉與其</td>
                    <td>沉與其</td>
                    <td>沉與其</td>
                </tr>
                <tr>
                    <td>沉與其</td>
                    <td>沉與其</td>
                    <td>沉與其</td>
                </tr>
                <tr>
                    <td>沉與其</td>
                    <td>沉與其</td>
                    <td>沉與其</td>
                </tr>
            </table>
        </div>

    </section>


    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>






</html>

<!-- 網頁結束(ctrl+/)-->