iT邦幫忙

scss相關文章
共有 34 則文章
鐵人賽 Modern Web DAY 29

技術 Day28 | 最強聯名款 TSX 上市-SCSS 篇

前言 本篇進入到導入 SCSS,但因為 TypeScript 的特性,導致 SCSS 還要再經過一層封裝,才有辦法被讀到 .tsx 中,詳細做法會在文中說明!...

技術 旅館預約服務練習紀錄-Bootstrap 4 + Scss

繼鐵人賽後,想把自己再推前進一點, 在 30 天的陶冶後,發現每天撥一點時間思考與撰寫程式,可以提升對於程式的熟悉感, 並可以爬梳自己所理解的東西,就算可能當下...

技術 SASS 學習紀錄 -命名設計小試身手練習

這次的練習是用 SMASS 跟 OOCSS 還有 BEM 的概念來練習, 要呈現是下方的畫面 但我覺得有點單調,所以我就把它優化了變成這樣 HTML 本身不...

鐵人賽 自我挑戰組 DAY 20
網頁學習紀錄 系列 第 20

技術 鐵人賽 Day20 向 KKBOX致敬-嵌入 youtube 連結

音樂網頁一定要有影音可以聽,這次來分享怎麼把 youtube 影片嵌入網頁中, 預計畫面如下: 看起來好像很難,是不是要寫什麼播放語法,還是怎麼寫入影片啊.....

鐵人賽 自我挑戰組 DAY 19
網頁學習紀錄 系列 第 19

技術 鐵人賽 Day19 向 KKBOX致敬-用 ul li 寫一個左右欄的圖文列表

ul li 列表寫法用途真的很廣泛,能呈現的方式也非常多。 想要呈現的方式如下: HTML 程式碼如下 <div class="pref...

鐵人賽 自我挑戰組 DAY 18
網頁學習紀錄 系列 第 18

技術 鐵人賽 Day18-向 KKBOX 致敬!用 ul li 寫一個新聞欄位!

這次要寫一個新聞欄位,是用 ul li 做成的圖文並茂,標題為連結,可以點擊的樣式 畫面如下呈現: 其實寫道今天有發現到 ul li 相當常被使用到,只是內容...

鐵人賽 自我挑戰組 DAY 16
網頁學習紀錄 系列 第 16

技術 鐵人賽 Day16-向 KKBOX 致敬!來一個滿版主視覺吧!!

今天要來寫一個滿版圖片,但不使用 img 的標籤,想呈現下方畫面 這次做法跟先前一個練習類似,但這次有一個地方有優化了一下,就是在這個地方增加下列屬性 .co...

鐵人賽 自我挑戰組 DAY 15
網頁學習紀錄 系列 第 15

技術 鐵人賽Day15-向 KKBOX 致敬!寫個右邊欄位的 header!

左邊的欄位已經寫完了,這篇開始從右側欄位開始撰寫內容, 預計 header 會長這樣,左邊是一排選單,右邊有一個按鈕,給客戶做意見回饋用, 如下圖: 為了要讓...

鐵人賽 自我挑戰組 DAY 14
網頁學習紀錄 系列 第 14

技術 鐵人賽Day14-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!播放器!

aside 終於進入最後一個部分,也就是播放器了,預計呈現樣式如下圖: 這次用了比較多技巧跟方式,慢慢的講解吧!! HTML 如下: <div clas...

鐵人賽 自我挑戰組 DAY 13
網頁學習紀錄 系列 第 13

技術 鐵人賽Day13-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!加入 hover 效果!

進入 aside 中間部分的編寫,想要寫成下方畫面 程式碼滿簡單的,跟前面的程式碼差不多,但這次加入了畫面優化跟效果, 先來看一下 HTML 程式碼 &lt...

鐵人賽 Modern Web DAY 5

技術 Day04 | SCSS 加上 Webpack 混搭款,讓你寫 CSS 上天堂

前言 SCSS 是 CSS 的預處理器,就是替原本的 CSS 再加上一些強大的語法,讓我們在寫 CSS 的時候可以更加直觀,相關說明可以查閱 官方文檔 ,本篇就...

鐵人賽 自我挑戰組 DAY 12
網頁學習紀錄 系列 第 12

技術 鐵人賽Day12-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!

這次要寫一個播放器的清單,在編寫之前,我先把 navbar 優化了一下,如下圖呈現的樣式, 但我還是沒有研究出來 search 要怎麼對齊在 navbar 的...

鐵人賽 自我挑戰組 DAY 11
網頁學習紀錄 系列 第 11

技術 鐵人賽Day11- 向 KKBOX 致敬,一樣從 navbar 開始

小弟平常喜歡聽音樂,台灣音樂串流平台的始祖 KKBOX,從一推出就使用至今,也看到 KKBOX 在台灣的音樂圈越來越具有代表性,並且還有自己的風雲榜演唱會,真是...

鐵人賽 自我挑戰組 DAY 10
網頁學習紀錄 系列 第 10

技術 鐵人賽Day10-向 KKBOX 致敬

小弟熱愛音樂,前一週自己發想一個音樂主題的頁面網站,記錄各樣的網頁撰寫方式, 接下來這一週要向 KKBOX 致敬,撰寫內容如下 navbar 導覽列 左邊 s...

鐵人賽 自我挑戰組 DAY 8
網頁學習紀錄 系列 第 8

技術 鐵人賽Day8-來寫一個 footer 吧!

終於來到第一個網頁的內容結尾,通常結尾會有一個表尾,我們俗稱 footer,用來做最後的資訊用,但我個人比較喜歡簡單的樣式,所以就來寫一簡單的 footer 吧...

鐵人賽 自我挑戰組 DAY 7
網頁學習紀錄 系列 第 7

技術 鐵人賽Day7-來嵌入 map 與 寫一個 form 吧!

今天在這個網頁內嵌入一個 map 跟寫一個 form, 左邊放入地圖,右邊放入註冊資訊,會如下方所示 HTML會長這樣 <section3>...

鐵人賽 自我挑戰組 DAY 6
網頁學習紀錄 系列 第 6

技術 鐵人賽Day6-寫一個 用 ul li 產生的 product 產品表吧!

一個網頁的產生,除了跟消費者介紹產品與提供資訊外,最重要的就是要提供下單服務啦!! 這次要寫的樣式如下 這次要用 ul li 的清單方式來寫一個產品下單的列表...

鐵人賽 自我挑戰組 DAY 5
網頁學習紀錄 系列 第 5

技術 鐵人賽Day5-寫一個 三欄式 ul li 吧!

一個音樂網頁主視覺下方會有一個最新的資訊,就讓我們來寫一個三欄式的主要資訊吧!! 預計要寫如下方所示: 首先 HTML 的程式碼如下 <sect...

鐵人賽 自我挑戰組 DAY 4
網頁學習紀錄 系列 第 4

技術 鐵人賽Day4- 來寫個 header 吧!

網站中最重要的主視覺大圖,大部分會落在 header 上,今天就來寫個 header 吧!! 預計會長這樣 HTML 的寫法很簡單,如下方 <div...

鐵人賽 自我挑戰組 DAY 3
網頁學習紀錄 系列 第 3

技術 鐵人賽Day3-寫一個 Search 搜尋列吧!

這次來練習寫一個 Search Bar,要寫的樣式如下 我習慣在最外層寫一個 .wrap,在繼續將裡面要完成的 HTML 先寫完 所以程式碼會如下, <...

鐵人賽 自我挑戰組 DAY 2
網頁學習紀錄 系列 第 2

技術 鐵人賽Day2-寫一個 Navbar 導覽列吧!

現在網頁為了 RWD ,在 layout 的 navbar 跟 footer 都會固定,而網頁最上方都會有一個 navbar,裡面會有 logo 還有一些選項,...

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

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

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

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

技術 SCSS - 基礎功能介紹

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

技術 scss 超入門實作

拜讀Alex前輩的scss教學,做個筆記。 建置專案 css資料夾是空的,scss資料夾裡面有個style.scss,也是空的。 index.html,bod...

鐵人賽 自我挑戰組 DAY 23

技術 Day23 學習 scss 時的那些大小事

分享與記錄個人使用 scss 時的那些 wow 點 在前端學習進度上,目前走到了 Javascipt,幾週前開啓 scss 時,感到有點陌生啊~~ 人的記憶不可...

鐵人賽 自我挑戰組 DAY 21

技術 [蛻變事實/D21] 設計師勇闖前端城-(懶得用腦:SASS 除法-寬度計算不用腦)

超級愛SASS的除法功能! 只要一個容器我想多切幾份,就可以切幾份給我~ 對於一個數學不好又很懶得打開手機 拿起計算機、點開計算器換算的懶人者 --->...

鐵人賽 自我挑戰組 DAY 13

技術 [蛻變事實/D13] 設計師勇闖前端城-( SASS & SCSS 的@import 是什麼?)

CSS 它有先後順序,後面會蓋掉前面! <link rel="stylesheet" href="style/style1....

徵才 【徵才】東森得易購 徵 React資深前端工程師(研發中心)

[團隊簡介] 前端團隊成員目前7人, 需補足8人。團隊採敏捷開發流程。 公司未來將發展跨境電商, 包括中國大陸, 東南亞, 日本, 韓國是我們的合作目標。 ht...

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

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