В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно использовать для установки светлых/темных стилей и добавления интерактивных функций с помощью JavaScript. Следуйте инструкциям, и вы готовы к работе!
Вот, что вы выучили, поехали ~
🔖 文章索引 1. <a href="#95a6">為您的網站建立新資料夾</a> 2. <a href="#65ef">建立一些檔案</a> 3. <a href="#57a3">VS Code 安裝延伸模組或套件</a> 4. <a href="#3d19">新增一些 HTML 程式碼</a> 5. <a href="#9d31">CSS 新增 淺/深 色佈景主題</a> 6. <a href="#2f1d">JavaScript 新增容錯</a> 7. <a href="#96e3">設定 Strict 模式</a>
Откройте VS Code и создайте папку с именем simple-website
Живой сервер
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple website</title> <link rel="stylesheet" href="main.css"> </head> <body class="dark-theme"> <h1>Task List</h1> <p id="msg">Current tasks:</p> <ul> <li class="list">Add visual styles</li> <li class="list">Add light and dark themes</li> <li>Enable switching the theme</li> </ul> <div> <button class="btn">Light</button> </div> <script src="app.js"></script> <noscript>You need to enable JavaScript to view the full site.</noscript> </body> </html>
Существует множество различных версий HTML. doctype<!DOCTYPE html> указывает, что этот HTML-файл содержит код HTML5.
Мета-тег представляет собой "отредактированные данные", которые обычно не видны зрителю, если он не просматривает оригинальный код в своем браузере. Мета-элементы или теги предоставляют описательную информацию о веб-странице. Например, он может помочь поисковым системам обработать информацию на вашей веб-странице, которая будет возвращена в результатах поиска.
Набор символов UTF-8 может показаться неважным, но он очень важен для разработки способа интерпретации символов вашим компьютером. Отсутствие данных о реле charset может привести к нарушению безопасности.
Если вам нужно переключить светлый/темный стиль, вы можете использовать параметры --bg, --fontColor, --btnBg, --btnFontColor, --btnBg, --btnFontColor и --btnFontColor, заданные в имени класса light-theme или dark-theme. btnFontColor, более подробную информацию см. в разделе body {}.
:root { --green: #00FF00; --white: #FFFFFF; --black: #000000; } /* 淺色 樣式 */ .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); } body { background: var(--bg); color: var(--fontColor); font-family: helvetica; } ul { font-family: helvetica; } li { list-style: circle; } .list { list-style: square; } #msg { font-family: monospace; } .btn { position: absolute; top: 20px; left: 250px; height: 50px; width: 50px; border-radius: 50%; border: none; color: var(--btnFontColor); background-color: var(--btnBg); }
<script src="app.js"></script> <noscript>You need to enable JavaScript to view the full site.</noscript> </body> </html>
Добавление элемента <noscript> является примером отказоустойчивости или умеренного снижения производительности. Используя элемент <noscript>, ваш код может обнаружить и спланировать неподдерживаемые или неиспользуемые функции.
JavaScript разработан таким образом, чтобы облегчить понимание и позволить разработчикам совершать определенные ошибки. Например, даже если вы используете неправильно написанную переменную, JavaScript не отправит сообщение об ошибке, а создаст новую полную доменную переменную. Когда вы только начинаете изучать JavaScript, вы можете ожидать, что не увидите слишком много ошибок, но это также может привести к тому, что код будет менее оптимизирован для браузеров и его будет сложнее обнаружить.
Переключитесь в строгий режим, чтобы получить более полезное сообщение об ошибке, если вы допустили ошибку.
'use strict'; const switcher = document.querySelector('.btn'); switcher.addEventListener('click', function(e) { document.body.classList.toggle('light-theme'); document.body.classList.toggle('dark-theme'); const className = document.body.className; if (className === 'light-theme') { this.textContent = 'Dark'; } else { this.textContent = 'Light'; } console.info('body current class name: ', className); });
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.