iT邦幫忙

css相關文章
共有 1091 則文章
鐵人賽 開發技術 DAY 1
30天掌握Sass語法 系列 第 1

達標好文 技術 30天掌握Sass語法 - (1)什麼是SASS?它真的能加速我寫CSS的效率嗎?

SASS是一個可以提升寫網頁CSS效率的程式語言, 但礙於學習曲線門檻過高,導致國內網頁設計師的使用率仍未普及化, 希望藉由個人從CSS轉SASS的經驗分享,...

技術 怎麼把「滾動條」隱藏?

問題釐清 什麼是「滾動條」? 滾動條指的是下圖右側被紅線框起來的部分: 只要網頁內容大於視窗,滾動條就會出現。 一般來說,只要不是body層次的滾動條,那用o...

鐵人賽 開發技術 DAY 11
CSS沒有極限 系列 第 11

達標好文 技術 CSS沒有極限 - CSS的神奇Calc運算

今天來介紹CSS最犯規的function calc,通常會用來做數值的運算,尤其是針對於長寬等等,而他最特別的是運算的數值"不需要"相同單位...

鐵人賽 開發技術 DAY 8
30天掌握Sass語法 系列 第 8

達標好文 技術 30天掌握Sass語法 - (8)Sass、Compass環境安裝流程教學

之後會講到Compass的功能, 它是一個支援Sass的強大工具, 所以這裡就順道講一下該如何在windows的環境下使用Sass, 同時錄製安裝流程影片,提供...

鐵人賽 開發技術 DAY 6
30天掌握Sass語法 系列 第 6

技術 30天掌握Sass語法 - (6)利用Sass「@mixin」,讓你省去重複撰寫相同CSS樣式的時間

在以前寫CSS的時候, 我們時常會遇到以下的情境, 在開發多種CSS樣式時,會講第一次寫的程式碼複製貼上後, 再進行修改,但當樣式整個大修時(例:圓形改方形),...

鐵人賽 開發技術 DAY 35
CSS沒有極限 系列 第 31

技術 CSS3 垂直文字書寫

html最早都是應用於拉丁文上,而拉丁文主要是水平由左到右的書寫方式,而到了其他的語系國家,文字也只能用水平由左到右的書寫方式;而漢字是屬於垂直書寫由右到左的書...

鐵人賽 開發技術 DAY 2
30天掌握Sass語法 系列 第 2

達標好文 技術 30天掌握Sass語法 - (2)SASS該怎麼寫?會和純CSS寫法差很多嗎?

寫過CSS的朋友都知道, CSS並不像是其他程式語言 擁有類似變數、條件等方式來撰寫, 僅只能一行行來進行編輯,所以當今天有很多地方需要去做修正時, 就必須花很...

鐵人賽 Modern Web

技術 [十分鐘學習] Swiper - 最新潮的幻燈片/跑馬燈效果

Swiper是時下完整的幻燈片/跑馬燈套件,使用效能高,並可運用在行動裝置上及混和式App上,不但在最新版本的iOS上運作很好,在Android、Window...

鐵人賽 Modern Web

技術 [十分鐘學習] Videos.js - HTML5影片播放器

Video.js是隨著HTML5的來襲所打造的媒體播放器,支援HTML5和Flash影片,類似Youtube或Vimeo的插件,支援桌上型和行動裝置,這個專案...

鐵人賽 Modern Web

技術 [十分鐘學習] FullCalendar - 滿版行事曆

設計一套滿版、且可拖曳事件的行事曆。Bootstrap的排版風格,可讀入JSON格式資訊,安裝容易,支援響應式排版,要做行事曆的極佳利器 GitHub St...

鐵人賽 開發技術 DAY 3
30天掌握Sass語法 系列 第 3

達標好文 技術 30天掌握Sass語法 - (3)如何透過「變數」提升撰寫CSS效率

這一天要講的是SASS「變數功能」, 首先模擬一些寫純CSS容易會遇到的情境 1.一個網站內有四組文字連結顏色樣式,總CSS程式碼有5000行,有文字連結顏色的...

鐵人賽 自我挑戰組 DAY 6

技術 Day6 如何做出響應式網頁(RWD)?

常常聽到響應式網頁,但是怎麼做呢? 響應式設計(Responsive web design)指的是使網頁內容在不同裝置下,都可以呈現出適切的內容。在說明如何設定...

鐵人賽 Modern Web DAY 1

技術 [十分鐘學習] DataTables - 替表格穿上鋼鐵衣

DataTables是jQuery的JavaScript函式庫,目的是強化表格操作(如搜尋、排序),並自動加入元件引入表格中,使用非常靈活且簡易 GitHu...

鐵人賽 Modern Web

技術 [十分鐘學習] TinyMCE - HTML編輯器

功能豐富的JavaScript的HTML編輯器,功能齊全且輕量級。另外要注意TinyMCE對IE11以上才可運行 GitHub Star: 5,000 Ja...

達標好文 技術 CSS 引入HTML 三種方法

CSS 引入HTML方法有三種 個人比較推薦 連結式方法 當作一個檔案眾多的網站 用嵌入式是一個相當費工夫的做法 不推薦匯入式方法 缺點是先讀取網頁再讀取css...

鐵人賽 Modern Web DAY 9

技術 [十分鐘學習] Chart.js - 圖表繪製

對設計師或開發人員,淺顯易懂的的JavaScript圖表應用 GitHub Star: 34,100 Javascripting Overall: 97%...

鐵人賽 Modern Web

技術 [十分鐘學習] Infinite Scroll - 捲軸瀏覽至底載入新資料

Infinite Scroll是一套當捲軸至底時,會載入下一個頁面的資料的原生JavaScript套件,在網路上很常見。行動裝置也支援 GitHub Sta...

技術 解決IE6不支援css min-width與min-height

min-width與min-height在css中是相當好用的語法,可以讓HTML元素最少仍保持一定的寬和高,而需要時仍隨著元素的內容增加寬和高。 這麼好用的語...

鐵人賽 Modern Web

技術 [十分鐘學習] Sortable - HTML物件乾坤大挪移

Sortable可以對HTML物件做拖曳移動清單的JavaScript函式庫,支援行動裝置且不依賴jQuery等其他第三方,並相容Bootstrap等CSS框...

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

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

鐵人賽 Modern Web

技術 [十分鐘學習] toastr - 簡易提示訊息

toastr是一套提示訊息JavaScript函式庫,必須載入jQuery,宗旨是利用簡單的程式碼函式庫來做客製化跟擴充。toastr提供一個範例頁面toas...

鐵人賽 Modern Web

技術 [十分鐘學習] fullPage.js - 全頁式導覽

建立一個全頁式導覽的網站 GitHub Star: 22,000 Javascripting Overall: 88% 瀏覽器: Chrome、Firefo...

鐵人賽 Modern Web

技術 [十分鐘學習] clipboard.js - 複製/貼上

複製內容到剪貼簿的小工具,不依賴Flash,大小只要3KB GitHub Star: 20,000 Javascripting Overall: 90% 瀏...

鐵人賽 開發技術 DAY 12
CSS沒有極限 系列 第 12

技術 CSS沒有極限 - CSS的新"文字"及"尺寸"單位

大多數網站在文字的單位都是使用px,尤其在台灣多數使用者都是用windows系統,不管是什麼瀏覽器,在windows下都是以單數px是較為清楚的,如13xp.1...

鐵人賽 Modern Web

技術 [十分鐘學習] p5.js - 繪畫套件

p5.js是一套JavaScript函式庫,有完整的繪畫功能,並不侷限在畫布上,你可以把整個瀏覽器當作你的草稿,另外有套件可以讓你更容易去做HTML5物件互動...

鐵人賽 開發技術 DAY 7
30天掌握Sass語法 系列 第 7

達標好文 技術 30天掌握Sass語法 - (7)利用Sass「@extend」,讓你無痛合併CSS樣式

有的時候我們為了不要讓CSS太龐大, 所以有class用到相同樣式時, 都會將其合併起來, 如下CSS碼: /* 第200行位置 */ .header h1,...

鐵人賽 Modern Web

技術 [十分鐘學習] Leaflet - 全民地圖改造王

Leaflet是一套對行動裝置友善的互動地圖並且開源的JavaScript函式庫,總大小只有38KB,卻有著大多數開發人員想要需求。簡單、專業、實用並且跨平台...

達標好文 技術 其實Css的內心還住著一位Print

一、真實案例 聽說網頁按右鍵就可以列印了? 但簡直就像卸了妝一樣 , 慘不忍睹啊!!! 二、那位來至邊緣地帶的Print 小明:欸 , P....? ,...

鐵人賽 Modern Web DAY 17
前端新手村 系列 第 17

達標好文 技術 前端新手村 Position 定位

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

鐵人賽 Modern Web DAY 21

達標好文 技術 Day21:小事之 CSS Reset 與 CSS normalize

為什麼會想介紹 CSS Reset 與 CSS normalize ? 因為在很久很久以前(喂~)。咳!重來。 在 W3C 制訂 HTML 與 CSS 規格時,...