# 114324 沈若庭網頁課堂筆記:yum:
[老師的筆記:](https://hackmd.io/@iamfefe)
* 自我介紹
我是資二三的沈若庭 ~
當初會想來網頁設計組是因為感覺這個組比較有趣 可能對以後也比較有幫助!!><
* 未來期許
希望可以順利拿到學分，學到很多有關網頁設計的東西~
也希望未來可以學以致用!!:laughing:
==小筆記 :D==
按F12 ,Ctrl+shift+p ,叫出捷徑 打full就可以截圖整個螢幕!!!!
也可以按shift+windows+s 截圖
<h1 style="color:pink !important">我是大標題~</h1>
<h2 style="color:#f08080!important;background-color:#f7ede2;">我是小標題</h2>
<h3 style="background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);color:white !important;">我是小小標題</h3>
```htmlembedded=
<h1>這裡是大標題</h1>
<h2>這裡是小標題</h2>
<p>這裡是內文</p>
<h1 style="color:pink !important">可以改顏色~
<h2 style="color:#FDFCDC!important;background-color:#134360;">可以增加底圖顏色
<h1 style="background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);color:white !important;">可以讓底圖變成漸層的```htmlembedded=
手繪感圖片；https://www.pinterest.com/pin/food-ohn-mar-win-illustration--341640321744486790/
```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="123.jpg">
<style>
h1 {
color:#68a8d6;
}5
body{
background-color: rgb(237, 241, 200);
}
h1{
color: rgb(7, 36, 53);
font-size: 60px;
}
h1:hover{
color: rgb(140, 174, 240);
}
img:hover{
border: 5px solid rgb(255, 255, 255);
}
table{
border: 3px solid rgb(100, 98, 98);
}
.pics{
/* bgc,df,jcc,aic */
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
hello,yuki
<h1>我是大標1</h1>
<h2>我是大標2</h2>
<h3>我是大標3</h3>
<h3>我是大標4</h4>
<h5>我是大標5</h5>
<h1>昀澤介紹</h1>
<img src="https://picsum.photos/900/200" alt="">
<p>
<b> <i>Lorem ipsum dolor sit amet consectetur adipisicing elit.</i></b> Magni cum laudantium dolor expedita perspiciatis deleniti dolorem, fugiat hic necessitatibus architecto assumenda tempore quasi natus ab aliquam quibusdam eius sint accusamus.
Corrupti qui eaque, explicabo sequi quis illum veritatis eos, nulla a, recusandae minus unde quibusdam sapiente adipisci tempora voluptatem asperiores animi laudantium itaque totam vitae quisquam reprehenderit! Quos, numquam officia.
Quos reprehenderit saepe voluptate aspernatur voluptates eligendi nemo et eos, corrupti ipsam nostrum molestiae? Possimus, dicta culpa! Illum odio optio consequuntur minus cum quisquam, mollitia veritatis magni reiciendis, accusamus dolorum.
Optio labore voluptatibus repellendus deserunt? Recusandae accusantium perferendis nisi officiis debitis maxime quia nostrum dignissimos. Reiciendis, soluta aliquam neque illo vero labore maxime ad eligendi, accusantium repellat molestiae minima esse.
Rerum natus, sapiente ratione quas veniam adipisci quae cum, atque fugit nesciunt omnis vel obcaecati veritatis itaque modi mollitia ad dolor id? Possimus accusamus labore cupiditate, non magni distinctio reprehenderit!</p>
<p>
<hr>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cum laudantium dolor expedita perspiciatis deleniti dolorem, fugiat hic necessitatibus architecto assumenda tempore quasi natus ab aliquam quibusdam eius sint accusamus.
Corrupti qui eaque, explicabo sequi quis illum veritatis eos, nulla a, recusandae minus unde quibusdam sapiente adipisci tempora voluptatem asperiores animi laudantium itaque totam vitae quisquam reprehenderit! Quos, numquam officia.
Quos reprehenderit saepe voluptate aspernatur voluptates eligendi nemo et eos, corrupti ipsam nostrum molestiae? Possimus, dicta culpa! Illum odio optio consequuntur minus cum quisquam, mollitia veritatis magni reiciendis, accusamus dolorum.
Optio labore voluptatibus repellendus deserunt? Recusandae accusantium perferendis nisi officiis debitis maxime quia nostrum dignissimos. Reiciendis, soluta aliquam neque illo vero labore maxime ad eligendi, accusantium repellat molestiae minima esse.
Rerum natus, sapiente ratione quas veniam adipisci quae cum, atque fugit nesciunt omnis vel obcaecati veritatis itaque modi mollitia ad dolor id? Possimus accusamus labore cupiditate, non magni distinctio reprehenderit!</p>
<p>
<hr>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cum laudantium dolor expedita perspiciatis deleniti dolorem, fugiat hic necessitatibus architecto assumenda tempore quasi natus ab aliquam quibusdam eius sint accusamus.
Corrupti qui eaque, explicabo sequi quis illum veritatis eos, nulla a, recusandae minus unde quibusdam sapiente adipisci tempora voluptatem asperiores animi laudantium itaque totam vitae quisquam reprehenderit! Quos, numquam officia.
Quos reprehenderit saepe voluptate aspernatur voluptates eligendi nemo et eos, corrupti ipsam nostrum molestiae? Possimus, dicta culpa! Illum odio optio consequuntur minus cum quisquam, mollitia veritatis magni reiciendis, accusamus dolorum.
Optio labore voluptatibus repellendus deserunt? Recusandae accusantium perferendis nisi officiis debitis maxime quia nostrum dignissimos. Reiciendis, soluta aliquam neque illo vero labore maxime ad eligendi, accusantium repellat molestiae minima esse.
Rerum natus, sapiente ratione quas veniam adipisci quae cum, atque fugit nesciunt omnis vel obcaecati veritatis itaque modi mollitia ad dolor id? Possimus accusamus labore cupiditate, non magni distinctio reprehenderit!</p>
<h3>特色產品</h3>
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>運送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨運</li>
<li>自取</li>
</ol>
<b>作者:fefe</b>
<a href="https://www.google.com.tw/?hl=zh_TW">連接到google</a>
<a hf="mailto:114324@clvsc.tyc.edu.tw">寫信給沈若庭</a>
<table>
<tr>
<td>班級</td>
<td>座號</td>
<td>姓名</td>
<td>成績</td>
</tr>
<tr>
<td>423</td>
<td>24</td>
<td>沈若庭</td>
<td>99</td>
</tr>
</table>
<table>
<tr>
<td colspan="3">測試</td>
<td>測試</td>
<td>測試</td>
<td>測試</td>
</tr>
<tr>
<td>測試</td>
<td>測試</td>
<td>測試</td>
<td>測試</td>
<td rowspan="2">測試</td>
</tr>
</table>
</body>
</html>
```
快速鍵:
shift+alt+下=可以快速複製
< ul >可以變出黑色點點
< ol >
```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>Document</title>
<style>
* {
transition: all 0.5s ease;
}
body {
background-color: rgb(248, 242, 233);
}
nav {
width: 80%;
height: 100px;
background-color: rgba(133, 200, 231, 0.486);
}
nav ul {
display: flex;
justify-content: center;
}
nav li {
width: 200px;
height: 50px;
background-color: aliceblue;
list-style: ;
border-radius: 10px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 5px;
filter: blur(2px);
}
nav li:hover {
transform: scale(2);
filter: blur(0px);
}
</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/300/200" />
</section>
<!-- 選單1在這邊結束 -->
<!-- 選單2在這裡 -->
<section></section>
<!-- 選單2在這邊結束 -->
<!-- 選單3在這裡 -->
<section></section>
<!-- 選單3在這邊結束 -->
<!-- 選單4在這裡 -->
<section></section>
<!-- 選單4在這邊結束 -->
<footer>
</footer>
</body>
</html>
..........
"editor.formatOnSave":true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
<!-- -->是註解 不會出現在網站上
<!--選取狀態下shift+alt是往下-->
<!--按住ctrl+滑鼠點選,會變超級大游標-->
Sign in with Wallet
Connect another wallet