Please open Telegram to view this post
VIEW IN TELEGRAM
👨💻5🐳3🔥2
Цикл for используется, когда известно количество итераций.
Пример:
for (int i = 0; i < 10; i++)
{
Console.WriteLine(i);
}
Цикл while выполняется, пока условие истинно.
Пример:
int i = 0;
while (i < 10)
{
Console.WriteLine(i);
i++;
}
Цикл do-while похож на while, но сначала выполняет код, а затем проверяет условие.
Пример:
int i = 0;
do
{
Console.WriteLine(i);
i++;
} while (i < 10);
Цикл foreach используется для перебора элементов коллекции.
Пример:
int[] numbers = { 1, 2, 3, 4, 5 };
foreach (int number in numbers)
{
Console.WriteLine(number);
}Please open Telegram to view this post
VIEW IN TELEGRAM
🐳3👨💻2🔥1
<header>Элемент <header> используется для определения заголовочной части страницы или раздела. Он обычно содержит логотип, название сайта, навигационные ссылки и другие важные элементы.
<header>
<h1>Название сайта</h1>
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<footer>Элемент <footer> используется для определения нижней части страницы или раздела. Он может содержать контактную информацию, авторские права, ссылки на политику конфиденциальности и т.д.
<footer>
<p>© 2024 Название компании. Все права защищены.</p>
<nav>
<ul>
<li><a href="#privacy">Политика конфиденциальности</a></li>
<li><a href="#terms">Условия использования</a></li>
</ul>
</nav>
</footer>
Please open Telegram to view this post
VIEW IN TELEGRAM
🐳4🔥1👨💻1
Пример использования:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').click(function() {
$('#myElement').toggle();
});
});
</script>
</head>
<body>
<button id="myButton">Показать/Скрыть элемент</button>
<div id="myElement" style="display:none;">Это скрытый элемент</div>
</body>
</html>
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2🐳2👨💻2
<nav>Элемент <nav> используется для создания навигационных блоков, содержащих ссылки на другие части сайта или страницы.
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
<main>Элемент <main> используется для определения основного содержимого страницы. В этом элементе располагается основная информация, уникальная для данной страницы.
<main>
<article>
<h2>Заголовок статьи</h2>
<p>Основное содержимое страницы.</p>
</article>
</main>
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3👨💻2🐳1
Основные свойства для обрезки текста
overflow: hidden:Это свойство скрывает весь содержимый текст, который выходит за пределы элемента.
.text-container {
width: 200px;
overflow: hidden;
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 10px;
}white-space: nowrap:Это свойство предотвращает перенос текста на новую строку. Вся строка текста отображается на одной линии.
.text-container {
white-space: nowrap;
}
text-overflow: ellipsis:Это свойство добавляет многоточие (...) в конце строки, если текст не помещается.
.text-container {
text-overflow: ellipsis;
}Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3👨💻3🐳2
Заявление по этой ситуации от ресурса huecker.io:
Мы победили! Docker Hub снова доступен в России.
Поддержка huecker.io будет продолжаться до 14 июня 2024 года 15:00 UTC. После этого времени, мы начнём отключать сервисы обхода блокировки. Документация останется доступной в исторических целях.
Это был невероятный опыт, и мы благодарим всех, кто поддерживал нас в течение короткого срока работы проекта.
Please open Telegram to view this post
VIEW IN TELEGRAM
🐳3🔥2👨💻1
Элемент с position: fixed закрепляется относительно окна браузера. Он остается на одном месте даже при прокрутке страницы.
.fixed-header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}Пример HTML:
<div class="fixed-header">
Это закрепленный заголовок
</div>
<div style="height: 2000px;">
Прокручиваемое содержимое страницы
</div>
Элемент с position: sticky ведет себя как relative до тех пор, пока не достигнет заданного порога (например, top), после чего становится fixed. Это полезно для создания "липких" заголовков или навигационных панелей.
.sticky-header {
position: -webkit-sticky; /* Для поддержки в Safari */
position: sticky;
top: 0;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}Пример HTML:
<div class="sticky-header">
Это липкий заголовок
</div>
<div style="height: 2000px;">
Прокручиваемое содержимое страницы
</div>
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2🐳2👨💻2
<section>Элемент <section> используется для разделения содержимого на логические секции. Каждая секция обычно имеет свой заголовок.
<section>
<h2>Раздел 1</h2>
<p>Содержимое первого раздела.</p>
</section>
<section>
<h2>Раздел 2</h2>
<p>Содержимое второго раздела.</p>
</section>
<article>Элемент <article> используется для самостоятельных частей содержимого, таких как статьи, блоги, новости и т.д.
<article>
<h2>Заголовок статьи</h2>
<p>Текст статьи.</p>
</article>
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3👨💻2🐳1
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2🐳2👨💻2
Основные свойства Transition:
transition-property: определяет, какие CSS-свойства будут анимироваться (например, color, background-color, width).transition-duration: задает продолжительность анимации (временные значения, например, 2s для двух секунд).transition-timing-function: определяет, как будут распределяться скорости изменения в течение анимации (например, ease, linear, ease-in, ease-out).transition-delay: задает задержку перед началом анимации (например, 1s для одной секунды задержки).Пример:
.button {
background-color: blue;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: green;
}Полезные советы:
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2🐳2👨💻2
Math.min()Синтаксис:
Math.min(value1, value2, ..., valueN);
Пример:
let minValue = Math.min(10, 5, 8, 3, 6); // вернет 3
console.log(minValue); // 3
Пример с массивом:
Чтобы найти минимальное значение в массиве, используйте оператор разворота '...':
let numbers = [10, 5, 8, 3, 6];
let minValue = Math.min(...numbers);
console.log(minValue); // 3
Please open Telegram to view this post
VIEW IN TELEGRAM
🐳3👨💻2🔥1
Flexbox предназначен для одномерного макета – работы с элементами в строке или столбце. Он идеален для создания выровненных по центру, распределенных или адаптивных макетов.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}CSS Grid предназначен для двумерного макета – работы с элементами в строках и столбцах одновременно. Grid идеально подходит для сложных макетов страниц с несколькими строками и столбцами.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}Please open Telegram to view this post
VIEW IN TELEGRAM
🐳3🔥2👨💻1
Math.max()Синтаксис:
Math.max(value1, value2, ..., valueN);
Пример:
let maxValue = Math.max(10, 5, 8, 3, 6); // вернет 10
console.log(maxValue); // 10
Пример с массивом:
Для нахождения максимального значения в массиве используйте оператор разворота '...':
let numbers = [10, 5, 8, 3, 6];
let maxValue = Math.max(...numbers);
console.log(maxValue); // 10
Please open Telegram to view this post
VIEW IN TELEGRAM
🐳3🔥2👨💻1
Основные особенности:
Пример:
int[] numbers = new int[5];
numbers[0] = 10;
numbers[1] = 20;
Please open Telegram to view this post
VIEW IN TELEGRAM
🐳3🔥2👨💻1
Основные принципы каскадности:
Пример:
/* Стиль для всех параграфов */
p {
color: blue;
}
/* Более специфичный стиль для класса */
p.special {
color: green;
}
/* Инлайн-стиль (самый высокий приоритет) */
<p class="special" style="color: red;">This is a paragraph.</p>
Please open Telegram to view this post
VIEW IN TELEGRAM
👨💻3🐳2🔥1
Основные особенности:
Пример:
List<int> numbers = new List<int>();
numbers.Add(10);
numbers.Add(20);
Please open Telegram to view this post
VIEW IN TELEGRAM
👨💻3🐳2🔥1
Основные принципы Pixel Perfect:
Согласованность дизайна Согласованность дизайна
Преимущества Pixel Perfect:
Как достичь Pixel Perfect?
Please open Telegram to view this post
VIEW IN TELEGRAM
🐳3🔥2👨💻1
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3🐳2👨💻1
Ключевые различия
Когда использовать?
Please open Telegram to view this post
VIEW IN TELEGRAM
🐳3🔥2👨💻1