上一篇加入了動畫效果後,現在要來寫介紹文字與搭配CSS的排版,做出有自適應效果的首頁 步驟一:製作多彩文字 多彩文字的想法是來自於蘋果的 HomePod min...
常常看到有些網站的漢堡選單用換圖的方式從 三 --> X會覺得有點可惜,其實漢堡選單的動態一樣CSS 就可以搞定!說不定會因為動得太可愛,讓大家一直點 (...
CSS屬性書寫順序建議 建議遵循以下順序 1. 布局定位屬性 : display / position / float / clear / visibility...
Q: 說好的文字Loading呢?A: 客倌這裡上菜囉~ 前幾篇的Loading都是以圖案循環為主,今天比較特別要來做文字版本的Loading,文字可以隨著...
昨天介紹了各種選擇器,今天介紹偽類及偽元素樣式設定,可以讓畫面有更多的樣式變化,也減少html code的撰寫。讓我來為你一一介紹各種屬性使用方式吧~ 偽類選擇...
「DOM API定義了JavaScript存取、改變HTML架構、內容、樣式的方法,甚至對節點綁定的事件。」 前面幾篇提到了JavaScript改變HTML架...
了解HTML以後,CSS也一定要熟悉一下!CSS用來定義文件的樣式、佈局,甚至可以做出簡單的動畫。今天就來認識幾個基本常用的語法。 基本架構 先來解說CSS的...
文字跑馬燈偶爾會在一些運動品牌或是潮牌看到,裝飾效果很棒又很炫,以前也是傻傻以為要用JS寫,偵測跑完了再放下一段......但在Youtube看到這個教學影片)...
圓角邊框 使用border-radius圓角邊框樣式,可以修改盒子邊框變成圓角 語法: border-radius:length; //四邊屬性設置同樣 bo...
Q: 連假後腦袋不好使呢!A: 腦袋可不可以也Rotate轉起來? 本篇還是Loading,這次要做的是一個常見的時鐘icon,內部的指針會一直旋轉的Loa...
此篇會介紹使用 text-align、vertical-align 對齊時的注意事項以及常見問題,最後會分享兩個新手容易遇到的雷。 text-align 針對...
前言: 上一篇的最後我們提到今天要來補完Update和Delete,可是阿森不想讓所有人都可以控制我們的留言,這時候就會需要用到一個登入系統,讓網頁知道誰是老...
CSS中語法有著三大特性 分別為: 層疊性、繼承性、優先性 1. 層疊性 若是設置給相同選擇器相同的樣式 此時一個樣式就會覆蓋(層疊)另一個衝突的樣式 層疊性...
現在我們會使用具有互動性的簡單漸變效果了,接著要來試著讓網頁能增添更多活力,不需要我們操作,就會自動播放動畫效果。 什麼是 animation? animat...
本篇介紹偽類中的狀態選取器:checked應用篇:做一個開關按鈕 :checked介紹 :checked是分類在本刊第4篇選取器 > 偽類別(pse...
這一兩年很常在網頁設計中看到這種不規則的小東西出現,甚至還會像波浪一樣動。之前傻傻地用Svg做,然後一直換path,結果效能不太好。上網一查發現其實只要用bor...
Q: 還是Loading嗎?A: 一大系列!接下來的樣式會比較不同~ 上兩篇做完圓圈的Loading效果,本篇來個方形的Loading,並給予不同的樣式~...
工程師都有google的習慣,但是 bootstrap 的使用方式不用特別去估狗,基本的用法只要看官網的介紹就可以了。若發現自己看不懂文件,多半都是自己還沒有補...
此篇會介紹 Bootstrap 常用的對齊語法注意事項以及常見問題分為上下兩集。上集介紹 display、spacing。 Display 設置每個元素的排版...
Project Structure 這篇文章我們來建立我們Sass專案的架構~ 一般Sass專案內都會有一個主要的.scss檔案,其用來負責將所有有用到的.sc...
前言: 昨天我們成功建立了php網頁和mysql資料庫的連線,讓我們順利的把一些使用者填寫的資料送到資料庫,今天我要來介紹如何讀取這些資料並且在網頁上秀出,同...
現在我們會使用基本的偽類選擇器做效果了,但看到變化過程一閃而過、冷冰冰的,想增添更多漸變效果,讓動態效果可以更多變化、更平滑動感,就要使用我們的 transf...
前幾天都比較專注在文字上的CSS動態,今天就來看看圖片的吧!比起一堆文字,放圖片絕對能夠說個好故事!可是一張圖片不夠說明怎麼辦?那就在使用者Hover的時候才把...
1. 什麼是元素顯示模式 元素顯示模式就是元素(標籤)以什麼方式進行顯示 作用 : 網頁的標籤非常多,了解他們的特點可以更方便的布局網頁 ex : <di...
看完了前幾天製作網頁,所需要的素材、使用編輯器及製作網站的流程後後,今天要來介紹HTML、CSS的基本結構,跨出製作網站的第一步了 HTML HTML是什麼?...
Q: 今天叫醒你的是什麼?A: 是迷糊中醒來後,看到草稿不見的震撼(✘﹏✘ა) 繼上一篇 Loading 動畫,本篇做的是另一種 Loading 效果,這篇...
CSS背景屬性 可以給頁面元素添加背景樣式背景屬性可設置背景顏色、背景圖片、背景平舖、背景圖片位置、圖像固定等等 1.背景顏色background-color屬...
怎麼選取到元素改變網頁原有外觀呢?本篇主要整理CSS選取器分類及CSS優先權 切版學習途中,你是否有這樣的疑問? 要怎麼選才能選到我要的元素改變? 認識選...
雖然標題有點聳動,但在這個行動裝置越來越多的現在,如果沒有手機版的網頁,SEO 排名會大受影響,也等同於宣告死刑了。 沒有手機版網頁,使用者體感差,字小按鈕也...
昨天的第三個按鈕動態提案:文章傳送門 使用了CSS動態的動態的主菜——Animation。其實有很多特效,只要能夠拆解他的原理,就可以使用Animation達成...