В 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); });
21.03.2023 12:23
Веб-разработка - это захватывающая и постоянно меняющаяся область, которая постоянно развивается благодаря новым технологиям и тенденциям. Одним из самых популярных фреймворков для веб-разработки сегодня является React.js. Если вы начинающий веб-разработчик и хотите узнать больше о React.js, это...
21.03.2023 07:56
React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые делают их подходящими для различных проектов веб-разработки.
20.03.2023 14:01
Веб-скрейпинг, как мы все знаем, это дисциплина, которая развивается с течением времени. Появляются все более сложные средства борьбы с ботами, а также новые инструменты веб-скраппинга с открытым исходным кодом для их обхода.
20.03.2023 12:24
Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие действия:
20.03.2023 11:15
О тренинге HTML JavaScript :HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей) - две основные технологии для создания веб-страниц. HTML обеспечивает структуру страницы CSS (визуальное и звуковое) оформление для различных устройств. Наряду с графикой и сценариями HTML и CSS являются...
20.03.2023 08:46
Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?