RWD 與 Bootstrap 入門
負責人：王婕瑜授課時間：2020-04-09 (四) RWD 基本概念 全名為：Responsive web design，響應式設計 主要目的是使網頁在各種尺寸的裝置上，可以呈現合適比例的原則。讓內容跟水一樣，在不同的容器（裝置）中流動，顯示最適合的模樣圖片來源 舉個例子，在這個網站裡，隨著螢幕寬度變小，它的 header 變為漢堡選單，文字自動換行，中央區塊的內容從橫向排列變為縱向排列，我們就可以說這個網站符合 RWD 的設計原則。要做到這樣的效果，需要 CSS 提供的 Media Queries 功能和 viewport 的設定。 總結 RWD 設計的特點： 彈性的圖片（依照螢幕大小比例伸縮） 流動的區塊（文字隨著螢幕大小換行） 多種版面（不同尺寸的裝置相對應的呈現方式） 為什麼要用 RWD..
更多CSS 定位大全- float 與 position
float 常見區塊(block)元素標籤：div、ul li、p、h1 元素寬度預設會撐到最大，使其占滿整個容器 可以設定長寬/margin/padding，但仍會占滿一整行 常見行內(inline)元素標籤：span、a、input、img 元素可在同一行內呈現，圖片或文字均不換行，也不會影響其版面配置 不可設定長寬，元素的寬高由它的內容撐開 display: inline-block; inline 屬性但可以設定寬高、margin、padding 文繞圖效果（block 變成 inline） float: 浮動方向; clear: both;清除浮動 left（靠左浮動） right（靠右浮動） none（預設值，也就是不浮動） inherit（繼承自父層的屬..
更多CSS 選擇器
同輩 Syntax Mean Selector A, B A 跟 B h1, h2 A + B 緊接 A 後面的 B h1 + p A ~ B A 後面的所有 B h1 ~ p 父子 Syntax Mean Selector A a A 裡的所有 a(含子層/子子層…) p span A > a A 下一子層裡的 a(不含子子層) article>h2 偽類 如果同時定義<a>的四種偽類，一般狀況應依此順序指定a:link→a:visited→a:hover→a:active，不然會有樣式覆蓋的問題（除非特殊設計考量） Syntax Mean Selector :hover 游標移到時 a:hover :active..
更多