樂遊前端趣

前端與生活紀錄

0%

發表於 更新於 分類於

學習資源

程式遊戲

發表於 更新於

背景

.box {
  /* background-color 背景顏色 */
  background-color: #faa;

  /* background-image 背景圖片 */
  background-image: url('https://picsum.photos/100/100/?random=1');

  /* background-repeat 背景重複 */
  /* repeat-x、repeat-y、no-repeat */
  background-repeat: repeat;

  /* background-position 背景定位 */
  /* 可使用數值、百分比、left、right、center、top、bottom 關鍵字 */
  background-position: 50% 50%;

  /* background-size 背景尺寸 */
  /* contain、cover、數值、百分比 */
  background-size: cover;

  /* 當背景設定為 background-attachment:fixed; `原始圖片的放置位置是以視埠為基準`，
  也就是會以視埠左上角開始平舖，而不是從個別元素的區塊開始平鋪。 */
  background-attachment: fixed;

  /* 縮寫 */
  background: #ffa url('https://picsum.photos/100/100/?random=1') repeat center center/cover;
}
閱讀全文 »

發表於 更新於

字型

CSS 常用的字型設定：

p {
  /* 設定字型家族 */
  font-family: 'Microsoft JhengHei', Verdana, Geneva, Tahoma, sans-serif;
  /* 設定字體大小 px、em、rem */
  font-size: 20px;
  /* 設定斜體 */
  font-style: italic;
  /* 設定粗體 */
  font-weight: bold;
  /* 設定字體都變成大寫，但第一個字較大 */
  font-variant: small-caps;
}
閱讀全文 »

發表於 更新於

角色

在網頁裡，每項技術都扮演了重要的角色

HTML、CSS、JavaScript 為前端學習必修技術，若以蓋房子來比喻，各有自己負責的工作：

  • HTML（結構、內容）：蓋房子需要的基礎建材，鋼筋、水泥、門、窗等等。
  • CSS（樣式、外觀）：房子有了 HTML 骨架後，CSS 如同裝潢設計師，可以打造漂亮好看的房子。
  • JavaScript（事件、行為）：觸發事件的互動效果，如同房子內部設施開關所觸發後產生的能源。
閱讀全文 »

發表於 更新於

選擇器

HTML 負責結構，CSS 則是外觀，它是 HTML 元素的化妝師，負責文件的版型外觀、位置、尺寸、顏色、字體，以及響應式等等。「選擇器」，它是 CSS 世界裡的支柱，就如同人類的脊椎支撐了整個身體，我們必須要選擇到目標，才能對元素進行樣式的設計。然而，CSS 選擇器擁有非常多樣貌，認識各種選擇器才能夠靈活設計樣式。值得一提的是只要符合 CSS 規範的選擇器，在 jQuery 裡，能成為$()加工廠的原料，產生出 jQuery 物件，選擇到匹配的元素集合，同時也能被 JavaScript 的 querySelector()與 querySelectorAll()方法所選擇（與 jQuery 在選擇元素同樣的功能）。

語法

「選擇器」決定所選擇的元素目標，它連結著大括號「{}」，大括號裡面是屬性、屬性值，以冒號「:」分隔屬性與屬性值，屬性值後面以分號「;」結尾。

選擇器 {
  屬性: 屬性值;
}
閱讀全文 »

發表於 更新於

Git 介紹

Git 是一種版本控制系統（Version Control System），可以紀錄開發時各階段版本的檔案目錄結構（新增、修改、刪除內容的變化），可以隨時切換到過去某個版本時候的專案狀態，它很像 RPG 角色扮演遊戲的紀錄檔，在前進未知能力 BOSS 或關卡前，習慣會先記錄一下，全滅後還可以回到紀錄時的狀態重新挑戰。Git 是分散式的版控系統（Distributed Version Control），好處是即使沒有網路，也可以在本機電腦使用，等到有網路時在進行同步操作。

閱讀全文 »