技術 任務 04 | HTML、CSS 和自適應網站設計

響應式網頁設計 響應式網頁設計（英語：Responsive web design，通常縮寫為 RWD），或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。 是...

Mack Chan ‧ 2019-09-05

技術 Day4【主題一：Flexbox】＿對齊項目/align-self屬性/align-content/彈性項目

對齊項目 align-items：定義彈性項目在彈性容器交叉軸上對齊的行為。 宣告在彈性容器，而不是彈性項目。 align-items預設值是stretc...

Amy ‧ 2019-09-05

達標好文 技術 [30 道難解的 CSS 排版] 第 2 道：認識對齊 II

本文同步刊載於 MUKI space 部落格：[30 道難解的 CSS 排版] 第 2 道：認識對齊 II 昨天講了 text-align 以及 verti...

MUKIwu ‧ 2019-09-05

技術 Day3【主題一：Flexbox】＿排列彈性項目/彈性內容/調整內容

排列彈性項目 預設情況下，無論flex-flow設定了什麼樣的數值，彈性容器中最後一個彈性項目之後的空間，一定是在main-end與cross-end方向...

Amy ‧ 2019-09-04

達標好文 技術 [30 道難解的 CSS 排版] 第 1 道：認識對齊 I

本文同步刊載於 MUKI space 部落格：[30 道難解的 CSS 排版] 第 1 道：認識對齊 I 前言 我一直很想寫這系列的文章，一來是 CSS 博...

MUKIwu ‧ 2019-09-04

技術 分享一段『油土伯』創意特效按鈕 by CSS

之前看到的一段視頻 ! 因為 css 的動畫特效不常接觸, 在此分享給廣大邦友 !影片中, youtuber 巧妙的利用 <span> 來完成按鈕邊...

技術 Day2【主題一：Flexbox】＿彈性容器（flex container）

2-1. flex-direction屬性 flex-direction控制彈性項目排列的主要軸向，就是彈性項目的排列方向。 .flex-container...

Amy ‧ 2019-09-03

技術 Day1【主題一：Flexbox】＿Flexbox基礎

【主題一：Flexbox】單元： Flexbox基礎 彈性容器（flex container） 排列彈性項目 彈性內容 調整內容 對齊項目 align-sel...

Amy ‧ 2019-09-02

技術 CSS-製造捲軸

最高為100px時出現捲軸 .content{ max-height: 100px; overflow: auto; } codepen

技術 Scss - 小知識與進階功能 ( 下 )

接續上篇繼續介紹剩下的功能，這邊就比較偏程式面，設計函式會比較常使用到，GO!GO!GO! 迴圈部分 迴圈可使用 @each 與 @for 來產生重複的樣式，使...

技術 Scss - 小知識與進階功能 ( 上 )

之前介紹過 SCSS 的基礎功能了，沒看過可以看這裡唷，這次來介紹一些小知識與進階的功能吧! SCSS 小知識 註解 SCSS 的註解有分為兩種，一種會被輸出一...

技術 Scss - 基礎功能介紹

SASS / SCSS 簡介 SASS 是 CSS 的預處理器，它能編譯出原生 CSS，且提供了更多程式面的東西來撰寫 CSS，讓其更簡潔、更好維護，而 SAS...

達標好文 技術 CSS relative? absolute? 傻傻分不清楚

CSS 比較常用的有3種定位方式： position float flex 以新手來說，一開始學習定位的方式，以position居多。 其中最容易令人搞...

技術 CSS 新手容易誤踩的margin地雷

在練習的過程中，踩到了margin的地雷。 明明屬性值都對，在chrome的開發人員工具看，也都正常。 但版型就是不對，花了一段時間才找到原因。 來看看問題是怎...

技術 CSS Animation 動畫

CSS 動畫 animation 較複雜、客製化的動畫 @keyframe 使用必須考慮某些屬性的支援度 animation-* 語法 animation...

技術 CSS 專家密技筆記

CSS 專家密技筆記 自我筆記用 CSS 專家密技 CSS Coke講解 CSS 取得 data-* 內容 (實用) .test {...

技術 金魚腦 CSS網頁雜記 (持續更新)

SCSS 倍數間格 @function line($count: 1){ @return $baseLineHeight * count } .test {...

技術 JS Conf Animation with concept 心得

JS Conf Youtube錄影 Animation purpose making context clear (突顯內容) displaying hier...

技術 CSS MediaQuery小記

media type all 所有裝置 (此為默認值，可省略不寫) screen 螢幕裝置 print 印刷裝置 speech 朗讀裝置 @medi...

技術 Something about front-end

徵才 [誠徵] 網頁前端合作伙伴

誠徵網頁前端合作伙伴,希望能夠長期合作者為佳,至少網頁做一年以上吧,最好是常在切版,能夠做動畫之類的更好,然後可以介接API,希望是能夠前後端分離的,不過就算無...

技術 2019/3/28 問題小記

重要的一天，記錄一些筆記: HTML ::after 解釋在原本的元件後面增加內容。 []的運用 style{ .img img[alt]{ wi...

技術 Amos除了這超過25種垂直置中外還有別的方式嗎?

老實說 Amos 從一開始寫垂直置中系列開始也想不到今天可以寫出 25種垂直置中技巧，其實鐵人賽寫到今天為止其實也生出了超過25種垂直置中的方式，只是有些概念頗...

CSScoke ‧ 2018-11-14

技術 蓋版廣告的垂直置中技巧跟支援

數位生態 蓋板廣告太常見到了，目前幾乎人手多機的情況下，我們每天幾乎都離不開上網這行為，上網除了上班用電腦以外，幾乎都是用行動裝置上網了，也就經常會看到蓋版廣告...

CSScoke ‧ 2018-11-13

技術 CSS的Class和id到底誰比較大牌？(原始碼比對版)

相較於前一篇用文字記憶法，這篇則是用原始碼做為比較，詳細列出一眼辯英雄的矛盾大對決！從第5項實驗，我們成功證明了id確實強過class的效果！ 但是這時我突然靈...

IrisAndMimi ‧ 2018-11-13

技術 Secret 22: 斑馬條紋

幾年前當我們開始可以用:nth-child()/:nth-of-type()這類的CSS虛擬類別（pseudo-class）時，最常用來做「斑馬條紋的table...

yowlonglee ‧ 2018-11-12

技術 左圖右文版面，文字垂直置中的方式?

支援度最高的垂直置中方式 左圖右文版面的垂直置中應該是最常見到的一種需求了，這種需求的重點在於右側的文字需要垂置對齊於左邊的圖片，這種畫面基本上通常在樣版網站可...

CSScoke ‧ 2018-11-12

技術 CSS的Class和id到底誰比較大牌？(邏輯記憶版)

就像我們偶爾遇到的雙胞胎同學～ 名字和樣子可能有所差距，但是到底誰先出生，誰才是哥哥或姊姊……大概只有接生的產醫才能清楚了。 現實生活或許可以不必追究長幼，但是...

IrisAndMimi ‧ 2018-11-12

技術 Secret 21: 用CSS換行

需要用CSS換行的時機通常是在使用definition lists的時候，但有時在其他的場合也會有同樣需求。會使用definition lists因為我們想做一...

yowlonglee ‧ 2018-11-11

技術 RWD網頁等比例的區塊，我該如何選擇垂直置中的方式?

RWD等比例 目前RWD網頁應該是個再普通不過的需求了，這樣的需求在製作網頁時到底怎麼做到垂直置中的需求呢? 基本上我們當然先從等比例區塊這裡先處裡啦，等比例區...

CSScoke ‧ 2018-11-11