Блог вчителя Лаврусенка І.М.

Адаптивна верстка. Повний приклад

4/15/2024

Адаптивна верстка. Повний приклад

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

.menu {

float:left;

width:20%;

text-align:center;

}

.menu a {

background-color:#e5e5e5;

padding:8px;

margin-top:7px;

display:block;

width:100%;

color:black;

}

.main {

float:left;

width:60%;

padding:0 20px;

}

.right {

background-color:#e5e5e5;

float:left;

width:20%;

padding:15px;

margin-top:7px;

text-align:center;

}

@media only screen and (max-width:620px) {

.menu, .main, .right {

width:100%;

}

</style>

</head>

<h1>Hello World</h1>

</div>

</div>

<h2>Lorum Ipsum</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

<h2>About</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">copyright</div>

</body>

</html>

Далі

Розрахунок параметрів повітряної кулі

4/12/2024

Розрахунок параметрів повітряної кулі

Повітряна куля піднімається під дією сили, що виштовхує, або сили Архімеда, тому що закон Архімеда поширюється не тільки на рідини, але і на гази. Відповідно, щоб куля почала підніматися, виштовхувальна сила, що діє на кулю, повинна перевищувати силу тяжіння. Для вирішення завдань зазвичай знаходять граничну умову (мінімальну температуру, мінімальний об'єм тощо), що дозволяє прирівняти силу тяжіння і виштовхувальну силу. Тобто трохи більше – і куля починає підніматися. Рівняння рівноваги виглядає таким чином:

$(M+m+m_a)g=m_eg$ ,

де

M - маса оболонки,

m - маса вантажу,

mₐ - маса нагрітого повітря в кулі,

mₑ - маса навколишнього повітря, витісненого кулею,

g – прискорення вільного падіння.

Масу повітря замінимо на добуток густини повітря на об'єм кулі

$(M+m+\rho_a V)g=\rho_e V g$

Скоротивши g і перенісши масу нагрітого повітря праву частину, отримаємо

$M+m=(\rho_e - \rho_a) V$

Розберемося із густиною нагрітого газу. При нагріванні повітря в кулі тиск і об'єм не змінюється - ми має ту саму нерозтяжну оболонку, тиск в якій дорівнює атмосферному. У початковий момент температура повітря всередині оболонки дорівнювала температурі навколишнього повітря. Можна використовувати рівняння Менделєєва-Клапейрона:

$PV=\frac{m_e}{\mu}RT_e=\frac{m_a}{\mu}RT_a$

Щоб компенсувати збільшення температури під час нагрівання, повинна зменшитися маса повітря в кулі, а отже, густина. Замінивши масу, отримуємо

$\frac{\rho_e V}{\mu}RT_e=\frac{\rho_a V}{\mu}RT_a$

Після скорочення та перенесення отримуємо наступний вираз для густини нагрітого повітря (ми тільки що дізналися, що густина газу обернено пропорційна його температурі):

$\rho_a =\frac{T_e}{T_a} \rho_e$

До речі, температура повітря всередині оболонки може досягати 100-120°С.

Підставивши ρₐ у рівність вище, отримаємо підсумкову формулу, яка пов'язує всі параметри повітряної кулі та навколишнього середовища:

$M+m=\rho_e V(1 - \frac{T_e}{T_a} )$

З цієї рівності можна отримати формули для обчислення потрібного невідомого.

Маса оболонки:

$M=\rho_e V(1 - \frac{T_e}{T_a} ) - m$

Маса вантажу:

$m=\rho_e V(1 - \frac{T_e}{T_a} ) - M$

Об'єм кулі:

$V = \frac{M+m}{\rho_e (1 - \frac{T_e}{T_a} )}$

Температура нагрітого повітря:

$T_a = \frac{T_e}{1-\frac{M+m}{\rho_e V}}$

Варто зауважити, що оскільки оболонку не можна нагрівати вище за певну температуру, то чим тепліше навколишнє повітря, тим менша різниця густин, і тим гірша підіймальна сила повітряної кулі.

Далі

JavaScript

1/22/2024

Взаємодія: alert, prompt, confirm

Базові оператори, математика

Тест. Основи JavaScript

Умовні розгалуження: if, '?'

Логічні оператори

Далі

Горизонтальне меню

1/17/2024

<html>

<head>

<title>Горизонтальне меню</title>

</head>

<body>

<ul>

<li><a href="#">Про компанію</a></li>

<li><a href="#">Продукція</a></li>

<li><a href="#">Каталог товарів</a></li>

<li><a href="#" id="nowopen">Відеогалерея</a></li>

<li><a href="#">Контакти</a></li>

</ul>

</div>

</body>

</html>

Далі підключаємо стилі вказівкою:

Розташовуємо пункти меню один за одним за допомогою правила CSS:

#menu ul li {

display: inline;

}

Створимо горизонтальну лінію на сторінці, де будуть відображатися пункти горизонтального меню. Обов'язково вказуємо відстань від края сторінки:

#menu ul {

border-bottom:2px solid #000000;

margin-left:0;

padding:4px 0;

}

Створюємо прямокутні рамки, в яких будуть розміщені пункти меню та вказуємо внутрішні відступи:

#menu ul li a {

text-decoration:none;

margin-left:3px;

border:1px solid #000000;

padding: 3px 4px;

border-bottom:0;

background:#CEDEFF;

}

Налаштовуємо відображення пунктів горизонтального меню, на які користувач вже натискував:

#menu ul li a:link {

color:#493;

}

#menu ul li a:visited {

color:#647;

}

#menu ul li a:hover {

color:#000;

background:#6699FF;

border-color:#227

}

Вказати вигляд пункту меню поточної веб-сторінки:

#menu ul li a#nowopen {

background:#fff;

border-bottom: 1px solid #fff;

}

За необхідності можна вирівняти горизонтальне меню по центру:

#menu {

margin:0 25% 0 25%;

}

Далі

Посилання на симуляцію

12/25/2023

http://kint.com.ua/tmp/ViAl_Setup.exe

Далі

Створення меню CSS, що випадає.

12/05/2023

Крок 1 - Створення HTML-файлу

По-перше, вам потрібно створити порожній HTML-файл. Ми створимо новий файл під назвою menu.html. Для цього ми використовуватимемо Файловий менеджер. Створіть базову структуру HTML файлу.

Крок 2 — Додавання коду HTML меню

Наше меню буде зроблено з одного батьківського елемента під назвою Головне меню та п'яти підрозділів. Змінюючи адресу всередині атрибуту href, ви можете пов'язати кожен підрозділ із різними сторінками вашого сайту. Ви напевно помітили, що кожен елемент має різний клас - dropdown, mainmenubtn та dropdown-child. Класи потрібні для застосування правил CSS.

<div class="dropdown">
  <button class="mainmenubtn">Головне меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ua/page1.html">Підрозділ 1</a>
    <a href="http://www.вашдомен.ua/page2.html">Підрозділ 2</a>
    <a href="http://www.вашдомен.ua/page3.html">Підрозділ 3</a>
    <a href="http://www.вашдомен.ua/page4.html">Підрозділ 4</a>
    <a href="http://www.вашдомен.ua/page5.html">Підрозділ 5</a>
  </div>
</div>

Крок 3 — Як створити меню CSS, що випадає

Ми стилізуємо наш HTML код, використовуючи наступні CSS правила:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Як ви бачите, клас .dropdown-child має CSS правило display: none. Однак, як тільки користувач проведе курсором (.dropdown:hover) по батьківському елементу, це правило змінить відображення на display: block. Це і створить ефект меню, що випадає.

Нижче наведено фінальний результат нашого файлу menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Головне меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ua/page1.html">Підрозділ 1</a>
    <a href="http://www.вашдомен.ua/page2.html">Підрозділ 2</a>
    <a href="http://www.вашдомен.ua/page3.html">Підрозділ 3</a>
    <a href="http://www.вашдомен.ua/page4.html">Підрозділ 4</a>
    <a href="http://www.вашдомен.ua/page5.html">Підрозділ 5</a>
  </div>
</div>
</body>
</html>