# 顏妤宸的網頁專題隋堂筆記:ghost:
[fefe](https://hackmd.io/@iamfefe)
---
- ## 自我介紹
我是顏妤宸，一個對影片剪輯有興趣的人類:smiley:
- ## 本學年在這堂課設定的目標
希望能學好網頁設計並做出滿意的專題。
---
<h1>語法練習</h1>
<h1 style="color:#052E6F"!important> 大標題</h1>
<p style="color:#FAB2EA"!important>內容</p>
<h1 style="color:#374A03;background-color:#EEF5DB;">背景顏色</h1>
---
<h1 style="background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);color:white !important;">漸層背景</h1>
<h1 style="color:#a8c7fa !important">大標題自訂顏色</h1>
<h3>我是大標題3</h3>
<p>這裡是內文 這裡是內文 這裡是內文</p>
<h1 style="background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);color:white !important;">我是大標題1</h1>
<h5>程式碼如下：</h5>
```
```
<h1 style="background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);color:white !important;">漸層背景</h1>
<h1 style="color:#a8c7fa !important">大標題自訂顏色</h1>
<h3>我是大標題3</h3>
<p>這裡是內文 這裡是內文 這裡是內文</p>
<h1 style="background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);color:white !important;">我是大標題1</h1>
```
---
<h2>快速鍵</h2>
<h5>全螢幕擷取 Ctrl+Shift+P
複製 ctrl+c
貼上 ctrl+v
剪下 ctrl+x
存檔 ctrl+s
一次修改多處 shift+alt+向下鍵
</h5>
---
<h1>Figma網站架構圖</h1>
---
<h1>昀澤網頁設計</h1>
```javascript
<title>昀澤好物</title>
<link rel="icon" href="https://picsum.photos/900/200" />
<style>
* {
transition: all 1s ease;
}
body {
background-color: azure;
}
h1 {
color: rgb(31, 87, 87);
}
/* 動作練習 */
h1:hover {
color: rgb(190, 190, 190);
font-size: 45;
}
body:hover {
background-color: rgb(195, 240, 169);
}
img:hover {
margin-left: 50px;
border: 10px solid #004526;
}
</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>
<img src="https://picsum.photos/900/200" alt="" />
<p>
<b>Lorem ipsum</b> <br />
dolor sit amet consectetur, adipisicing elit. Consectetur, temporibus
aliquam! Ea, id veritatis iure sunt consequatur ad delectus totam?
Delectus, consectetur. Incidunt libero ullam sapiente culpa ut et
deserunt. Magnam molestiae quis amet saepe officia perspiciatis velit,
laborum, facilis facere asperiores accusantium assumenda nulla iste quae
quod dignissimos, illum nemo nesciunt numquam repellendus culpa? Dicta
accusantium nihil voluptatibus iste. Accusamus maiores iusto deleniti
tempora cumque adipisci dolor laudantium amet, tempore modi omnis est
dolore incidunt error! Accusantium, ratione omnis illum nihil natus minima
fuga at sint facere, officiis possimus! Sed qui molestiae eos iusto
obcaecati nihil pariatur sint impedit! Voluptatem, maxime magni temporibus
dolorum laudantium dolorem cupiditate veritatis, quasi quam explicabo eius
quidem et ipsam ea. Quisquam, blanditiis similique. Ab quidem, est ea
aliquid laudantium voluptatem dignissimos delectus officiis, debitis eius
minima aperiam veritatis perspiciatis maiores rem perferendis, tempore
quaerat consectetur voluptatibus voluptates aut reprehenderit a illo.
Deserunt, obcaecati.
</p>
<hr />
<p>
<b>Lorem ipsum</b> <br />
<em>dolor sit amet consectetur</em>, adipisicing elit. Consectetur,
temporibus aliquam! Ea, id veritatis iure sunt consequatur ad delectus
totam? Delectus, consectetur. Incidunt libero ullam sapiente culpa ut et
deserunt. Magnam molestiae quis amet saepe officia perspiciatis velit,
laborum, facilis facere asperiores accusantium assumenda nulla iste quae
quod dignissimos, illum nemo nesciunt numquam repellendus culpa? Dicta
accusantium nihil voluptatibus iste. Accusamus maiores iusto deleniti
tempora cumque adipisci dolor laudantium amet, tempore modi omnis est
dolore incidunt error! Accusantium, ratione omnis illum nihil natus minima
fuga at sint facere, officiis possimus! Sed qui molestiae eos iusto
obcaecati nihil pariatur sint impedit! Voluptatem, maxime magni temporibus
dolorum laudantium dolorem cupiditate veritatis, quasi quam explicabo eius
quidem et ipsam ea. Quisquam, blanditiis similique. Ab quidem, est ea
aliquid laudantium voluptatem dignissimos delectus officiis, debitis eius
minima aperiam veritatis perspiciatis maiores rem perferendis, tempore
quaerat consectetur voluptatibus voluptates aut reprehenderit a illo.
Deserunt, obcaecati.
</p>
<hr />
<p>
<b>Lorem ipsum</b> <br />
dolor sit amet consectetur, adipisicing elit. Consectetur, temporibus
aliquam! Ea, id veritatis iure sunt consequatur ad delectus totam?
Delectus, consectetur. Incidunt libero ullam sapiente culpa ut et
deserunt. Magnam molestiae quis amet saepe officia perspiciatis velit,
laborum, facilis facere asperiores accusantium assumenda nulla iste quae
quod dignissimos, illum nemo nesciunt numquam repellendus culpa? Dicta
accusantium nihil voluptatibus iste. Accusamus maiores iusto deleniti
tempora cumque adipisci dolor laudantium amet, tempore modi omnis est
dolore incidunt error! Accusantium, ratione omnis illum nihil natus minima
fuga at sint facere, officiis possimus! Sed qui molestiae eos iusto
obcaecati nihil pariatur sint impedit! Voluptatem, maxime magni temporibus
dolorum laudantium dolorem cupiditate veritatis, quasi quam explicabo eius
quidem et ipsam ea. Quisquam, blanditiis similique. Ab quidem, est ea
aliquid laudantium voluptatem dignissimos delectus officiis, debitis eius
minima aperiam veritatis perspiciatis maiores rem perferendis, tempore
quaerat consectetur voluptatibus voluptates aut reprehenderit a illo.
Deserunt, obcaecati.
</p>
<hr />
<p>
<b>Lorem ipsum</b> <br />
dolor sit amet consectetur, adipisicing elit. Consectetur, temporibus
aliquam! Ea, id veritatis iure sunt consequatur ad delectus totam?
Delectus, consectetur. Incidunt libero ullam sapiente culpa ut et
deserunt. Magnam molestiae quis amet saepe officia perspiciatis velit,
laborum, facilis facere asperiores accusantium assumenda nulla iste quae
quod dignissimos, illum nemo nesciunt numquam repellendus culpa? Dicta
accusantium nihil voluptatibus iste. Accusamus maiores iusto deleniti
tempora cumque adipisci dolor laudantium amet, tempore modi omnis est
dolore incidunt error! Accusantium, ratione omnis illum nihil natus minima
fuga at sint facere, officiis possimus! Sed qui molestiae eos iusto
obcaecati nihil pariatur sint impedit! Voluptatem, maxime magni temporibus
dolorum laudantium dolorem cupiditate veritatis, quasi quam explicabo eius
quidem et ipsam ea. Quisquam, blanditiis similique. Ab quidem, est ea
aliquid laudantium voluptatem dignissimos delectus officiis, debitis eius
minima aperiam veritatis perspiciatis maiores rem perferendis, tempore
quaerat consectetur voluptatibus voluptates aut reprehenderit a illo.
Deserunt, obcaecati.
</p>
<!-- 產品介紹 -->
<h3>特色產品</h3>
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>寄送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨運</li>
<li>自取</li>
</ol>
<a href="#home">回首頁</a>
</body>
</html>
```
---
<h2>Html自動排版設定</h2>
---
Sign in with Wallet
Connect another wallet