---
# System prepended metadata

title: 114110游竣安的網頁設計筆記

---

![](https://hackmd.io/_uploads/HkjWmMIza.png)
# **114110游竣安的網頁設計筆記:smile:**
:::info
## *[老師的筆記](https://hackmd.io/@iamfefe/HyiBBJsph)*
## [WIX網站自我介紹](https://zack951026.wixsite.com/zack-s)
## [Figma校網](https://myppt.cc/WRh0OB)
## [魚腥草雲端專題](https://drive.google.com/drive/folders/127D7XYBuW39N1xkSkoUfg72vNMInwjYg?usp=sharing)
## [魚腥草excel雲端思維](https://reurl.cc/6QE6YV)
## [魚腥草Figma專題](https://www.figma.com/file/0w7MGCGlZlqwoouIxw6yqO/Untitled?type=design&node-id=0%3A1&mode=design&t=ZsklpyueVFcXK1Q4-1)
## ![註解 2023-12-06 103604](https://hackmd.io/_uploads/Skv7A8ara.png)
:::
---
 ## 自我介紹
:::danger
大家好~我是資2^th^1的游竣安
喜歡打籃球:basketball: 愛運動:muscle: 對~~讀書~~不是很感興趣
但還是會盡力學習如何製作網頁的	:+1:
:::
---
 ## 本學年在這堂課設定的目標
:::info
我希望可以在這門課程做出實用又好玩的網頁
提供大家使用與欣賞:raised_hands:
:::
---
 ## 語法練習
:::success
<h1 style='background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);color:gray !important'>大標題</h1>
<h4 style='background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
 background-blend-mode: multiply,multiply;color:white!important'>小標題</h4>
<p style='background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);color:gray!important'>內文<p>
    
程式碼內容如下:

```htmlembedded=
<h1 style='background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);color:gray !important'>大標題</h1>
<h4 style='background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
 background-blend-mode: multiply,multiply;color:white!important'>小標題</h4>
<p style='background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);color:gray!important'>內文<p>
```

:::
---
## HTML CSS語法
```htmlembedded=
<!DOCTYPE html>
<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>昀澤</title>
    <link rel="icon" href="https://picsum.photos/600/300" />
    <style>
      * {
        transition: all 2s ease;
      }
      body {
        background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
      }
      table {
        border: 5px solid #1a1b1b;
      }
      td {
        width: 5%;
        height: 5%;
        border: 2.5px solid #121213;
        background-color: rgb(193, 168, 240);
      }
      img {
        width: 200px;
        height: 200px;
        /* 切圓角 */
        border-radius: 35%;
      }
      td {
        /* 文字對齊置中 tac  */
        text-align: center;
      }
    </style>
  </head>
  <body>
    hello
    <h1 id="home">我是大標題1</h1>
    <h2><i>我是大標題2</i></h2>
    <h3>我是大標題3</h3>
    <h4>我是大標題4</h4>
    <h5>我是大標題5</h5>
    <p><b>DECIDE BY ZACK</b></p>
    <img src="https://picsum.photos/600/300" alt="" />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />Ratione
      perferendis hic voluptas, distinctio voluptatum et excepturi consequatur
      iste sed consequuntur a tempore eveniet recusandae, quod aliquid sequi
      ipsum voluptatem perspiciatis. <br />Corrupti illo enim voluptate mollitia
      blanditiis, rem cumque optio saepe! <br />Molestias error aut perspiciatis
      officia doloribus aliquam modi magnam, commodi alias deserunt neque, quod
      saepe enim reprehenderit dolor nesciunt consectetur. <br />Odit in
      explicabo, quaerat ullam libero aperiam modi sed facilis, quidem nisi quas
      hic! <br />Voluptatibus magnam veniam hic, laborum, distinctio
      exercitationem, officiis amet illo vero aliquid velit magni totam rem!
    </p>
    <h3>特色產品</h3>
    <ul>
      <li>魚腥草</li>
      <li>雞蛋</li>
      <li>蔥油餅</li>
    </ul>
    <h3>寄送方式</h3>
    <ol>
      <li>郵寄</li>
      <li>冷凍貨運</li>
      <li>自取</li>
    </ol>
    <a href="https://hackmd.io/wW_x2nmVQ92ytjq-hMgVDA" target="_blank"
      >游竣安的筆記</a
    >
    <a href="mailto:114314@clvsc.tyc.edu.tw">寫信給小夫</a>
    <a href="#home">回首頁</a>
    <table>
      <tr>
        <td colspan="3">合併列</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td rowspan="2">合併欄</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>
  </body>
</html>

```









