整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
題切換是一種常見的需求，它可以讓用戶根據自己的喜好和環境選擇適合的界面風格。
1、主題切換的意義及應用場景
在現代化的網站中，不同的主題樣式，能夠給用戶帶來不同的視覺感受和交互體驗。例如，在夜間模式下，減少亮度可以保護用戶的眼睛，提高使用效果。因此，實現一個主題切換功能對于改善用戶體驗至關重要。
2、常見的主題切換實現方式
實現主題切換功能有多種方法，主要包括通過CSS樣式切換、JavaScript腳本切換和數據庫讀取配置文件切換等。
1、創建基本的HTML結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Theme Switcher</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 頁面內容 -->
<h1>網頁主題切換功能演示</h1>
<p>請選擇喜歡的主題：</p>
<button id="lightTheme">白天模式</button>
<button id="darkTheme">夜間模式</button>
<script src="script.js"></script>
</body>
</html>
2、引入必要的CSS和JavaScript文件
為了實現主題切換功能，我們需要在HTML文件中，引入相關的CSS和JavaScript文件。創建一個style.css文件和script.js文件，并將其鏈接到index.html中。
1、使用CSS變量定義主題色彩
在style.css文件中，定義一些全局的CSS變量來表示不同的主題色彩。例如，可以定義--primary-color作為主題的主色調。
<style type="text/css">
:root {
--primary-color: #007bff;
}
.light-mode {
--primary-color: #007bff;
--background-color: #ffffff;
--text-color: #000000;
}
.dark-mode {
--primary-color: #dd403a;
--background-color: #333333;
--text-color: #ffffff;
}
button {
background-color: var(--primary-color);
color: var(--text-color);
}
</style>2、利用媒體查詢和@media規則設置不同的主題樣式
<style type="text/css">
@media (prefers-color-scheme: dark) {
/* 當系統設置為暗色模式時顯示夜間模式 */
body {
background-color: var(--background-color);
color: var(--text-color);
}
}
@media (prefers-color-scheme: light) {
/* 當系統設置為亮色模式時顯示白天模式 */
body {
background-color: var(--background-color);
color: var(--text-color);
}
}
</style>3、通過JavaScript來改變CSS變量的值
在script.js文件中，使用JavaScript來控制主題的切換。通過訪問DOM元素的style屬性，修改CSS變量的值，從而改變主題。
const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');
lightModeButton.addEventListener('click', ()=> {
document.documentElement.classList.add('light-mode');
document.documentElement.classList.remove('dark-mode');
});
darkModeButton.addEventListener('click', ()=> {
document.documentElement.classList.add('dark-mode');
document.documentElement.classList.remove('light-mode');
});1、方式1：使用JavaScript修改DOM元素的類名
const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');
lightModeButton.addEventListener('click', ()=> {
document.body.className='light-mode';
});
darkModeButton.addEventListener('click', ()=> {
document.body.className='dark-mode';
});2、方式2：利用JavaScript動態生成style標簽并插入到HTML中
const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');
lightModeButton.addEventListener('click', ()=> {
const style=document.createElement('style');
style.innerHTML=`
body {
--primary-color: #007bff;
--background-color: #ffffff;
--text-color: #000000;
}
`;
document.head.appendChild(style);
});
darkModeButton.addEventListener('click', ()=> {
const style=document.createElement('style');
style.innerHTML=`
body {
--primary-color: #dd403a;
--background-color: #333333;
--text-color: #ffffff;
}
`;
document.head.appendChild(style);
});3、方式3：通過AJAX請求加載不同的CSS文件
const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');
lightModeButton.addEventListener('click', ()=> {
loadCSS('light-theme.css');
});
darkModeButton.addEventListener('click', ()=> {
loadCSS('dark-theme.css');
});
function loadCSS(filename) {
const link=document.createElement('link');
link.href=filename;
link.rel='stylesheet';
document.head.appendChild(link);
}希望本文能夠對您有所幫助，感謝您的閱讀！
人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。
圖1
圖2
圖3
高興鐵鐵們能來看html網頁設計第二期~~~~撒花~~~~~
哎呀呀~實在是抱歉備注標簽我記錯了QAQ
<!--內容打這里-->這個才是備注標簽不是//
首先我們先來學習上節課留下的劇透，分別是:
有人就說了標題標簽上次劇透不就只有h1標簽嗎?
嘿嘿，其實他還有兄弟姐妹啦~
看圖，代碼是從上往下從左往右執行的請記住這個順序哦~
還有,左邊是代碼右邊是網頁上面的效果哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
<body>
<!--標題標簽是h1~h6-->
<h1>1</h1><!--最大-->
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6><!--最小-->
</body>
</html>
如圖所示，h1標簽是最大的，h6標簽是最小的
是不是很簡單呀,現在已經學會了一個知識點了哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千萬要記住內容是寫在標簽里面的哦~-->
<!--段落標簽是獨占一條的哦-->
<p>第一條p標簽</p>
<p>第二條p標簽</p>
<p>第三條p標簽</p>
</body>
</html>
鏈接標簽是什么?顧名思義就是一個鏈接看代碼：
<a href="https://www.baidu.com">百度</a>
href是什么東西啊？是a標簽的屬性啦~里面用來輸入你需要跳轉到的網頁的鏈接
屬性里面的東西是不會出現在網頁上面的出現的只有在a標簽里面的內容哦
當我點擊百度這兩個字后就給我跳轉到了我們href屬性里面的https://www.baidu.com
當然我們也可以跳轉到我們自己制作的網頁上面但要求是同一個項目下面的網頁
是不是很有趣~
看視頻:
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
視頻中我們點擊鏈接后就跳轉到了山這個網頁出現了一張山的圖片，是不是有點小意思~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="new_file3.html">跳轉到山的網頁</a><!--只有同一個項目下面的網頁才能相互跳轉-->
</body>
</html>
圖像標簽標簽如其意，就是用來上傳圖像的一個標簽~~
我們這里介紹一下img的兩個屬性:
<img src="img/OIP-C.jpg" alt="山"/>
src就是用來放圖片的地址的，他會根據地址去找圖片然后把圖片放到網頁上面。
alt有什么用啊就是當圖片顯示失敗的時候就會顯示alt里面的文字
看視頻:
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
我們把圖片的地址破壞后，就會顯示一個圖片錯誤的圖標和alt里面的內容
怎么拖圖片到img文件下，老師~~~我不知道
看視頻
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
嘿嘿就直接把文件拖進來就ok了是不是很簡單~
okk，好快啊怎么一下就學完了今天的知識點~~~
嘻嘻今天可是有作業的~
請根據下面的網頁仿寫一下:
完成后作業發再評論區哦，有什么不懂的可以留言包回答的。
加油呀，每天學一點爭取做出屬于自己的一個網頁~
上一期
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
