---
# System prepended metadata

title: 114113黃薪宇的隨堂筆記

---

# 114113 黃薪宇的筆記:zzz:
### :link:[老師的筆記](https://hackmd.io/@iamfefe):old_key:
### :link:[自我介紹網站](https://1141130.wixsite.com/austin):grinning:
---
## 自我介紹
:::info
* ### 我的興趣是打籃球、彈鋼琴、拉小提琴:violin:。
* ### 平常假日喜歡出去玩，喜歡出去透透氣。
* ### 喜歡吃甜食，尤其是草莓類的。
:::

## 未來期許
:::success
* ### 在一年級時學程式語言學得還不錯，所以希望能更快學會網頁設計。
* ### 在比賽方面可以全力以赴，得到最好的結果。
:::
---
## 網頁全面截圖
#### 先按f12，ctrl+shift+p，在打full，按紫色的鍵

## 語法練習
> <h1 style="color:#776D5A !important">大標題</h1>
> <h3 style="color:red !important">小標題</h3>
> <p style="background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); !important">內文</p>
> ;background-color:blue;
> 
> ```htmlembedded=
> <h1>大標題</h1>
> <h3>小標題</h3>
> <p>內文</p>
> ```
### 筆記色碼：
#776D5A
#235789
#6D1A36
#C6D8D3
#F0F2A6



---

## Code Combat通過證書

![註解 2023-12-06 105029](https://hackmd.io/_uploads/r1B3-var6.png)


---
## 網頁設計畫面

![截圖 2024-01-14 上午1.52.10](https://hackmd.io/_uploads/BJExCHeY6.png)

---

## 校內專題比賽作品
### :link:[校內專題比賽作品書](https://drive.google.com/file/d/1EEEteTtscbvzymR14AoxPWuaA0OkkpY3/view)
### :link:[校內專題比賽簡報](https://drive.google.com/file/d/16irCybBImK5FKYzc0NdYd5wo02SuAxE1/view)

---
## 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>AUSTIN</title>
    <link rel="icon" href="https://picsum.photos/10/10" />
    <style>
      * {
        transition: all 0.5s ease;
      }
      body {
        background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      }
      h1 {
        color: #5f7496;
        text-shadow: 2px 2px 10px #5f7496;
      }
      h1:hover {
        color: #cab5ae;
        font-size: 30pt;
      }
      img:hover {
        margin-left: 100pt;
        border: 3px solid rgba(28, 83, 121, 0.644);
      }
      table {
        border: 1px solid black;
      }
      td {
        width: 60px;
        border: 1px solid black;
        background-color: #cab5ae;
      }
    </style>
  </head>
  <body>
    Hi Austin wellcome back
    <h1 id="home">我是大標題</h1>
    <h2>我是大標題</h2>
    <h3>我是大標題</h3>
    <h4>我是大標題</h4>
    <h5>我是大標題</h5>
    <h6>我是大標題</h6>
    <hr />
    <h1><b>Austin view</b></h1>
    <img src="https://picsum.photos/600/300" alt="" />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
      perspiciatis maiores, totam non, omnis rem molestiae blanditiis quo
      doloribus voluptates ipsa quaerat eius quae hic voluptatum obcaecati
      nihil, explicabo earum. Cupiditate rerum saepe consequuntur? <br />At
      recusandae iure rerum facere, ad maxime accusamus eveniet non asperiores
      ipsam ab? Laborum nulla culpa nesciunt exercitationem iusto quaerat
      asperiores? Soluta ab quis enim odio. Harum porro neque consequatur
      nostrum deleniti perspiciatis quas necessitatibus accusantium eum quam!
      Culpa velit dignissimos fugiat, autem vel saepe error nulla fugit vero
      dicta minima necessitatibus, alias, inventore quaerat aspernatur?
      Aspernatur labore illum voluptate, iste optio eligendi deleniti alias
      dolor velit dolorem vel voluptatibus cum blanditiis hic eos libero ratione
      itaque sequi accusantium vero voluptates! Totam magni debitis tenetur ad.
      Officiis, nobis sunt fugiat ipsa perspiciatis porro, consequuntur
      doloremque inventore iure adipisci suscipit iusto ipsam aspernatur et
      nesciunt. Esse ab provident iste ut nulla dolores nostrum? Molestias illum
      animi cumque.
    </p>
    <hr />
    <h1><b>個人作品功能</b></h1>
    <hr />
    <h3>特色產品</h3>
    <ul>
      <li>魚腥草</li>
      <li>雞蛋</li>
      <li>蔥油餅</li>
    </ul>
    <h3>寄送方式</h3>
    <ol>
      <li>郵寄</li>
      <li>冷凍貨送</li>
      <li>自取</li>
    </ol>

    <!-- 超連結 -->
    <a href="https://tw.yahoo.com/" target="_blank">連到yuhoo</a>
    <a href="mailto:114113@clvsc.tyc.edu.tw">傳訊息給Austin</a>
    <a href="#home">回首頁</a>

    <table>
      <tr>
        <td>班級</td>
        <td>座號</td>
        <td>姓名</td>
        <td>成績</td>
      </tr>
      <tr>
        <td>421</td>
        <td>13</td>
        <td>黃薪宇</td>
        <td>100</td>
      </tr>
    </table>

    <table>
      <tr>
        <td colspan="3">test</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">test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>
  </body>
</html>

```



