iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
自我挑戰組

向CSScoke重新學習CSS 系列

大家好,我是洋蔥,第一次參加鐵人賽,這次是抱著把CSS練好的心態來向CSScoke學習,因此主要內容是在實踐看完CSScoke金魚都能懂的網頁教學後做的一些練習及一些心得

鐵人鍊成 | 共 30 篇文章 | 8 人訂閱 訂閱系列文 RSS系列文
DAY 11

第十一天:Animation 和 transition 網頁動畫

觀看金魚都能懂的網頁設計入門:18、19 在網頁上若要呈現動畫,可儘量使用css語法做設計,能不用到javascript就不用,這樣可以降低其網路加載速度...

2020-09-25 ‧ 由 洋蔥 分享
DAY 12

第十二天:RWD是什麼呢?

觀看金魚都能懂的網頁設計入門:21、22 RWD是什麼呢? https://www.w3schools.com/cssref/css3_pr_mediaquer...

2020-09-26 ‧ 由 洋蔥 分享
DAY 13

第十三天:客製化Navbar選單

觀看金魚都能懂網頁設計入門 23https://codepen.io/mikeyam/pen/ZEWPgGg?editors=1100 客製化選單 在開始製作...

2020-09-27 ‧ 由 洋蔥 分享
DAY 14

第十四天:bootstrap基本應用

觀看金魚都能懂的網頁設計入門:24、25 目前全球最多人使用的 UI 框架(framework)就是Bootstrap,他可以幫我們快速建構出一個RWD的網頁...

2020-09-28 ‧ 由 洋蔥 分享
DAY 15

第十五天:基礎 JQuery 讓畫面動一動

觀看金魚都能懂的網頁設計入門:26-30 下載 JQuery https://jquery.com/download/到官網去下載區,找到 中文翻譯 (下載壓...

2020-09-29 ‧ 由 洋蔥 分享
DAY 16

第十六天:圖文滿版和互動圖文

金魚都能懂的網頁切版:1、2 圖文滿版 https://codepen.io/mikeyam/pen/JjXqMjP?editors=1100 背景部分高度...

2020-09-30 ‧ 由 洋蔥 分享
DAY 17

第十七天:人員卡片和交錯漂浮版

金魚都能懂的網頁切版:3、4 人員卡片 https://codepen.io/mikeyam/pen/qBZzRvG 在body設定flex,讓整個版面水平...

2020-10-01 ‧ 由 洋蔥 分享
DAY 18

第十八天:橫式版面和基礎原理

金魚都能懂的網頁切版:5 橫式版面 https://codepen.io/mikeyam/pen/JjXQwjV首先,一樣在外層設定寬高,並使用flex 特性做...

2020-10-02 ‧ 由 洋蔥 分享
DAY 19

第十九天:頁尾區塊 和 導覽列

金魚都能懂的網頁切版:6、7 頁尾區塊 https://codepen.io/mikeyam/pen/KKzOgNQ?editors=1100 外層 cont...

2020-10-03 ‧ 由 洋蔥 分享
DAY 20

第二十天:美式導覽列 和 麵包屑

金魚都能懂的網頁切版:8、9 導覽列 logo放置正中間位置 https://codepen.io/mikeyam/pen/mdPNOwX 在外層用flex特...

2020-10-04 ‧ 由 洋蔥 分享