Lala Code

Day6-屬性選擇器-尋找標籤中的屬性

發表於 2024-10-15 分類於 CSS Disqus：

屬性選擇器（Attribute Selectors）用於選中符合屬性值條件的 HTML 元素，HTML 元素上會有一些屬性，例如 <a> 標籤有 title 屬性，我們就可以針對有 title 屬性的 <a> 元素來進行樣式設置。

閱讀全文 »

Day5-ID 選擇器-僅此一家，別無分號

發表於 2024-10-14 分類於 CSS Disqus：

ID 選擇器（ID Selectors）是根據元素上的 id 屬性值作為判斷依據，大小寫需相符。

id 其實就是「身分 Identity」的縮寫，同一個 id 只能在頁面中出現一次，這就像我們每個人的身分證字號，都是唯一的。

閱讀全文 »

Day4-類選擇器-前端切版最常使用的選擇器，精準鎖定

發表於 2024-10-12 更新於 2024-10-14 分類於 CSS Disqus：

上一篇有講到，元素選擇器沒辦法讓相同的標籤進行不同的樣式，這時候就要靠類選擇器啦~！

類選擇器（Class Selectors）是前端切版最常使用到的選擇器，根據 HTML 元素的 class 屬性值來選擇特定的元素，其中 class 就有「類別」的含義。

閱讀全文 »

Day3-元素選擇器-誰說標籤只是標籤

發表於 2024-10-11 分類於 CSS Disqus：

元素選擇器（Type Selectors）也可以稱作「標籤選擇器」。我們可以在 HTML 文件中，選擇任何的 HTML 元素，並對選中的標籤元素來處理樣式。不過，由於 <head> 部分的標籤（如 <meta>, <title> 等）不會顯示在網頁的可見區域，因此對這些標籤的樣式設置不會產生效果。

閱讀全文 »

Day2-通用選擇器-小朋友才做選擇，我全都要

發表於 2024-10-10 分類於 CSS Disqus：

通用選擇器（Universal Selector）也稱為「通配選擇器」或「全體選擇器」，這些名稱指的都是同一個概念。
通用選擇器可以使用 * 符號來選取所有元素，這在你需要對所有元素應用相同樣式時特別有用。

閱讀全文 »

Day1-什麼是CSS選擇器? CSS選擇器如何應用

發表於 2024-10-08 更新於 2024-10-15 分類於 CSS Disqus：

一個完整的網站由 HTML、CSS 和 JavaScript 三者協同運作，各司其職，缺一不可。HTML 負責網站的結構，CSS 負責視覺美感，而 JavaScript 則處理動作與使用者互動。

閱讀全文 »

如何用CSS控制移動端可視區域？使用lvh, svh, dvh單位優化網站

發表於 2024-07-17 更新於 2024-07-21 分類於 CSS Disqus：

最近做專案時，設計師希望行動版第一區塊可以滿版呈現，而當下第一個念頭就是用 vh 來做，但實際在手機看時發現，不管是 Chrome 或 Safari 瀏覽器，底下的 UI 工具列都會擋到內容，沒辦法完整呈現 🤔

閱讀全文 »

用 CSS 打造酷炫的變形蟲效果-CSS教學

發表於 2024-07-11 更新於 2024-07-21 分類於 CSS Disqus：

在做專案時，設計稿上有個圓形，設計師希望呈現出不規則橢圓的動畫效果，我把它稱之為變形蟲效果😆
就像上圖所呈現的，動畫效果持續為不規則橢圓，並且會漸漸的變色

如何做到的呢？這其實不難～跟著我一起往下做吧！

閱讀全文 »

Google Publisher Tag 教學-顯示廣告版位程式碼

發表於 2024-06-04 分類於 Google Disqus：

Google Publisher Tag 是一種 JavaScript 標籤庫，簡稱為 GPT (跟 ChatGPT 沒關係嘿~XD)，用於在網頁上展示廣告並管理廣告投放。GPT 是 Google Ad Manager 平台的重要組成部分，它提供了強大且靈活的功能，幫助網站管理者優化廣告展示，提高廣告收入

本篇文章將會介紹如何操作 Google Publisher Tag，在網站成功顯示廣告~👍

閱讀全文 »

clip-path製作box-shadow陰影無效!?你應該這樣做!

發表於 2024-04-09 分類於 CSS Disqus：

在製作專案時，遇到了不規則形狀的 tag，我使用了 clip-path 來達成不規則形狀的效果

閱讀全文 »