iT邦幫忙

css相關文章
共有 952 則文章

技術 前端工程學習日記第17天

#偽類:before :after做左右畫線標題效果 經常可以看到這樣的標題設計是在左右有一條橫線中間是文字的做法,可以使用偽類選取器before/after...

技術 我遇到的RWD網頁難題

上次文章終於迎來續集 我的第一個RWD網頁 這次的網頁練習跟上次的網頁是同系列的,不過這次可是有記起上次的教訓。 也第一次使用了SCSS和GitHub。(這部分...

徵才  【醫療相關產業】資深軟體工程師 月薪5~12萬元

【代徵】日商醫療器材廠商 資深軟體工程師 工作內容 1.醫院自動化系統開發與維護 2.公司內部系統開發與維護 3.協助部門主管帶領工程師完成任務 必要技能: A...

技術 我的第一個RWD網頁

開始之前先送上菜雞的code 這是我第一次實作RWD的網頁,又因為最近同步在看Bootstrap。 所以起初覺得很簡單,畢竟Bootstrap打一下md或lg,...

技術 前端工程學習日記第二天

11/2複習 HTML中插入CSS tab可以用快速插入 h1{color: blue;font-size:00px;} p{color:red;} 選擇器...

技術 前端工程學習日記第4天

#使用 margin(向外)、padding(向內) 來推擠距離 css: .box{border:10px solid #000; padding-left:...

鐵人賽 Modern Web

技術 Top、Right、Bottom、Left - 金魚都能懂的CSS必學屬性

Top 、Right 、Bottom 、Left 4個 CSS 屬性是搭配 position 一起使用的,倘若沒有 position 的話,這4個屬性是不會有...

鐵人賽 Modern Web
HTML 與 CSS 學習筆記 系列 第 31

技術 HTML 與 CSS 學習筆記 - 系列目錄

前言 將這 30 天的資料做成目錄,並簡單說明內容,方便查找 紀錄一下 系列目錄 HTML 與 CSS 學習筆記 系列 Day01 - 說明、工具 前言...

鐵人賽 Modern Web DAY 30
HTML 與 CSS 學習筆記 系列 第 30

技術 Day30 - 結語、推薦

結語 感謝鐵人賽的契機,讓我又完成一門課了,雖然是一門基礎的課程,但是過程中依然放了不少心力,看那幾乎都接近時限前的發文,每天都花 1 ~ 2 小時的時間,上完...

鐵人賽 Modern Web DAY 30

技術 position - 金魚都能懂的CSS必學屬性

position 這個屬與 display 一樣,實在是一個太重要的屬性了,同樣的要在一個篇幅中講完其實是不可能的事情,它可以說是目前金魚都能懂的 CSS 必學...

徵才 日商(網站維護及網頁設計) 月薪60K

【工作內容】 ・使用HTML、CSS編輯網站後台 ・相關網站維護及網頁設計 ・公司官網的程式編碼 ・其他業務支援 【條件】 ・網站架構、維護三年以上相關經驗 ・...

鐵人賽 Modern Web DAY 30
重新認識 Flex 和 Grid 系列 第 30

技術 [Day30] grid z-index 分層 / order 順序

終於也進入到尾聲了,最後一章要介紹網格項目的分層與順序。 z-index 分層 .item { z-index: auto | <interger...

鐵人賽 Modern Web DAY 29

技術 【Day 29】超級好用的側邊欄固定效果 - Sticky Sidebar

by Sticky Sidebar Sticky Sidebar 是一個 JavaScript 外掛插件,大多用於製作有 sticky 效果的側邊欄(可理解為...

鐵人賽 Modern Web DAY 29

技術 Display - 金魚都能懂的CSS必學屬性

display 這個屬性實在是一個太重要的屬性了,要在一個篇幅中講完其實是不可能的事情,它可以說是目前金魚都能懂的 CSS 必學屬性中,排版類屬性內最重要的一個...

鐵人賽 Modern Web DAY 29
HTML 與 CSS 學習筆記 系列 第 29

技術 Day29 - Float

Float float:用來將區塊並排時可以使用,當設定浮動時,其父層會抓不到子層的高度 left:靠左浮動 right:靠右浮動 none:不浮動...

鐵人賽 Modern Web DAY 29
重新認識 Flex 和 Grid 系列 第 29

技術 [Day29] grid 項目對齊屬性

如果熟悉 flexbox 的對齊屬性,在這邊的用法也是大同小異。在 grid 中因為沒有主次軸的概念, justify-* 通常是操控"行"...

鐵人賽 Modern Web DAY 29
喪屍黑白切 系列 第 29

技術 Day 29 | 來組合個畫面吧 - Part 2

昨天稍微提了一些我切畫面時, 對 HTML 的規劃, 今天就來講 CSS 的部分啦! (鐵人賽剩一天好興奮啊~終於可以休息一下了) 在 CSS 撰寫習慣上, 有...

鐵人賽 Modern Web DAY 28
HTML 與 CSS 學習筆記 系列 第 28

技術 Day28 - HTML 與 CSS (10) - 網頁設計

網頁設計 環境:將多頁面的檔案建立,連結確認彼此間的關係 layout (佈局):評估多個頁面皆會出現的部分,如開頭與結尾,可稱為佈局 保持彈性:內容長度不定...

鐵人賽 Modern Web DAY 28
重新認識 Flex 和 Grid 系列 第 28

技術 [Day28] grid-row / grid-column + grid-area

如果你已經對上一篇 Day27 的屬性熟悉,這篇很快就會懂,因為只是加以說明上一篇的縮寫方式,一樣都是在控制網格項目的範圍。 grid-row / grid-...

鐵人賽 自我挑戰組 DAY 28
網頁學習雜記 系列 第 28

技術 Day 28 | Circular timer animation

今天要來分享我看 Youtube 影片做出來的 timer, 照慣例先放影片連結, 用他裡面提到的觀念延伸做出我這個 timer。 HTML <div c...

鐵人賽 Modern Web DAY 28

技術 【Day 28】Youtube iframe 影片自動縮放大小 - CSS 解決方法

在製作網頁時很常遇到,網站內需要嵌入 Youtube 影片,但影片無法跟隨螢幕尺寸縮放的問題。 通常使用 Youtube 分享功能嵌入的 iframe 原始碼,...

鐵人賽 Modern Web DAY 28

技術 Box-sizing - 金魚都能懂的CSS必學屬性

Box-sizing 這個屬性是一個新時代的屬性,也是目前這時代網頁入門必備的一項常識,box-sizing 的作用是控制 width 與 height 作用的...

鐵人賽 Modern Web DAY 27

技術 margin & padding - 金魚都能懂的CSS必學屬性

margin 與 padding 這兩個屬性應該是所有新手必學的兩大屬性,也是網頁入門必備的一項常識,margin 與 padding 分別控制物件的外部距離與...

鐵人賽 Software Development DAY 28

技術 誰說低代碼平台上就不能寫自己的CSS

都已經千辛萬苦的學會CSS了,不用用這個技能不是就太浪費了嗎? 對,本篇文就是要來看看怎麼在低代碼平台上用CSS。 工具 好用的IDE (我用Visual S...

鐵人賽 Modern Web DAY 27
重新認識 Flex 和 Grid 系列 第 27

技術 [Day27] grid-row-start / grid-row-end + grid-column-start / grid-column-end

如果想要控制網格項目的放置位置,就要知道怎麼定義項目放置的"行"與"列"分別是在哪裡。 grid-row-start...

鐵人賽 自我挑戰組 DAY 27
網頁學習雜記 系列 第 27

技術 Day 27 | CSS Image Block Reveal Hover Effects

今天想要分享的是這個, 記得我當時看到這個效果的時候覺得真的是炫炮過頭了, 馬上整個影片看完做練習, 做一做還邊想可以用什麼不一樣的方式做, 結果我老師建議我可...

鐵人賽 Modern Web DAY 27
喪屍黑白切 系列 第 27

技術 Day 27 | 等待的時間不無聊 - loader

今天想要分享的是這一個 Youtube 影片做出來的等待畫面, 我只有挑他的其中一個寫, 其他可以看他影片做做看。 loader 是個在網頁 render 前的...

鐵人賽 Modern Web DAY 28
我說那個手機版 系列 第 28

技術 [Day 28] 關於 InAppBrowser

InAppBrowser 說在最前面的,以目前的 iOS / Android 生態來看,所謂的 InAppBrowser 大部分的支援程度都還算可以。最主要的差...

鐵人賽 Modern Web DAY 26

技術 min-width & max-width - 金魚都能懂的CSS必學屬性

min-width 與 max-width 這兩個屬性跟 min-height 與 max-height 其實就跟 width 還有 height 差不多,唯獨...

鐵人賽 Modern Web DAY 26

技術 【Day 26】CSS Animation - CSS 動畫資源蒐集與使用教學

by CSS Animations- Guide to Cubic Bezier Curves 關於 CSS Animation 的基本介紹與使用方法,筆者推...