> <h1 background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)> 胡靜桓の網頁設計筆記114228</h1>
[Fefe](https://hackmd.io/@iamfefe/HyiBBJsph)
---
<h1 style="color:#275DAD" !important>自我介紹</h1>
<p style="color:#9793B8" !important>我是資二二胡靜桓，興趣是彈吉他，也是吉他社的幹部呦</p>
___
<h1 style="color:#275DAD" !important>我的學習目標</h1>
<p style="color:#9793B8" !important>高中之前沒有學過吉他，但因為興趣，所以有努力在學，現在社團的職位是教學長喔
所以雖然現在是第一次接觸網頁設計，但我希望也能像對吉他一樣，**熟能生巧**
然後希望以後用的到，最重要的還是要賺錢錢啦 :money_mouth_face: </p>
___
<h1 style="color:#275DAD" !important>全螢幕截圖</h1>
ctrl+shift+p 輸入FULL
<h1 style="color:#275DAD" !important>大標題打法</h1>
* ## <h1>0906 筆記</h1>
* <h1>html語法</h1>
table...表格
* <h2>第二大標題</h2>
<h1>昀澤網頁設計</h1>
```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=, initial-scale=1.0" />
<title>昀澤農場</title>
<link rel="stylesheet" href="123.jpg">
</head>
<style>
* {transition:all 1s ease;
}
body {
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
h1:hover{
letter-spacing: 20px;
color: rgb(192, 107, 107);
text-shadow: 5px 5px 10px rgb(238, 188, 231);
}
h2:{color: rgb(74, 3, 3);
}
p {
color: aliceblue;
}
a {
color:#642456;
}
img:hover{
border-radius:50%;
margin-left: 2cm;}
</style>
<body>
hello
<h1 id="home">我是大標題1</h1>
<h2>我是大標題2</h2>
<h3>我是大標題3</h3>
<h4>我是大標題4</h4>
<h5>我是大標題5</h5>
+
<img src="https://picsum.photos/900/200" alt="" />
<h1>昀澤介紹</h1>
<p>
<ul>特色產品
<li>魚腥草</li>
<li>蔥油餅</li>
</ul>
<ol>配送方式
<li>郵寄</li>
<li>冷凍配送 </li>
<li>自取</li>
</ol>
<a href="mailto:@jenny950918@gmail.com">寫信給我</a>
<a href="https://www.youtube.com/@BabyXu-520"target="_blank">來看看我</a>
<p>Lorem ipsum dolor</br> sit amet consectetur adipisicing elit. Placeat nihil
nisi consectetur neque nostrum mollitia aperiam rem fuga accusantium
velit, in quod nulla, architecto quasi minus consequuntur, quibusdam
doloribus dignissimos! Facilis doloremque suscipit sint neque perferendis
tenetur repellat a quis explicabo atque facere pariatur in accusamus
delectus modi repellendus recusandae dolorum tempore inventore minima,
nihil autem nam quidem esse. Culpa. Nostrum, cumque minima delectus
quisquam adipisci repellat perferendis necessitatibus aliquam aliquid
obcaecati placeat nihil qui nulla repellendus non. In, nihil. Ipsa neque
voluptas dignissimos commodi harum reprehenderit quis minus nam?
</p>
<p> Lorem ipsum dolor</br> sit amet consectetur adipisicing elit. Placeat nihil
nisi consectetur neque nostrum mollitia aperiam rem fuga accusantium
velit, in quod nulla, architecto quasi minus consequuntur, quibusdam
doloribus dignissimos! Facilis doloremque suscipit sint neque perferendis
tenetur repellat a quis explicabo atque facere pariatur in accusamus
delectus modi repellendus recusandae dolorum tempore inventore minima,
nihil autem nam quidem esse. Culpa. Nostrum, cumque minima delectus
quisquam adipisci repellat perferendis necessitatibus aliquam aliquid
obcaecati placeat nihil qui nulla repellendus non. In, nihil. Ipsa neque
</p> Lorem ipsum dolor</br> sit amet consectetur adipisicing elit. Placeat nihil
nisi consectetur neque nostrum mollitia aperiam rem fuga accusantium
velit, in quod nulla, architecto quasi minus consequuntur, quibusdam
doloribus dignissimos! Facilis doloremque suscipit sint neque perferendis
tenetur repellat a quis explicabo atque facere pariatur in accusamus
delectus modi repellendus recusandae dolorum tempore inventore minima,
nihil autem nam quidem esse. Culpa. Nostrum, cumque minima delectus
quisquam adipisci repellat perferendis necessitatibus aliquam aliquid
obcaecati placeat nihil qui nulla repellendus non. In, nihil. Ipsa neque
</body>
<a href="#home">返回</a>
</html>
```
---
```hhh=
<!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>Document</title>
</head>
<style>
* {
transition: all 0.5s ease;
}
body{
background-color: rgb(176, 176, 230);
}
nav{
width: 80%;
height: 15ex;
background-color: azure;
}
nav ul{
display: flex;
justify-content: center;
}
nav li{
width: 200px;
height: 50px;
background-color: beige;
list-style: none;
border-radius: 20px;
margin: 10px;
/* df jcc aic 置中 */
display: flex;
justify-content: center;
align-items: center;
}
nav ul{
list-style:none;
/* 讓項目符號變彈性,就可以橫排 */
display: flex;
}
nav ul li{
font-size: 20px;
font-weight: 400;
margin:20px;
}
nav ul li:hover{
font-size: 24px;
font-weight: 800;
margin-top:15px;
transition: all 0.2s ease;
}
</style>
<body>
<header>
<nav>
<ul>
<li>選單1</li>
<li>選單2</li>
<li>選單3</li>
<li>選單4</li>
<li>選單5</li>
</ul>
</nav>
</header>
<!-- 選單1內容 -->
<section>
123
</section>
<!-- 選單1結束 -->
<section></section>
<section></section>
<section></section>
<section></section>
</body>
</html>
```
```
Sign in with Wallet
Connect another wallet