# 114327莊心華網頁設計隨堂筆記
## [老師筆記](https://hackmd.io/@iamfefe)
---
## ==自我介紹==
- 老師好，我是莊心華，因為不是很想學更困難的寫程式，所以才選網頁設計。:grinning:
## ==學習目標==
- 我這學期想把網頁設計學好，然後想參加校內競賽。:+1:
- 也想要讓我體驗更多事務來尋找我的興趣或專長。:v:
- 不要被當:yum:
---
## ==螢幕截圖==
- ## 按F12 > Ctrl+shift+p > full
## ==09/06語法練習==
<h1 style="color:#9877d1 !important;background-color:">color</h1>
<p style="color:#77a8c9 !important">color</p>
# ==顏色==
- <p style="color:#D7B9D5 !important">顏色</p>
- <p style="color:#9A8C98 !important">顏色</p>
- <p style="color:#EABE7C !important">顏色</p>
- <p style="color:#084C61 !important">顏色</p>
- <p style="color:#BCF4F5 !important">顏色</p>
<p style="background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);">color</p>
<p style="background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); !important">顏色</p>
```htmlembedded=
<h1>0_0</h1>
<p>0_0</p>
<p>0_0</p>
<p>0_0</p>
<p>0_0</p>
```
# 參考書目
小農經營
實作方向
行銷手法
網站經營
# 快捷鍵
選取狀態下shift+alt+往下是快速件
按住ctrl+滑鼠點選是大游標
# 網頁設計
### 黏住導覽Sticky特效
https://codepen.io/ettrics/full/WRbGRN
```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/10/10" />
<style>
body {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
</style>
</head>
<body>
hello
<h1>我是大標題1</h1>
<h2>我是大標題2</h2>
<h3>我是大標題3</h3>
<h4>我是大標題4</h4>
<h5>我是大標題5</h5>
<h6>我是大標題6</h6>
<h1>昀澤介紹</h1>
<h1><b>設計者 fefe</b></h1>
<img src="https://picsum.photos/900/200" alt="" />
<p>
<b>Lorem ipsum</b> <br />dolor sit, amet consectetur adipisicing elit. Sed
pariatur dolore, unde possimus tenetur ipsa. Adipisci saepe sit aspernatur
qui quis, magnam labore sunt laborum eius culpa tempore. Corrupti, quod!
Harum cum sit <br />quibusdam impedit ex molestiae quas, consequuntur
obcaecati repellat facere rerum consequatur commodi pariatur repellendus,
iusto modi inventore provident dolorum mollitia vero libero illo. Ullam
harum optio quidem? Natus cumque ex est magni dolorem fugit quaerat
distinctio quae eligendi consequuntur porro ab nihil, modi a nam voluptas
ipsam tenetur illum quibusdam id tempora sapiente veritatis aliquid.
Molestias, voluptatibus.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed pariatur
dolore, unde possimus tenetur ipsa. Adipisci saepe sit aspernatur qui
quis, magnam labore sunt laborum eius culpa tempore. Corrupti, quod! Harum
cum sit quibusdam impedit ex molestiae quas, consequuntur obcaecati
repellat facere rerum consequatur commodi pariatur repellendus, iusto modi
inventore provident dolorum mollitia vero libero illo. Ullam harum optio
quidem? Natus cumque ex est magni dolorem fugit quaerat distinctio quae
eligendi consequuntur porro ab nihil, modi a nam voluptas ipsam tenetur
illum quibusdam id tempora sapiente veritatis aliquid. Molestias,
voluptatibus.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed pariatur
dolore, unde possimus tenetur ipsa. Adipisci saepe sit aspernatur qui
quis, magnam labore sunt laborum eius culpa tempore. Corrupti, quod! Harum
cum sit quibusdam impedit ex molestiae quas, consequuntur obcaecati
repellat facere rerum consequatur commodi pariatur repellendus, iusto modi
inventore provident dolorum mollitia vero libero illo. Ullam harum optio
quidem? Natus cumque ex est magni dolorem fugit quaerat distinctio quae
eligendi consequuntur porro ab nihil, modi a nam voluptas ipsam tenetur
illum quibusdam id tempora sapiente veritatis aliquid. Molestias,
voluptatibus.
</p>
<hr />
<h3>特色產品</h3>
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>寄送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨貨送</li>
<li>自取</li>
</ol>
</body>
</html>
```
```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/10/10" />
<style>
* {
transition: all 2s ease;
}
body {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
h1:hover {
color: rgb(81, 83, 175);
}
h2:hover {
color: #11515c;
}
h3:hover {
color: rgba(225, 225, 255);
}
h4:hover {
color: red;
}
img:hover {
margin-left: 50px;
border: 10px solid rgb(106, 149, 206);
}
h1 {
color: white;
text-shadow: 10px 10px 10px;
}
h2 {
color: brown;
}
</style>
</head>
<body>
<!-- 選單列 -->
hello
<h1 id="home">我是大標題1</h1>
<h2>我是大標題2</h2>
<h3>我是大標題3</h3>
<h4>我是大標題4</h4>
<h5>我是大標題5</h5>
<h6>我是大標題6</h6>
<h1>昀澤介紹</h1>
<h1>設計者 fefe</h1>
<img src="https://picsum.photos/900/200" alt="" />
<p>
<b>Lorem ipsum</b> <br />dolor sit, amet consectetur adipisicing elit. Sed
pariatur dolore, unde possimus tenetur ipsa. Adipisci saepe sit aspernatur
qui quis, magnam labore sunt laborum eius culpa tempore. Corrupti, quod!
Harum cum sit <br />quibusdam impedit ex molestiae quas, consequuntur
obcaecati repellat facere rerum consequatur commodi pariatur repellendus,
iusto modi inventore provident dolorum mollitia vero libero illo. Ullam
harum optio quidem? Natus cumque ex est magni dolorem fugit quaerat
distinctio quae eligendi consequuntur porro ab nihil, modi a nam voluptas
ipsam tenetur illum quibusdam id tempora sapiente veritatis aliquid.
Molestias, voluptatibus.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed pariatur
dolore, unde possimus tenetur ipsa. Adipisci saepe sit aspernatur qui
quis, magnam labore sunt laborum eius culpa tempore. Corrupti, quod! Harum
cum sit quibusdam impedit ex molestiae quas, consequuntur obcaecati
repellat facere rerum consequatur commodi pariatur repellendus, iusto modi
inventore provident dolorum mollitia vero libero illo. Ullam harum optio
quidem? Natus cumque ex est magni dolorem fugit quaerat distinctio quae
eligendi consequuntur porro ab nihil, modi a nam voluptas ipsam tenetur
illum quibusdam id tempora sapiente veritatis aliquid. Molestias,
voluptatibus.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed pariatur
dolore, unde possimus tenetur ipsa. Adipisci saepe sit aspernatur qui
quis, magnam labore sunt laborum eius culpa tempore. Corrupti, quod! Harum
cum sit quibusdam impedit ex molestiae quas, consequuntur obcaecati
repellat facere rerum consequatur commodi pariatur repellendus, iusto modi
inventore provident dolorum mollitia vero libero illo. Ullam harum optio
quidem? Natus cumque ex est magni dolorem fugit quaerat distinctio quae
eligendi consequuntur porro ab nihil, modi a nam voluptas ipsam tenetur
illum quibusdam id tempora sapiente veritatis aliquid. Molestias,
voluptatibus.
</p>
<hr />
<h3>特色產品</h3>
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>寄送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨貨送</li>
<li>自取</li>
</ol>
<a href="https://yahoo.com.tw" target="_blank">連到yahoo</a>
<a href="mailto:iam@clvsc.tyc.edu.tw">寫給fefe</a>
<a href="#home">回首頁</a>
</body>
</html>
```
```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>ke 好笨</title>
<style>
* {
transition: all0.5s ease;
}
body {
background-color: pink;
}
nav {
width: 100%;
height: 150px;
background-color: bisque;
}
nav ul {
display: flex;
justify-content: center;
}
nav li {
width: 200px;
height: 50px;
background-color: white;
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 {
filter: blur(0px);
transform: scale(2) rotate(5deg);
}
.f {
filter: blur(5px);
}
#e {
filter: blur(5px);
}
</style>
</head>
<body>
<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/900/200" class="f" alt="" />
</section>
<!-- 選單1內容結束 -->
<!-- 選單2內容在這裡 -->
<section>
<img src="https://picsum.photos/00/200" id="e" alt="" />
</section>
<!-- 選單2內容結束 -->
<!-- 選單3內容在這裡 -->
<section></section>
<!-- 選單3內容結束 -->
<!-- 選單4內容在這裡 -->
<section></section>
<!-- 選單4內容結束 -->
<!-- 選單5內容在這裡 -->
<section></section>
<!-- 選單5內容結束 -->
<footer></footer>
</body>
</html>
```
```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>Ke 好漂亮</title>
<style>
div {
width: 300px;
height: 200px;
background-color: pink;
border: 1px solid black;
margin: 20px;
}
#box1 {
background-color: rgb(255, 255, 255);
width: 50%;
transition: 0.5s ease;
height: 100%;
}
#box1:hover,
#box2:hover,
#box3:hover,
#box4:hover,
#box5:hover {
margin-left: 300px;
}
#box2 {
background-color: rgb(26, 152, 184);
width: 20rem;
transition: 0.5s ease-in;
}
#box3 {
background-color: rgb(189, 115, 26);
transition: 1s ease-in-out;
}
#box4 {
background-color: rgb(127, 76, 223);
transition: 2s ease-out;
}
#box5 {
background-color: rgb(192, 53, 146);
transition: 0.1s ease;
}
</style>
</head>
<body>
<!-- div#box*5 -->
<div id="box1">
<img src="https://picsum.photos/900/200" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nemo
totam assumenda corporis corrupti delectus quidem placeat fugiat aut
beatae quos culpa natus rerum animi a optio hic, recusandae cum.
Sapiente voluptates obcaecati odio eum quo culpa perspiciatis, ab
temporibus unde dolor et praesentium quos, fugiat sed voluptatem
asperiores excepturi repellendus sunt tenetur. Ab atque dicta fugit,
velit accusantium ex? Odio enim eum quod officiis tempore quas excepturi
dignissimos voluptates molestias in earum, magnam iste, illo sequi
soluta, animi voluptate obcaecati beatae libero. Cum nesciunt corporis
odio! Quis, alias repellendus!
</p>
</div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</body>
</html>
```
```htmlembedded=
<style>
body {
background-color: antiquewhite;
}
.good {
/* background-color:cadetblue */
/* 設計背景圖片 */
background-image: url(images/123.jpg);
/* 背景圖片滿版 */
background-size: cover;
/* 上間距 */
padding-top: 20px;
/* 下間距 */
padding-bottom: 20px;
/* 圓角 */
border-radius: 2%;
}
.card {
}
</style>
<!-- 選單超連結 -->
<li class="nav-item active">
<a class="nav-link" href="#p1"
>內容 <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item active">
<a class="nav-link" href="#p2"
>特色產品 <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item active">
<a class="nav-link" href="#p3"
>照片<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item active">
<a class="nav-link" href="mailto:114327@clvsc.tyc.edu.tw"
>聯絡方式 <span class="sr-only">(current)</span></a
>
</li>
Sign in with Wallet
Connect another wallet