CSS Diner – 邊學CSS Selector 邊吃晚餐!

css-diner

看到很可愛的動畫了嗎~,這是css diner,在這個網站遊戲中,你可以學習26個CSS選擇器的用法(含CSS3),從初級到高級,比如子元素選擇器、後代選擇器、偽元素選擇器等等,如果你玩完這個Css Diner,我想你對CSS的選擇器已經了解差不多了,下面一起來看看怎麼玩吧~。

 

CSS Diner,如下圖,這遊戲要我們選擇畫面中會”動”的元素,下圖是兩個碟子,哪麼我們就選擇碟子了,當你滑鼠移上去也會出現對應的html元素。

css-diner-a1

碟子的html為plate,輸入後,如果答案正確就會跳到下一題,簡單又好玩~

 

選擇在“動”的食物,中間的黃瓜在動0.0,所以我們輸入“#fancy pickle”

css-diner-b

贏囉

如果你通過所有題目,會顯示以下畫面,成為CSS神人!~。

css-diner-god

如果你玩的時候遇到困難或有什麼不懂的地方,歡迎在下方留言處提問,讓大家一起幫助你吧!

CSS Diner : http://flukeout.github.io/

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s