HTML.CSS學習筆記02
更新於 發佈於 閱讀時間約 2 分鐘
01-圖片size寫法
background-size: 12px ;
當給一個數值的時候，另一個設定為auto
參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
02-圖片切換-方法1:
css:
.a123 a {
background: url("123.png");/*預設顯示圖片*/
display: block;
}
.a123 a:hover {
background: url("123.png");
}
html:
<div class="a123"><a href="#"></a></div>
這樣就可以切換囉
參考來源:https://haoyue66.blogspot.com/2014/08/css.html
03-圖片切換-方法2
感恩TINA大大告訴我，不用a 用div也可以使用 :hover
參考如上，直接把內容div刪除
css:
.a123 {
background: url("123.png")
}
.a123:hover {
background: url("123.png");
}
html:
<div class="a123"></div>
同理a:link, a:visited, a:hover, a:active都可以直接使用在div上
04-div可點擊連結事件
可點擊方式1-為a 超連記href
<a href="http://www.google.com" target="_blank" title="google"></a>
方式2-onclick事件
<div class="main-1" onclick="location.href='index.html';">
方式3-js寫入
我還不會QQ 等會了補充過來
可點擊方式1-為a 超連記href
<a href="http://www.google.com" target="_blank" title="google"></a>
方式2-onclick事件
<div class="main-1" onclick="location.href='index.html';">
方式3-js寫入
我還不會QQ 等會了補充過來
0會員
6內容數
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子，提供了對於 border、outline、border-radius等屬性的調整方式，並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流，一起學習成長。
JavaScript30 傳送門：https://javascript30.com/
透過 JS 控制 CSS 變數
今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。
以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
前言
那麼今天要來教大家，如何實現各種排版，以及不同的 CSS 可以做出怎樣的效果。
整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。
字體相關
color
設定文字的顏色。
<p style="color: blue;">這是藍色文字。</
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
前言
終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。
但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。
連結分類
首先，我們在連結 CSS 的方法中，有分為三種：
內聯連結
在 .html 當中，任一標籤的裡面，用屬性 s
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子，提供了對於 border、outline、border-radius等屬性的調整方式，並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流，一起學習成長。
JavaScript30 傳送門：https://javascript30.com/
透過 JS 控制 CSS 變數
今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。
以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
前言
那麼今天要來教大家，如何實現各種排版，以及不同的 CSS 可以做出怎樣的效果。
整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。
字體相關
color
設定文字的顏色。
<p style="color: blue;">這是藍色文字。</
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
前言
終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。
但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。
連結分類
首先，我們在連結 CSS 的方法中，有分為三種：
內聯連結
在 .html 當中，任一標籤的裡面，用屬性 s
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。