S判
@s88431ss
Wed, Nov 6, 2019 2:59 AM
51
1
memo
教學
CSS
RWD
打算開始學RWD切版，所以這串會集中丟一些我覺得不錯的觀念文或教學資源
S判
@s88431ss
Wed, Nov 6, 2019 3:01 AM
CSS RWD 切版技巧總覽
觀念釐清文，告訴你CSS常用的切版邏輯跟技巧有哪些大類別。
▶最早期使用 HTML 表格做排版（不支援RWD切版，不討論）
▶CSS Float 排版 since 2000
▶CSS Inline-Block 排版 since 2008
▶CSS Flex 排版 since 2012
▶CSS Grid 排版 since 2017
S判
@s88431ss
Wed, Nov 6, 2019 3:02 AM
我一開始學的是inline-block，後面又學了flexbox系列，Grid是完全沒碰過
是個癡漢大叔
@momofarm
Wed, Nov 6, 2019 3:03 AM
只會用web site builder....css不想學....XD
S判
@s88431ss
Wed, Nov 6, 2019 3:03 AM
CSS 顯示模式 - 非懂不可
這邊解釋了inline-block相關的CSS
S判
@s88431ss
Wed, Nov 6, 2019 3:03 AM
是個癡漢大叔
: 什麼wwwwwwww
S判
@s88431ss
Wed, Nov 6, 2019 3:04 AM
我覺得CSS很好用！！！！
是個癡漢大叔
@momofarm
Wed, Nov 6, 2019 3:04 AM
website builder解決90%的問題.....ex: wordpress / wix
S判
@s88431ss
Wed, Nov 6, 2019 3:05 AM
不過CSS的使用邏輯真的很..............
PhotoShop。
對，所有的操作元素根本就和Adobe系列的繪圖軟體一模一樣。
S判
@s88431ss
Wed, Nov 6, 2019 3:05 AM
幹wwwwwwwww直接用wordpresswwwwwwwww
ＹＫ
@YKK69
Wed, Nov 6, 2019 3:05 AM
Grid 各瀏覽器的支援度還不夠高，可以先緩個一兩年再來研究
flex 推出好幾年後才普及
S判
@s88431ss
Wed, Nov 6, 2019 3:06 AM
ＹＫ
: 喔喔，仔細想想太新的資源根本很多瀏覽器都不支援
是個癡漢大叔
@momofarm
Wed, Nov 6, 2019 3:07 AM
台灣業主要求太多, 給他wordpress自己去搞自己不是很好嗎？ （哼）
ＹＫ
@YKK69
Wed, Nov 6, 2019 3:07 AM
CSS 跟 wordpress 無相關，想成為前端還是要把 CSS 學好
S判
@s88431ss
Wed, Nov 6, 2019 3:07 AM
大笑wwwwwwwwwww
S判
@s88431ss
Wed, Nov 6, 2019 3:10 AM
如何選擇RWD切版框架 - Bootstrap vs Foundation vs Skeleton? |...
【CSS RWD三大框架】
Skeleton
就像官方網站上宣傳的重點一樣—「簡易」，特別是在響應式設計方面，它提供的HTML網頁布局非常不錯，但並沒有豐富的CSS3，而且提供的模板數量也有限。雖然布局很乾淨，但你仍舊需要花費大量時間來開發。除了上述缺點，它一次只能提供一個演示案例，也讓開發人員感到不方便。
S判
@s88431ss
Wed, Nov 6, 2019 3:10 AM
Foundation
比起Skeleton，Foundation就顯得非常棒了，在下載開發程式時，Foundation提供了四種選擇”namely complete, essential, custom“，確保開發人員能找到適合他們需求的代碼，它也提供許多現成的代碼，以及豐富的資源和模板。
Foundation的功能非常多元又簡單，對於初學者來說，它是一個非常好的RWD設計工具，使用Foundation能縮短開發網站需要的時間，在設計上，Foundation通常採用“移動設備優先”的方式輔助設計。
S判
@s88431ss
Wed, Nov 6, 2019 3:10 AM
Bootstrap
這應該是大家最常聽到的CSS開發框架了，對許多開發人員來說，它是最優秀的RWD框架。與Foundation相比，它的代碼非常簡單、整潔，在優化方面更輕鬆快速。你能客製化各式各樣的模板，豐富的編寫方式是它遙遙領先其他開發工具的原因。
Bootstrap使用率會居高不下的原因，不單單只是它提供了多元豐富的設計。Bootstrap在讀取速度上也是遙遙領先其他框架，因此在所有專業的開發人員眼中，Bootstrap都是開發框架的不二首選。
S判
@s88431ss
Wed, Nov 6, 2019 3:11 AM
是不是該直接挑Bootstrap入門
ＹＫ
@YKK69
Wed, Nov 6, 2019 3:11 AM
Bootstrap可以～很多後端也會用這套，溝通上比較無障礙
S判
@s88431ss
Wed, Nov 6, 2019 3:12 AM
分類：CSS 前端框架 | 網頁設計資源彙整 - Web Design Resources
S判
@s88431ss
Wed, Nov 6, 2019 3:12 AM
喔喔那我就直接學Bootstrap好了，通用性高的比較好
S判
@s88431ss
Wed, Nov 6, 2019 3:27 AM
Wed, Nov 6, 2019 3:32 AM
jQuery是什麼，它跟JavaScript有什麼關係？它又有什麼能耐呢？
jquery
Bootstrap
要用Bootstrap一定要搭配Jquery
S判
@s88431ss
Wed, Nov 6, 2019 3:30 AM
jQuery
jquery官網
S判
@s88431ss
Wed, Nov 6, 2019 3:43 AM
Wed, Nov 6, 2019 3:45 AM
Bootstrap教學《Bootstrap網設必備》打造Responsive Web Design自適應...
包含下載與使用的初階入門教學
ＹＫ
@YKK69
Wed, Nov 6, 2019 3:47 AM
啊對了，看文章要注意 Bootstrap 的版本，你現在用的好像是5，跟以前的版本用法差有點多（好像比較複雜），但也可以多看看
很多工程師不會跟新版本跟得很勤，怕新版本容易有 Bug 或是已在跑的專案使用舊版本好好的就不太會更新（更新版本可能會需要花很多時間調整，不符合成本
S判
@s88431ss
Wed, Nov 6, 2019 3:48 AM
Wed, Nov 6, 2019 3:49 AM
使用 Bootstrap 建立一個 RWD Template（Twitter Bootstrap in ...
CSS3 Media Query
RWD 中最重要的就是 Media Query，它讓版面在不同解析度下能有不同的呈現。例如：依據不同寬度做不同的調整。
S判
@s88431ss
Wed, Nov 6, 2019 3:48 AM
ＹＫ
:
好
S判
@s88431ss
Wed, Nov 6, 2019 3:51 AM
先休息一下好了，用腦好容易餓
痛哭貼布(･ω･)今哭棒
@Crya
Wed, Nov 6, 2019 4:51 AM
做網頁不學css是什麼邏輯
S判
@s88431ss
Wed, Nov 6, 2019 2:21 PM
Wed, Nov 6, 2019 2:21 PM
==============================
使用 Bootstrap 建立一個 RWD Template（Twitter Bootstrap in ...
Bootstrap教學
這兩個還沒完全看完，先mark起來
現在懂了一點RWD基礎概念也知道怎麼用bootstrap分割不同螢幕大小的整體版面了，不過比較細微的調整感覺需要很大量的時間學習........先回去切三個一般網頁的版好了，等熟練了再來練RWD
痛哭貼布(･ω･)今哭棒
@Crya
Fri, Nov 8, 2019 9:55 AM
話說，手刻的話行動版使用inline-block在目前的兼容性最好，遇過幾次用flex客戶手機跑版的情況，可惡的手機
ＹＫ
@YKK69
Fri, Nov 8, 2019 9:58 AM
痛哭貼布(･ω･)今哭棒
: 有加上兼容寫法嗎？ 我們手機支援到 Andoird 4.4 好像都還沒問題
display: -webkit-box;
display: -ms-flexbox;
display: flex;
痛哭貼布(･ω･)今哭棒
@Crya
Fri, Nov 8, 2019 10:01 AM
ＹＫ
: 那時候沒有用 下次試試
墨閉關不能出門中
@bibo1409200
說
Tue, Nov 12, 2019 4:06 AM
覺得S判大大好厲害阿
前端死翹翹
S判
@s88431ss
Tue, Nov 12, 2019 4:27 AM
墨閉關不能出門中
: 我覺得我還遠遠沒有到前端的程度
現在是會架RWD網站了，不過json框架還是光看就頭痛（直接先跳過jquery跟json框架合併的單元了）
我覺得先把頭比較不痛的東西摸熟比較好
所以框架暫時不想念了，以後其他東西熟練了再回頭學框架
S判
@s88431ss
Tue, Nov 12, 2019 4:31 AM
ＹＫ
: 我hahow課程現在到bootstrap了，老師的版本好像是3，我現在用的是4，超多css class名稱都不一樣了，整個查對照查到眼神死
還是有找到bootstrap4的解說文就是了，幸好很多前端都會自己架網頁做筆記，一篇看不懂or版本不對就多找幾篇
S判
@s88431ss
Tue, Nov 12, 2019 4:32 AM
Codepen內建的bootstrap是4.1.3的版本，我就跟著用了
S判
@s88431ss
Tue, Nov 12, 2019 4:35 AM
痛哭貼布(･ω･)今哭棒
: 其實也可以用bootstrap的網格切好版再自己手刻，他預設也是用flex排版，可是不會有跑版的問題
S判
@s88431ss
Tue, Nov 12, 2019 4:37 AM
我覺得用bootstrap為基礎規劃整體頁面很方便，元件那些太死板太制式化也可以先套用元件框架，再自己客製化改變外觀
墨閉關不能出門中
@bibo1409200
Tue, Nov 12, 2019 4:41 AM
S判
: json跟jQ的話感覺是在寫aja
不知道什麼是Json 框架的人
)
覺得CSS特別的難學，特別是切版跟移動元素，例如昨天我想把input跟btn放在inline上就搞好久喔！(眼神死
S判
@s88431ss
Tue, Nov 12, 2019 4:41 AM
墨閉關不能出門中
: css剛開始真的很痛苦www
建議先搞懂display跟position各種類型的功能，display是排版用，position是網頁定位用
S判
@s88431ss
Tue, Nov 12, 2019 4:44 AM
墨閉關不能出門中
: 如果是手刻的，CSS裡面加上「vertical-align: top」可以讓所有圖形元件從最頂端一起對齊，想要其他的對齊效果可以google「vertical-align」
S判
@s88431ss
Tue, Nov 12, 2019 4:45 AM
我之前手刻也是一直跑版弄到腦羞，後來發現加個vertical-align就瞬間整個版面都很好調整了整個世界震驚
墨閉關不能出門中
@bibo1409200
Tue, Nov 12, 2019 4:46 AM
S判太太很抱歉，一直打錯字所以重複留言又刪除的，希望不會讓太太困擾
對不起!!
S判
@s88431ss
Tue, Nov 12, 2019 4:46 AM
沒關係www
墨閉關不能出門中
@bibo1409200
說
Wed, Nov 13, 2019 9:47 AM
因為想學一點排版,結果有找到學Grid的遊戲學習網站,大大可以稍微看看
Grid Garden
S判
@s88431ss
Wed, Nov 13, 2019 9:47 AM
墨閉關不能出門中
: 哇靠遊戲wwwwwwwww謝謝！！！感覺很有趣，晚上來玩玩看
ＹＫ
@YKK69
Wed, Nov 13, 2019 10:00 AM
flex 也有，同系列的XD
Flexbox Froggy
S判
@s88431ss
Wed, Nov 13, 2019 2:43 PM
ＹＫ
: flex過關了！！！好玩wwww
但是我覺得實際排版的時候我應該用不出來(幹
S判
@s88431ss
Thu, Nov 14, 2019 2:20 AM
Grid也過關了
載入新的回覆
打算開始學RWD切版，所以這串會集中丟一些我覺得不錯的觀念文或教學資源
▶最早期使用 HTML 表格做排版（不支援RWD切版，不討論）
▶CSS Float 排版 since 2000
▶CSS Inline-Block 排版 since 2008
▶CSS Flex 排版 since 2012
▶CSS Grid 排版 since 2017
只會用web site builder....css不想學....XDPhotoShop。
對，所有的操作元素根本就和Adobe系列的繪圖軟體一模一樣。
flex 推出好幾年後才普及
【CSS RWD三大框架】
Skeleton
就像官方網站上宣傳的重點一樣—「簡易」，特別是在響應式設計方面，它提供的HTML網頁布局非常不錯，但並沒有豐富的CSS3，而且提供的模板數量也有限。雖然布局很乾淨，但你仍舊需要花費大量時間來開發。除了上述缺點，它一次只能提供一個演示案例，也讓開發人員感到不方便。
比起Skeleton，Foundation就顯得非常棒了，在下載開發程式時，Foundation提供了四種選擇”namely complete, essential, custom“，確保開發人員能找到適合他們需求的代碼，它也提供許多現成的代碼，以及豐富的資源和模板。
Foundation的功能非常多元又簡單，對於初學者來說，它是一個非常好的RWD設計工具，使用Foundation能縮短開發網站需要的時間，在設計上，Foundation通常採用“移動設備優先”的方式輔助設計。
這應該是大家最常聽到的CSS開發框架了，對許多開發人員來說，它是最優秀的RWD框架。與Foundation相比，它的代碼非常簡單、整潔，在優化方面更輕鬆快速。你能客製化各式各樣的模板，豐富的編寫方式是它遙遙領先其他開發工具的原因。
Bootstrap使用率會居高不下的原因，不單單只是它提供了多元豐富的設計。Bootstrap在讀取速度上也是遙遙領先其他框架，因此在所有專業的開發人員眼中，Bootstrap都是開發框架的不二首選。
要用Bootstrap一定要搭配Jquery
jquery官網
包含下載與使用的初階入門教學
很多工程師不會跟新版本跟得很勤，怕新版本容易有 Bug 或是已在跑的專案使用舊版本好好的就不太會更新（更新版本可能會需要花很多時間調整，不符合成本
CSS3 Media Query
RWD 中最重要的就是 Media Query，它讓版面在不同解析度下能有不同的呈現。例如：依據不同寬度做不同的調整。
這兩個還沒完全看完，先mark起來
現在懂了一點RWD基礎概念也知道怎麼用bootstrap分割不同螢幕大小的整體版面了，不過比較細微的調整感覺需要很大量的時間學習........先回去切三個一般網頁的版好了，等熟練了再來練RWD
display: -webkit-box;
display: -ms-flexbox;
display: flex;
我覺得先把頭比較不痛的東西摸熟比較好
還是有找到bootstrap4的解說文就是了，幸好很多前端都會自己架網頁做筆記，一篇看不懂or版本不對就多找幾篇
覺得CSS特別的難學，特別是切版跟移動元素，例如昨天我想把input跟btn放在inline上就搞好久喔！(眼神死
建議先搞懂display跟position各種類型的功能，display是排版用，position是網頁定位用
但是我覺得實際排版的時候我應該用不出來(幹Grid也過關了