---
# System prepended metadata

title: '*2022/04/14 Lesson05_HW*'
tags: [資訊系統實驗]

---

###### 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>

```

## 效果截圖：
![](https://i.imgur.com/ELBJ2F7.jpg)
![](https://i.imgur.com/0fP6Ju3.jpg)
![](https://i.imgur.com/oMZdX5C.png)
![](https://i.imgur.com/77ynjtR.jpg)
![](https://i.imgur.com/lSgBVmL.png)
![](https://i.imgur.com/QfZtNIC.png)

## 原始碼下載：
[OneDrive下載連結](https://1drv.ms/u/s!AvwcoqTkdjpWg4p6d0CjEupJr9qlug?e=x3tMak)