iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

6 Like 1 留言 9262 瀏覽

鐵人賽 Modern Web DAY 11

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列第 11 篇

技術子代選取器 - 一個最安全且不會讓你株連九族的選取器

本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持購書連結 https://www.tenlong.com.t...

CSScoke ‧ 2019-09-26

6 Like 2 留言 9125 瀏覽

鐵人賽其他技術 DAY 25

快寫HTML靜態網頁系列第 22 篇

技術圖與文的佈局利用 Bootstrap 完成

圖和文排在一起，沒什麼設計經驗者，不是排得太單調，就是排得很亂， Bootstrap 把常會用到的樣式，設計成易於套用或變化。可能會有一堆的圖與文需要並...

逮丸逮丸 ‧ 2013-10-10

1 Like 1 留言 9125 瀏覽

鐵人賽 Modern Web DAY 7

這個網站也太嗨！30 個網頁動態提案系列第 8 篇

技術 #6-無限文字Logo跑馬燈 (不用JS! CSS Animation)

文字跑馬燈偶爾會在一些運動品牌或是潮牌看到，裝飾效果很棒又很炫，以前也是傻傻以為要用JS寫，偵測跑完了再放下一段......但在Youtube看到這個教學影片）...

Global Rachel ‧ 2021-09-22 ‧團隊寫 code 需要講幹話

13 Like 2 留言 9058 瀏覽

鐵人賽 DAY 9

Rails 的簡單任務系列第 10 篇

技術 [RoR] 簡單完成分頁功能

多筆資料的分頁是網站建置常見的需要，RoR 的分頁真的是異常的簡單，只要透過 will_paginate 的 plugin 或 gem，再加個兩行就完成了。安...

逮丸逮丸 ‧ 2008-09-23

3 Like 0 留言 9040 瀏覽

鐵人賽 Modern Web DAY 3

30天學習30套前端技術(2018年) 系列第 3 篇

技術 [十分鐘學習] JQuery lightSlider - 圖片滑起來

JQuery lightSlider是一套輕量且響應式的跑馬燈/幻燈片、附有縮圖導覽。另有相本功能、垂直跑馬燈，應用層面廣泛 GitHub Star: 1,...

mfhsueh ‧ 2017-12-22

3 Like 0 留言 9011 瀏覽

技術 CSS沒有極限 - CSS3 :target選取器，可以做出許多nojs的互動效果

CSS3多了相當多的selectors，而:target是其中一個，它可以讓html的id被套用上新的樣式，而這功能也可以讓html的互動性更高。本篇內容同步...

卡斯伯 ‧ 2013-09-29

1 Like 0 留言 8974 瀏覽

鐵人賽 Modern Web DAY 9

菜鳥前端奮鬥史(欸? 系列第 9 篇

技術 Day09 「都去整形從零開始」 ─ Reset CSS 的重要？

已經有開始自己動手寫 HTML 、 CSS 的小夥伴們可能會發現同樣一段的 <h1>Hola World</h1> 在不同的瀏覽器上，...

阿陰 ‧ 2017-12-28 ‧團隊Lorem100+tab

6 Like 1 留言 8954 瀏覽

鐵人賽開發技術 DAY 43

30天掌握Sass語法系列第 39 篇

技術 Sass開發流程設計 - (13)Susy RWD Grid排版流程(上)

前面花了幾章篇幅討論Susy該怎麼用，這次我們就直接進入實作吧，首先我先找了個free的template：http://www.html5mania.com...

廖洧杰 ‧ 2013-10-28

6 Like 0 留言 8926 瀏覽

鐵人賽 Modern Web DAY 23

金魚都能懂的CSS必學屬性系列第 23 篇

技術 Border & outline- 金魚都能懂的CSS必學屬性

border 主要用途是設定物件的邊框線， outline 是設定物件的外框線，這兩個很類似，但卻有一些細節有所差異，若是不清楚的話就可能會誤用，兩者的原始碼中...

CSScoke ‧ 2020-10-08

8 Like 2 留言 8916 瀏覽

鐵人賽開發技術 DAY 32

30天掌握Sass語法系列第 28 篇

技術 Sass開發流程設計 - (2) Sass結構規劃、全域變數設定

切完所有圖片後，就可以開始規劃Sass檔案了，當你今天新建立一個Sass專案時，裡面預設會有print、ie、screen的Sass檔案，第一次撰寫Sa...

廖洧杰 ‧ 2013-10-17

0 Like 1 留言 8907 瀏覽

鐵人賽 Modern Web DAY 5

菜鳥前端奮鬥史(欸? 系列第 5 篇

技術 Day05 「弟兄們，為了SEO！」 ─ 將 h1 圖片取代文字！

今天來簡單介紹一下，如何將 h1 (主標題)內的文字置換成精美的 LOGO 圖片！當然精美的 LOGO 請自己做自己想辦法，這邊只有教學怎麼置換而已 (喂...

阿陰 ‧ 2017-12-24 ‧團隊Lorem100+tab

9 Like 1 留言 8904 瀏覽

鐵人賽開發技術 DAY 26

CSS沒有極限系列第 22 篇

技術 CSS沒有極限 - CSS transform-3D的透視(perspective)

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-11 (建議使用Chrome瀏覽器) 本篇介紹的transform 3D...

卡斯伯 ‧ 2013-10-11

3 Like 2 留言 8821 瀏覽

鐵人賽開發技術 DAY 21

30天掌握Sass語法系列第 17 篇

技術 30天掌握Sass語法 - (21) Sass常見編譯錯誤介紹

一般網頁設計師在編譯Sass時，時常會遇到一些無法編譯成功的問題，通常要找很久資源才會知道該怎麼撰寫正確的Sass格式，所以這裡也提供一些除錯細節，讓大...

廖洧杰 ‧ 2013-10-06

9 Like 1 留言 8816 瀏覽

鐵人賽開發技術 DAY 39

30天掌握Sass語法系列第 35 篇

技術 Sass開發流程設計 - (9) Off-Canvas layout with Susy

這篇文章竟然花了我7個小時XDD 中間忘了存檔重打外，重新打一遍又發現到新的觀念，於是又越拖越晚...冏，不過終於開始講到我想分享的一些較深入的Sass設...

廖洧杰 ‧ 2013-10-24

2 Like 0 留言 8813 瀏覽

鐵人賽 Modern Web DAY 20

30天學習30套前端技術(2018年) 系列第 20 篇

技術 [十分鐘學習] Parallax - 某站做出視覺效果竟然是靠它

對任何裝置、相容性高的視差引擎 GitHub Star: 12,400Javascripting Overall: 85%瀏覽器: Chrome、Firef...

mfhsueh ‧ 2018-01-08

4 Like 0 留言 8797 瀏覽

技術 30天掌握Sass語法 - (16)如何將別人撰寫的CSS Framework轉換成Sass格式

我們常常會看到國外的有名大神們都會釋出CSS framework，只要引入他的CSS檔案後，你就可以使用他的樣式進來。而這次的主題則便是跑一次相關的流程給大...

廖洧杰 ‧ 2013-10-01

3 Like 0 留言 8724 瀏覽

鐵人賽自我挑戰組 DAY 18

前端之 " wow~原來是這樣啊 " 系列第 18 篇

技術 Day18 來一個 Google Pie Chart 吧

資訊呈現中，免不了以圖表作視覺化資訊呈現，那就不能錯過好用的 Google charts 了！ Google charts 提供了一系列圖表供開發者使用，例如...

Lai ‧ 2018-11-02 ‧團隊好想工作室第二屆鐵人賽

4 Like 0 留言 8681 瀏覽

鐵人賽影片教學 DAY 6

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 6 篇

技術金魚都能懂網頁設計入門 : CSS撰寫位置 (鐵人賽第六天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 CSS能寫在哪裡? HTML原始碼的style屬性內 style標籤內...

CSScoke ‧ 2018-10-21 ‧團隊阿莫斯の推坑教

9 Like 2 留言 8653 瀏覽

鐵人賽開發技術 DAY 18

CSS沒有極限系列第 14 篇

技術 CSS沒有極限 - Web-font & icons 3連發

接下來會連接3篇文章都介紹web-font，而第一篇是基本的web-font的置入，第二篇開始會是web-font icon，並且了解web-font icon...

卡斯伯 ‧ 2013-10-03

5 Like 0 留言 8648 瀏覽

鐵人賽 DAY 17

打開30本IT書系列第 17 篇

技術 IT30書之17－《CSS大全》

《CSS大全》(第三版) 作者：Eric A. Meyer 譯者：莊惠淳出版社：歐萊禮上一本書介紹了撰寫css時，遇到困難的救火隊，雖然好用，但是真正要避開...

lalabear ‧ 2009-10-18

2 Like 0 留言 8624 瀏覽

鐵人賽 Modern Web DAY 28

連續30天的超實務網頁設計的垂直置中教學系列第 28 篇

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

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

CSScoke ‧ 2018-11-12

6 Like 2 留言 8505 瀏覽

鐵人賽開發技術 DAY 38

30天掌握Sass語法系列第 34 篇

技術 Sass開發流程設計 - (8) susy grid教學(2)

本日susy重點： 1.利用omega並排元素內容 2.透過isolation來達成Responsive image gallery grid 在以往我們在設...

廖洧杰 ‧ 2013-10-23

8 Like 0 留言 8494 瀏覽

鐵人賽開發技術 DAY 42

30天掌握Sass語法系列第 38 篇

技術 Sass開發流程設計-(12) Compass Vertical Rhythm & Susy other setting

Compass Vertical Rhythm - 網頁上的字型大小與行距的統一調整在以往我們在設計網頁時，通常在設定一些文字排版上的元素設定line-he...

廖洧杰 ‧ 2013-10-27

6 Like 0 留言 8472 瀏覽

鐵人賽開發技術 DAY 25

CSS沒有極限系列第 21 篇

技術 CSS沒有極限 - CSS transform-origin 起始點

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-10 (建議使用Chrome瀏覽器) 本篇介紹transform的起始點...

卡斯伯 ‧ 2013-10-10

1 Like 0 留言 8455 瀏覽

鐵人賽 Modern Web DAY 10

重新認識 Flex 和 Grid 系列第 10 篇

技術 [Day10] flexbox align-items

接下來幾個屬性都和對齊有關，其中 align-items 這個屬性擅長於操控"相交軸上彈性項目的對齊位置"，也非常適合拿來調整內容。如果你...

placeholder name ‧ 2020-09-25

0 Like 0 留言 8446 瀏覽

鐵人賽 Modern Web DAY 6

重新學習網頁設計系列第 6 篇

技術 DAY 6. CSS 選擇器 Selector (實際範例)

DAY 6. CSS 選擇器 Selector (實際範例) 在前面幾天我們陸陸續續地複習了幾個常用的CSS 選擇器 Selector我將在這篇中使用table...

Cian ‧ 2017-12-09

4 Like 1 留言 8435 瀏覽

鐵人賽 Modern Web DAY 4

前端新手村系列第 4 篇

技術前端新手村 CSS 的單位

「當你迷惘的時候，就回到原點想一想」-中華一番蘭飛鴻前言網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網...

Chris ‧ 2017-12-14

3 Like 2 留言 8419 瀏覽

鐵人賽開發技術 DAY 22

30天掌握Sass語法系列第 18 篇

技術 30天掌握Sass語法 - (22)Sass顏色函數介紹

網頁設計師在設計網頁時，通常都會直接瀏覽繪圖軟體工具來觀看色盤，但如果是透過Sass顏色函數的話，就可以自動產生出所想要的顏色。同時也會介紹一個Sass...

廖洧杰 ‧ 2013-10-07

5 Like 0 留言 8417 瀏覽

鐵人賽開發技術 DAY 10

CSS沒有極限系列第 10 篇

技術 CSS沒有極限 - 意想不到的background-attachment

background-attachment是背景固定模式的屬性，而不同的固定方式就能夠有不同的視覺效果，而人類的視覺是很容易欺騙的，適當的利用可以有意想不到的效...

卡斯伯 ‧ 2013-09-25

8 Like 1 留言 8413 瀏覽

達標好文技術網頁前端設計師的等級表

來看看自己的等級在哪，這裡僅針對HTML、CSS、Javascript2的等級區分來撰寫。同時也是自己成長的過程，提供大家參考。有問題可以再留言交流：）原文連...

廖洧杰 ‧ 2010-07-21

技術 子代選取器 - 一個最安全且不會讓你株連九族的選取器

技術 圖與文的佈局利用 Bootstrap 完成