###### tags: `資訊系統實驗`
# *2022/04/14 Lesson05_HW*
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta 吳宥陞 409411377>
<title>Lesson05_HW</title>
<style>
.header{
text-align: center;
background-color: #F5BE6A;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
border-color: #F5BE6A;
border-style: solid;
}
#header_1{
font-size: 50px;
}
#header_2{
font-size: 30px;
}
.song_slect{
background-color: #FF8486;
text-align: center;
font-size: 20px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
border: thin;
border-color: #FF8486;
border-style: solid;
}
.song_slect li{
list-style-type: none;
display:inline;
}
.Author{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
grid-template-rows: 500px;
grid-gap: 5px;
}
#Author_1{
display: grid;
grid-column: 1fr;
overflow:auto;
background-color: #FF6F69;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}
#Author_2{
display: grid;
grid-column: 1fr;
background-color: #ffeead;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
overflow:auto;
}
#Author_3{
display: grid;
grid-column: 1fr;
background-color: #96CEB4;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
overflow:auto;
}
#Author_Photo{
margin-top: 5%;
margin-left: 15%;
}
#Author_Name{
text-align: center;
}
#Author_text{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
margin-left: 5%;
margin-right: 5%;
}
#Collection{
text-align: center;
}
tr{
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}
.ly{
/*text-align: center;*/
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
text-align: center;
}
footer{
position:relative;
float: left;
background-color: #E5E5E5;
width:100%;
text-align: center;
}
#BCTP{
position:fixed;
right: 10px;
bottom: 10px;
}
@media screen and (max-width:620px){
.header{
width:100%
}
#header_1{
width:100%
}
#header_2{
width:100%
}
.song_slect{
width:100%
}
.song_slect li{
width:100%
}
.Author{
display: grid;
grid-template-columns: 1fr;
width: 100%;
grid-template-rows: 500px;
grid-gap: 5px;
}
#Author_1{
width:100%
overflow:auto;
}
#Author_2{
width:100%
overflow:auto;
}
#Author_3{
width:100%
overflow:auto;
}
#media_video{
width:100%
}
}
</style>
</head>
<body>
<header class="header">
<h1 id="header_1">像我這樣的人</h1>
<h2 id="header_2">詞Lyric/曲Written by：毛不易</h2>
<nav></nav>
</header>
<nav class="song_slect">
<ul>
<li><a href="Lesson05_HW.html">像我這樣的人</a></li>
<li><a href="Lesson05_HW_1.html">小捨得</a></li>
</ul>
</nav>
<img src="imgs/cover.jpeg" height="100%" width="100%" alt="cover">
<div class="Author">
<div id="Author_1">
<img id="Author_Photo" src="imgs/Author_1.jpeg" height="200px" alt="author">
<h2 id="Author_Name">毛不易</h2>
<p id="Author_text">毛不易（1994年10月1日－），本名王維家，黑龍江齊齊哈爾人，歌手、唱作音樂人。由騰訊視頻《明日之子》出道，工作室名稱為「巨星不易工作室」。代表專輯有《平凡的一天》、《小王》、《幼鳥指南》，官方歌迷名稱由毛不易取名為「暴發戶」，應援色為金色。</p>
</div>
<div id="Author_2">
<table id="Collection_info">
<caption id="Collection" style="color: black; font-size: 30px" >作品名稱</caption>
<tr>
<td>年份</td>
<td>歌曲</td>
<td>作詞</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
<tr>
<td>2017</td>
<td>如果有一天我變得很有錢</td>
<td>毛不易</td>
</tr>
</table>
</div>
<div id="Author_3">
<table id="Award">
<caption id="Award_title" style="color: black; font-size: 30px" >得獎</caption>
<tr>
<td>年份</td>
<td>得獎名稱</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
<tr>
<td>2017</td>
<td>騰訊娛樂白皮書——音樂年度之星獎</td>
</tr>
</table>
</div>
</div>
<main style="text-align: center">
<br class="ly">像我這樣優秀的人
<br class="ly">本該燦爛過一生
<br class="ly">怎麼二十多年到頭來
<br class="ly">還在人海裡浮沉<br>
<p></p>
<p></p>
<br class="ly">像我這樣聰明的人
<br class="ly">早就告別了單純
<br class="ly">怎麼還是用了一段情
<br class="ly">去換一身傷痕<br>
<p></p>
<p></p>
<br class="ly">像我這樣迷茫的人
<br class="ly">像我這樣尋找的人
<br class="ly">像我這樣碌碌無為的人
<br class="ly">你還見過多少人<br>
<p></p>
<p></p>
<br class="ly">像我這樣庸俗的人
<br class="ly">從不喜歡裝深沉
<br class="ly">怎麼偶爾聽到老歌時
<br class="ly">忽然也晃了神
<br class="ly">像我這樣懦弱的人
<br class="ly">凡事都要留幾分
<br class="ly">怎麼曾經也會為了誰
<br class="ly">想過奮不顧身<br>
<p></p>
<p></p>
<br class="ly">像我這樣迷茫的人
<br class="ly">像我這樣尋找的人
<br class="ly">像我這樣碌碌無為的人
<br class="ly">你還見過多少人<br>
<p></p>
<p></p>
<br class="ly">像我這樣孤單的人
<br class="ly">像我這樣傻的人
<br class="ly">像我這樣不甘平凡的人
<br class="ly">世界上有多少人
<br>
<p></p>
<p></p>
<br class="ly">像我這樣迷茫的人
<br class="ly">像我這樣尋找的人
<br class="ly">像我這樣碌碌無為的人
<br class="ly">你還見過多少人
<br>
<p></p>
<p></p>
<iframe id="media_video" width="950" height="534" src="https://www.youtube.com/embed/VVVfVrZZ7fU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</main>
<footer>
<p >Copyright 2022 homework，本網站作為作業使用，若侵權請告知</p>
</footer>
<button id="BCTP" onclick = "location.href='#'">TOP</button>
</body>
</html>
```
## 效果截圖：
## 原始碼下載：
[OneDrive下載連結](https://1drv.ms/u/s!AvwcoqTkdjpWg4p6d0CjEupJr9qlug?e=x3tMak)
Sign in with Wallet
Connect another wallet