• 顯示一個連結, 連結文字為 新媒體內容與技術
• 連到本課程首頁 ( https://xinmeti.co )

• 顯示這張圖片: https://xinmeti.co/assets/img/sample/sakura.gif

• 顯示這個影片: https://xinmeti.co/assets/img/sample/sakura.webm
• 影片要能自動播放

• 重現這張圖的內容 ( 不含邊框 ):
  
• 必須使用 ol, li 與 a 標籤
• 連結均連至輔大首頁 ( https://www.fju.edu.tw )

• 重現下圖排版:
  
• 中文需正確顯示
• 下列文字可供直接複製貼上
  生平 邁茲·米克森出生於哥本哈根的奧斯特布羅(Østerbro)，父親則是計程車司機，母親是名護士，哥哥拉斯·米克森同是演員，邁茲是家中次子，二人出身於藍領家庭在諾雷布羅(Nørrebro)一起長大。 他在青少年時期擔任體操運動員，志願是參加競技。後來卻到了位於哥特堡的芭蕾舞學院，在那裡他學會了流利的瑞典語。在成為演員之前當了近十年的專業舞者，直到他決定學習演戲並進入奧胡斯劇院之表演學校就讀，從此開始了他的演員生涯。 參與作品 年份 片名 角色 備註 2005 Julie Harald 6集 2013-2015 雙面人魔 漢尼拔·萊克特博士 39集 2022 怪獸與鄧不利多的秘密 葛林戴華德

• 黑底白字
• 文字置中
• 文字上下有適當留空

• 將 p 標籤的樣式設定為:
  • 寬度為 15%
  • 黑色邊框, 樣式隨意
  • 字體大小 2 em
  • 三個 <p> 並列同一行，不換行
  • 元素裡外的四周都留白 0.5em 寬
  下圖為供參考的範例:
  
• 不使用 inline style 而使用 <style> 標籤
• 測試時, <style> 寫在編輯器的 HTML 頁籤中, 而非 CSS 頁籤中

1. 下例共有五組標籤，分別有不同的顏色：

對應的 HTML+CSS 程式碼如下：

但程式碼中問號 ( ??? ) 的部份遺失了。請你嘗試把這段程式碼修復，並把修好的程式碼貼到作答區。 ( 你只需依序將對應的 CSS Selector 寫出來即可。亦可以貼上完整程式碼 )

• https://xinmeti.co/assets/img/midterm/coffin.gif ( 小圖 )
• https://xinmeti.co/assets/img/midterm/coffin2.gif ( 背景圖 )

注意以下事項:

• 必須使用 nth:child Selector
• 為簡化問題, 答案的 HTML 部份已經先寫好了, 你可以直接拿去用, 如下:
  <div><div></div><div></div><div></div><div></div></div><div><div></div><div></div><div></div><div></div></div><div><div></div><div></div><div></div><div></div></div><div><div></div><div></div><div></div><div></div></div>

• 色碼分別為 #f00, #f90, #fff
• 方塊中的數字即為該方塊之長度相對於其它方塊之比例

我們有教 CSS Transform, 但沒有教 CSS 3D Transform 。3D Transform 使用起來跟一般 Transform 一樣，並不困難。

比方說，你只要先準備一個 div 容器，設定透視的基本參數如:

接著就可以為容器內的元素設定 3D Transform 了。比方說， 3D 的旋轉語法如下，前三個數字代表旋轉軸的單位向量，最後一個數字代表角度：

以上的代碼都可以直接複製貼上，不需要修改就可以實現這個題目。那麼，請搭配這題的說明、使用 CSS Animation 實現下圖動畫效果：

• 加容器，這題一共使用了 5 個 DIV。內部的四個 DIV 尺寸為 200px x 100px 。
• 動畫長度 1 秒。
• 請注意，滑鼠移至圖形上時，動畫需停下。你可以將 CSS 樣式 「animation-play-state」設定成「paused」來暫停動畫，而設定成「running」則讓動畫繼續執行。