菜鳥救星網頁設計小知識:為何不能使用中文命名檔案?

文、前端小編

在製做一個網站時,往往不單單只要有一個畫面那麼簡單,一個網站會包含了許多檔案:文字、圖片、程式碼、影音……等等。當你想要架設一個網站時。你需要將這些檔案在你的網站伺服器上一一的架構好,且分門別類的命名,以確保這些檔案們能夠互相溝通,讓你的網頁能夠正常顯示,網站才能正常上線。

閱讀全文 →

菜鳥救星網頁設計:純CSS手風琴效果

文、前端小編

剛接觸CSS的你,對於Javascript還尚未有深刻的認識,要怎麼做出下面如圖所示的手風琴效果呢?

這個使用範圍相當廣又簡單方便的效果:手風琴效果,一般網站可以用在選單、產品分類,或是新聞公告…等等,就看網站開發者要怎麼運用。現在就跟著我們一步一步來完成吧!

閱讀全文 →

菜鳥救星網頁設計教學:按鈕Hover效果(下)

文、前端小編

設計網頁的時候要怎麼達到吸引使用者但又不太複雜的效果或特效呢?簡單的按鈕hover效果不只會豐富你的網頁,還會加強你的網頁設計感。下面就來一一介紹幾個簡單的按鈕hover效果吧!

► 回顧 網頁設計教學:按鈕Hover效果(上)

閱讀全文 →

菜鳥救星網頁設計教學:按鈕Hover效果(上)

文、前端小編

設計網頁的時候要怎麼達到吸引使用者但又不太複雜的效果或特效呢?簡單的按鈕hover效果不只會豐富你的網頁,還會加強你的網頁設計感。下面就來一一介紹幾個簡單的按鈕hover效果吧!

在我們開始之前, 首先要先設置好HTML頁面,將一塊div標籤的class命名為demo,且建立三個a標籤,並將其class命名為hover,在依序新增對應的data-hover屬性。

閱讀全文 →

菜鳥救星網頁設計教學:8個簡單的CSS Hover效果

文、前端小編

剛入門網頁的你時常苦惱網站一動也不動覺得很死板嗎?強大的CSS3提供了相當多的新功能,例如transition、transform、border-radius……等等,透過這些新功能,可以讓原本比較靜態的網頁,變成有許多動態繽紛的效果。現在就來看看適合前端入門的一些簡單又實用的CSS Hover效果吧!

在我們開始之前, 首先要先設置好HTML頁面,將一塊div標籤的class命名為demo。

閱讀全文 →