# **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)
## 
:::
---
## 自我介紹
:::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>
```
Google Drive
Gist
Clipboard
Sign in with Wallet
