時間：2023-10-02 09:24:01 | 來源：網(wǎng)站運營
時間：2023-10-02 09:24:01 來源：網(wǎng)站運營
HTML / CSS / JS 編程入門 —— 制作可切換主題的簡單網(wǎng)頁：
在線咨詢
<!--- 關(guān)聯(lián) CSS 文件的代碼 ---> <link type="text/css" rel="stylesheet" href="css/style.css"/> <!--- 關(guān)聯(lián) JS 文件的代碼 ---> <script type="text/javascript" src="js/script.js"></script> 在正式開始網(wǎng)頁的編程之前，我們也可以先調(diào)整 <head> 標(biāo)簽中的頁面信息，同時確保 CSS 和 JS 文件正確關(guān)聯(lián)。 <head> <meta charset="UTF-8"> <title>Lightly 網(wǎng)頁制作</title> <!--- 這里可以修改頁面標(biāo)題 ---> <link type="text/css" rel="stylesheet" href="css/style.css"/> <script type="text/javascript" src="js/script.js"></script> </head> 添加網(wǎng)頁內(nèi)容 <body> <!--- 這里的內(nèi)容是評論，不會顯示在網(wǎng)頁中 ---> <!--- h1 標(biāo)題 ---> <h1>網(wǎng)頁制作指南</h1> <!--- p = paragraph 段落 ---> <p id="msg">任務(wù)清單</p> <!--- ul = unordered list 無序號列表 ---> <!--- ol = ordered list 有序號列表 ---> <!--- li 即列表中的內(nèi)容 ---> <ul> <li class="list">添加可視化設(shè)計</li> <li class="list">添加淺色與深色主題</li> <li>添加切換主題功能！</li> </ul> </body> 添加好內(nèi)容后，我們可以在此預(yù)覽網(wǎng)頁： /* CSS 的評論代碼與 HTML 不同 */ /* 使用根目錄定義顏色 */ :root { --green: #f0fff0; --white: #ffffff; --black: #000000; } * { color: var(--fontColor); } 更改字體樣式 body { /* 設(shè)置背景顏色，調(diào)整文本為黑體、居中 */ font-family: SimHei; text-align: center; background: var(--bg); } ul { /* 設(shè)置 ul 文本為宋體 */ font-family: SimSun; } 為列表設(shè)置邊框 /* 為 ul 添加邊框 */ .feature { text-align: left; font-size: 24px; margin: auto; width: 400px; height: 200px; outline: solid 1px; /* 將列表內(nèi)容居中 */ display: flex; justify-content: center; align-items: center; } 添加淺色主題 /* 添加淺色主題 */ .light-theme { color: var(--black); background: var(--green); } 在刷新網(wǎng)頁之前，我們需要回到 .HTML 文件為 <body> 標(biāo)簽添加淺色主題： <body class="light-theme"> 同時在 <ul> 的上下方添加 <div> 標(biāo)簽，注意需要為 <div> 標(biāo)簽添加 class： <div class="feature"> <ul> ... </ul> </div> 完成后 CSS 文件配置后，回到 .HTML 文件重新加載網(wǎng)頁查看效果： <!--- div = division 分區(qū) ---> <div> <button class="btn" onclick="function()">切換深色</button> </div> 接著，把 <head> 中的 script.js 關(guān)聯(lián)代碼移動（剪切+粘貼）到 </body> 標(biāo)簽結(jié)束前： <script type="text/javascript" src="js/script.js"></script> </body> 在添加切換功能前，我們需要添加并調(diào)整 CSS 的主題： /* 添加淺色主題 */ .light-theme { --bg: var(--green); --fontColor: var(--black); --btnBg: var(--black); --btnFontColor: var(--white); } /* 添加深色主題 */ .dark-theme { --bg: var(--black); --fontColor: var(--green); --btnBg: var(--white); --btnFontColor: var(--black); } 然后調(diào)整按鈕設(shè)計： /* 調(diào)整按鈕設(shè)計 */ .btn { position: absolute; top: 20px; left: 250px; height: 50px; width: 50px; border-radius: 50%; border: none; color: var(--btnFontColor); background-color: var(--btnBg); } /* 添加點擊效果 */ .btn:focus { outline-style: none; } 最后，轉(zhuǎn)到 script.js 文件并添加按鈕功能： // 為 switcher 添加定義 const switcher = document.querySelector('.btn'); // 使用監(jiān)聽功能監(jiān)聽按鈕動態(tài) switcher.addEventListener('click', function() { document.body.classList.toggle('dark-theme') // 使用 if 功能實現(xiàn)主題切換 var className = document.body.className; if(className == "light-theme") { this.textContent = "切換深色"; } else { this.textContent = "切換淺色"; } console.log('current class name: ' + className); }); 關(guān)鍵詞：主題,簡單,入門
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
