# 114326柯俐妘網頁設計隨堂筆記:v:
## [老師筆記](https://hackmd.io/@iamfefe)
---
### 自我介紹:
* 我是柯俐妘，因為對網頁很好奇所以選這門課-
### 學期目標:
* 我的目標是學好網頁設計，把各個網頁操作都熟練
* 不要被當
# 全螢幕截圖
* 開啟鍵：F12 / ctrl+shift+P / full
# [https://1143268.wixsite.com/my-site]
# 09/06語法練習
<h1 style="color:#94e9ff !important">xin hua zhuang love me</h1>
<p>I am so cute Yeah！</p>
<p>and she so kawayi</p>
<p style="color:#94e9ff !important">Song Ya Xuan</p>
<p style="color:#f00 !important">Yan hao Xiang</p>
<p style="color:#3943bf !important">Zuo Hang</p>
<p style="color:#dee2e6 !important">Liu Yao Wen</p>
```htmlembedded=
<h1>ke li yun love xin hua zhuang</h1>
<p>I am so cute Yeah！</p>
```
```
選取狀態下shift+alt+往下鍵是快速複製
ctrl+滑鼠變成大游標
```
# 11/15上課進度
```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 0.5s ease;
}
h1:hover {
color: rgb(18, 134, 230);
text-shadow: 1px 1px 10px black;
}
h2:hover {
color: #58dac8;
}
h3:hover {
color: pink;
}
h4:hover {
color: rgba(255, 255, 255);
}
img:hover {
margin-left: 50px;
border: 5px solid rgb(247, 245, 138);
box
}
body {
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}
</style>
</head>
<body>
<!-- 標題 -->
<h1 id="home">我是大標題1</h1>
<h2>我是大標題2</h2>
<h3>我是大標題3</h3>
<h4>我是大標題4</h4>
<h5>我是大標題5</h5>
<h1>昀澤介紹</h1>
<img src="https://picsum.photos/900/200" alt="" />
<!-- 段落 -->
<p>
<b>Lorem ipsum</b><br />
dolor sit amet consectetur, adipisicing elit. Possimus, voluptate et
libero exercitationem labore maiores quia a itaque nam molestiae debitis,
repellat assumenda ad voluptatum sapiente, nihil suscipit asperiores ut.
Repudiandae beatae incidunt minus iure explicabo minima corrupti culpa
iusto qui unde nemo fuga voluptate reprehenderit dolore sapiente, vero nam
facilis. Maxime, consequatur quidem fugit possimus deserunt dolorem
debitis quam. Quam totam ipsum nisi nostrum quibusdam esse facere! Tempora
ullam similique voluptas sequi deserunt illo, eius nesciunt repellendus
nostrum quisquam iusto voluptatum ad sunt incidunt, nobis quo animi
dolores soluta. Rem optio minus accusantium iure omnis eaque nesciunt
maiores dolorum reprehenderit suscipit earum vel repellendus odio libero
placeat vero dignissimos quos eum, accusamus repudiandae mollitia aliquam
saepe? Corrupti, odit nisi. Neque id sequi deserunt adipisci praesentium
voluptates architecto cumque vero quasi dolore inventore consequatur harum
expedita odit molestias officiis obcaecati, dolor culpa. Pariatur rem eum
illum, consequatur debitis molestias aspernatur!
</p>
<p>
<b>Lorem ipsum</b><br />
dolor sit amet consectetur, adipisicing elit. Possimus, voluptate et
libero exercitationem labore maiores quia a itaque nam molestiae debitis,
repellat assumenda ad voluptatum sapiente, nihil suscipit asperiores ut.
Repudiandae beatae incidunt minus iure explicabo minima corrupti culpa
iusto qui unde nemo fuga voluptate reprehenderit dolore sapiente, vero nam
facilis. Maxime, consequatur quidem fugit possimus deserunt dolorem
debitis quam. Quam totam ipsum nisi nostrum quibusdam esse facere! Tempora
ullam similique voluptas sequi deserunt illo, eius nesciunt repellendus
nostrum quisquam iusto voluptatum ad sunt incidunt, nobis quo animi
dolores soluta. Rem optio minus accusantium iure omnis eaque nesciunt
maiores dolorum reprehenderit suscipit earum vel repellendus odio libero
placeat vero dignissimos quos eum, accusamus repudiandae mollitia aliquam
saepe? Corrupti, odit nisi. Neque id sequi deserunt adipisci praesentium
voluptates architecto cumque vero quasi dolore inventore consequatur harum
expedita odit molestias officiis obcaecati, dolor culpa. Pariatur rem eum
illum, consequatur debitis molestias aspernatur!
</p>
<p>
<b>Lorem ipsum</b><br />
dolor sit amet consectetur, adipisicing elit. Possimus, voluptate et
libero exercitationem labore maiores quia a itaque nam molestiae debitis,
repellat assumenda ad voluptatum sapiente, nihil suscipit asperiores ut.
Repudiandae beatae incidunt minus iure explicabo minima corrupti culpa
iusto qui unde nemo fuga voluptate reprehenderit dolore sapiente, vero nam
facilis. Maxime, consequatur quidem fugit possimus deserunt dolorem
debitis quam. Quam totam ipsum nisi nostrum quibusdam esse facere! Tempora
ullam similique voluptas sequi deserunt illo, eius nesciunt repellendus
nostrum quisquam iusto voluptatum ad sunt incidunt, nobis quo animi
dolores soluta. Rem optio minus accusantium iure omnis eaque nesciunt
maiores dolorum reprehenderit suscipit earum vel repellendus odio libero
placeat vero dignissimos quos eum, accusamus repudiandae mollitia aliquam
saepe? Corrupti, odit nisi. Neque id sequi deserunt adipisci praesentium
voluptates architecto cumque vero quasi dolore inventore consequatur harum
expedita odit molestias officiis obcaecati, dolor culpa. Pariatur rem eum
illum, consequatur debitis molestias aspernatur!
</p>
<!-- 產品介紹 -->
<h3>產品特色</h3>
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>寄送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨運</li>
<li>自取</li>
</ol>
<!-- 連結 -->
<a href="http://yahoo.com.tw" target="_blank">yahoo</a>
<br />
<a href="mailto:iamfefe@gmail.com">hackMD fefe</a>
<br />
<a href="#home">回首頁</a>
</body>
</html>
```
# 11/22上課進度
```
<!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>hua 笨笨的</title>
<style>
* {
transition: all 0.5s ease;
}
body {
background-color: pink;
}
nav{
width: 80%;
height:100px;
background-color: blanchedalmond;
}
nav ul {
display: flex;
justify-content: center;
}
nav li{
width: 200px;
height: 50px;
background-color: #fff;
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);
}
#ke {
filter: blur(3px);
}
</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/500/200" alt="">
</section>
<!-- 選單1內容在結束 -->
<!-- 選單2內容在這裡 -->
<section>
<img src="https://picsum.photos/500/200" id="ke" alt="">
</section>
<!-- 選單2內容在結束 -->
<!-- 選單3內容在這裡 -->
<section></section>
<!-- 選單3內容在結束 -->
<!-- 選單4內容在這裡 -->
<section></section>
<!-- 選單4內容在結束 -->
<!-- 選單5內容在這裡 -->
<section></section>
<!-- 選單5內容在結束 -->
<footer></footer>
</body>
</html>
```
# 11/23上課進度
```
<!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>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
margin: 20px;
}
#box1 {
background-color: rgb(240, 116, 116);
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(235, 196, 124);
width: 50rem;
transition: 1s ease-in;
}
#box3 {
background-color: rgb(238, 238, 123);
width: 50vw;
transition: 0.5s linear;
}
#box4 {
background-color: rgb(111, 207, 111);
transition: 1s ease-out;
}
#box5 {
background-color: rgb(80, 168, 240);
transition: 0.5s ease-out;
}
</style>
</head>
<body>
<!-- div#box*5 -->
<div id="box1">
<img src="https://picsum.photos/200/200" alt="" />
<p>
<b>Lorem</b><br />
ipsum dolor sit amet consectetur adipisicing elit. Vitae quisquam
eveniet atque repudiandae ab vero modi aliquam facere maiores ducimus
eum rerum autem assumenda in quasi, provident veniam illum. Delectus.
</p>
</div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</body>
</html>
```
Sign in with Wallet
Connect another wallet