# 2023/08/30
## 114333楊雅惠 網頁專題隨堂筆記:blush:
### 老師隨堂筆記 [https://hackmd.io/@iamfefe]
---
>* 自我介紹:smile:
我是資二三楊雅惠
>* 學期目標
1.了解有關網頁的學習內容
2.可以成功寫出網頁的學習成果
3.從中發現主要是在講些什麼
---
# 2023/08/31
## ==全螢幕截圖==
F12 -> Ctrl+shift+P -> 輸入full -> 按紫色按鈕
---
# 2023/09/06
## ==選取文字==
Shift + 方向鍵
## ==語法練習==
<h1 style="background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);color:#d876dd">我是大標題1</h1>
<h3 style="background-image: linear-gradient(120deg, #8fd3f4 0%, #84fab0 100%); color:#23395B">我是大標題3</h3>
<p>這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文</p>
程式內容如下：
```htmlembedded=
<h1>我是大標題1</h1>
<h3>我是大標題3</h3>
<p>這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文這裡是內文</p>
```
<hr>
# 2023/10/25
## codecombat證書
# 2023/11/15
## vscode快捷鍵
ctrl -->同時選擇做更改
(先複製需要的文字)shift+Alt+向下鍵 -->快速貼上
ctrl+/ --> 註解
## 今日進度
### html基本程式
#### link為小圖
```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>Document</title>
<link rel="icon" href="https://picsum.photos/10/10" />
<style>
* {
transition: all 1s ease;
}
body {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
h1 {
color: #183030;
}
/* 動作練習 */
h1:hover{
color: rgb(167, 20, 167);
font-size: 50pt;
text-shadow: 2px 2px 10px rgb(231, 231, 47);
}
img:hover{
border: 10px dashed rgba(107, 201,19,0.5);
margin-left: 30px ;
box-shadow: 0 0 10 rgba(58, 104, 14, 0.5);
}
</style>
</head>
<!-- 導覽列 -->
<body>
hello world
<h1 id="home">我是大標1</h1>
<h2>我是大標2</h2>
<h3>我是大標3</h3>
<h4>我是大標4</h4>
<h5>我是大標5</h5>
<h1>昀澤農場</h1>
<img src="https://picsum.photos/700/400" alt="" />
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi ut earum non tempore ratione quidem numquam,
voluptatum optio perspiciatis, voluptate quo ipsum itaque, ullam sunt odio minima aperiam recusandae cumque.
Voluptas sunt voluptates sint necessitatibus deleniti numquam iusto reprehenderit, pariatur sit reiciendis
aspernatur id ipsum dolor quisquam optio alias officia adipisci quia accusantium deserunt? Assumenda eveniet
veniam rem ipsa hic.
Assumenda excepturi, non eos deserunt, omnis nobis molestiae fugiat labore laborum eaque impedit voluptas
quibusdam temporibus? Assumenda, aliquid sit corrupti veritatis beatae soluta repellat quos ut a omnis in
inventore!
</p>
<p>
<b>Lorem</b> ipsum dolor sit, amet consectetur adipisicing elit. Sequi ut earum non tempore ratione quidem
numquam, voluptatum optio perspiciatis, voluptate quo ipsum itaque, ullam sunt odio minima aperiam recusandae
cumque.
Voluptas sunt voluptates sint necessitatibus deleniti numquam iusto reprehenderit, pariatur sit reiciendis
aspernatur id ipsum dolor quisquam optio alias officia adipisci quia accusantium deserunt? Assumenda eveniet
veniam rem ipsa hic.
Assumenda excepturi, non eos deserunt, omnis nobis molestiae fugiat labore laborum eaque impedit voluptas
quibusdam temporibus? Assumenda, aliquid sit corrupti veritatis beatae soluta repellat quos ut a omnis in
inventore!</br>
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi ut earum non tempore ratione quidem numquam,
voluptatum optio perspiciatis, voluptate quo ipsum itaque, ullam sunt odio minima aperiam recusandae cumque.
Voluptas sunt voluptates sint necessitatibus deleniti numquam iusto reprehenderit, pariatur sit reiciendis
aspernatur id ipsum dolor quisquam optio alias officia adipisci quia accusantium deserunt? Assumenda eveniet
veniam rem ipsa hic.
Assumenda excepturi, non eos deserunt, omnis nobis molestiae fugiat labore laborum eaque impedit voluptas
quibusdam temporibus? Assumenda, aliquid sit corrupti veritatis beatae soluta repellat quos ut a omnis in
inventore!
</p>
<p><b>design by fefe</b> </p>
<h3>特色產品</h3>
<!-- 產品介紹 -->
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>寄送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨運</li>
<li>自取</li>
</ol>
<!-- 超連結視窗列 -->
<a href="http://tw.yahoo.com" target="_blank">連到yahoo</a>
<a href="mailto:iamfefe@clvsc.tyc.edu.tw">寫信給fefe</a>
<a href="#home">回首頁</a>
</body>
</html>
```
# 2023/11/22
### 結構程式
```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>Document</title>
<style>
* {
transition: all 0.5s ease;
}
body {
background-color: rgba(131, 221, 171, 0.993);
}
nav {
width: 80%;
height: 10%;
background-color: rgb(190, 218, 241);
}
nav ul {
display: flex;
justify-content: center;
}
nav li {
width: 200px;
height: 50px;
background-color: aliceblue;
list-style: none;
border-radius: 20px;
margin: 10px;
/* df jcc aic*/
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 5px;
filter: blur(3px);
}
nav li:hover {
transform: scale(2) rotate(20deg);
filter: blur(0px);
}
.abc {
filter: blur(3px);
}
#a {
filter: blur(7px);
}
div{
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: rgb(25, 187, 160);
border: 1px solid black ;
border-radius: 10px;
}
#box1{
background-color: antiquewhite;
width: 50%;
transition:0.5s ease ;
height: 100%;
}
#box1:hover,
#box2:hover,
#box3:hover,
#box4:hover,
#box5:hover{
margin-left: 300px;
}
#box2{
background-color: aquamarine;
width: 50rem;
transition: 0.5s ease-in;
}
#box3{
background-color: aqua;
width: 50vw;
transition: 0.5s linear;
}
#box4{
background-color: rgb(74, 209, 108);
}
#box5{
background-color: rgb(79, 161, 194);
}
</style>
</head>
<body>
<!-- 打法header>nav>ul>li*5 -->
<header>
<nav>
<ul>
<li>選單1</li>
<li>選單2</li>
<li>選單3</li>
<li>選單4</li>
<li>選單5</li>
</ul>
</nav>
</header>
<!-- 選單1內容在這裡 -->
<section>
<img src="https://picsum.photos/400/200" alt="" />
</section>
<!-- 選單1內容結束 -->
<!-- 選單2內容在這裡 -->
<section>
<img src="https://picsum.photos/500/300" id="a" alt="" />
</section>
<!-- 選單2內容結束 -->
<!-- 選單3內容在這裡 -->
<section>
<img src="https://picsum.photos/500/300" class="abc" alt="" />
</section>
<!-- 選單3內容結束 -->
<!-- 選單4內容在這裡 -->
<section></section>
<!-- 選單4內容結束 -->
<!-- 選單5內容在這裡 -->
<section></section>
<!-- 選單5內容結束 -->
<!-- 打法div#box*5 -->
<div id="box1">
<img src="https://picsum.photos/200/100" alt="" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Voluptates, consequatur error vitae quisquam veniam saepe
earum impedit suscipit dolor libero alias deleniti quibusdam
eum cumque quidem ipsa ratione ex accusamus.
</p>
</div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</body>
</html>
```
# 網站設計
## [網站架構](https://reurl.cc/548Vaq)
## [網站頁面](https://reurl.cc/QeWmx9)
# 昀澤農場相關資訊
## [簡報](https://reurl.cc/yYmoNy)
## [DM](https://reurl.cc/prZoNd)
## [小論文]
Sign in with Wallet
Connect another wallet