Web-программирование, HTML/CSS - История изменений

Gusarev: /* Рисование мышкой */

2022-03-03T13:57:45Z

Рисование мышкой

Gusarev: /* 03.03.2022 */

2022-03-03T13:48:17Z

03.03.2022

Внесённые изменения

Gusarev: /* Рисоване мышкой */

2022-03-03T13:44:28Z

Рисоване мышкой

Gusarev: /* Материалы некоторых занятий */

2022-03-03T13:44:01Z

Материалы некоторых занятий

Gusarev: /* Активная/неактивная кнопка */

2022-02-17T09:26:30Z

Активная/неактивная кнопка

Gusarev: /* Материалы некоторых занятий */

2022-02-11T12:22:38Z

Материалы некоторых занятий

Gusarev: /* Выпадающее меню */

2022-02-10T14:03:22Z

Выпадающее меню

Gusarev: /* Материалы некоторых занятий */

2022-02-10T14:01:42Z

Материалы некоторых занятий

Gusarev: /* Материалы некоторых занятий */

2022-01-27T14:38:40Z

Материалы некоторых занятий

Gusarev: /* Создание элементов при загрузке окна (onload) и изменение свойств существующих объектов */

2022-01-13T14:44:31Z

Создание элементов при загрузке окна (onload) и изменение свойств существующих объектов

@@ Строка 830: / Строка 830: @@
 myPics.addEventListener('mousemove', e => {
    if (isDrawing === true) {
-     drawLine(context, x, y, e.offsetX, e.offsetY)т;
+     drawLine(context, x, y, e.offsetX, e.offsetY);
      x = e.offsetX;
      y = e.offsetY;

@@ Строка 788: / Строка 788: @@
 Интерактив с помощью JavaScript/CSS
-====Рисоване мышкой====
+====Рисование мышкой====
 example.html
 <source lang='html4strict'>

@@ Строка 781: / Строка 781: @@
      </body>
 </html>
 </source>

@@ Строка 757: / Строка 757: @@
 ====Активная/неактивная кнопка====
-drop_down.html
+activate_button.html
 <source lang='html4strict'>
 <html>

@@ Строка 751: / Строка 751: @@
      </body>
 </html>
 </source>

@@ Строка 669: / Строка 669: @@
 <html>
      <head>
          <script>
              /* When the user clicks on the button,
@@ Строка 690: / Строка 691: @@
+             }
          </script>
          <style>
              /* Dropdown Button */
@@ Строка 737: / Строка 739: @@
          </style>
      </head>
 <div class="dropdown">
-    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
+    <body>
-    <div id="myDropdown" class="dropdown-content">
+        <div class="dropdown">
-      <a href="#">Link 1</a>
+            <button onclick="myFunction()" class="dropbtn">Dropdown</button>
-      <a href="#">Link 2</a>
+            <div id="myDropdown" class="dropdown-content">
-      <a href="#">Link 3</a>
+              <a href="#">Link 1</a>
-    </div>
+              <a href="#">Link 2</a>
-  </div>
+              <a href="#">Link 3</a>
 </html>
 </source>

← Предыдущая		Версия 14:01, 10 февраля 2022
Строка 659:		Строка 659:
	</body>		</body>
	</html></source>		</html></source>
		+
		+	===10.02.2022===
		+
		+	Создание динамического меню с помощью JavaScript/CSS
		+
		+	====Выпадающее меню====
		+	drop_down.html
		+	<source lang='html4strict'>
		+	<html>
		+	<head>
		+	<script>
		+	/* When the user clicks on the button,
		+	toggle between hiding and showing the dropdown content */
		+	function myFunction() {
		+	document.getElementById("myDropdown").classList.toggle("show");
		+	}
		+
		+	// Close the dropdown menu if the user clicks outside of it
		+	window.onclick = function(event) {
		+	if (!event.target.matches('.dropbtn')) {
		+	var dropdowns = document.getElementsByClassName("dropdown-content");
		+	var i;
		+	for (i = 0; i < dropdowns.length; i++) {
		+	var openDropdown = dropdowns[i];
		+	if (openDropdown.classList.contains('show')) {
		+	openDropdown.classList.remove('show');
		+	}
		+	}
		+	}
		+	}
		+	</script>
		+	<style>
		+	/* Dropdown Button */
		+	.dropbtn {
		+	background-color: #3498DB;
		+	color: white;
		+	padding: 16px;
		+	font-size: 16px;
		+	border: none;
		+	cursor: pointer;
		+	}
		+
		+	/* Dropdown button on hover & focus */
		+	.dropbtn:hover, .dropbtn:focus {
		+	background-color: #2980B9;
		+	}
		+
		+	/* The container <div> - needed to position the dropdown content */
		+	.dropdown {
		+	position: relative;
		+	display: inline-block;
		+	}
		+
		+	/* Dropdown Content (Hidden by Default) */
		+	.dropdown-content {
		+	display: none;
		+	position: absolute;
		+	background-color: #f1f1f1;
		+	min-width: 160px;
		+	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		+	z-index: 1;
		+	}
		+
		+	/* Links inside the dropdown */
		+	.dropdown-content a {
		+	color: black;
		+	padding: 12px 16px;
		+	text-decoration: none;
		+	display: block;
		+	}
		+
		+	/* Change color of dropdown links on hover */
		+	.dropdown-content a:hover {background-color: #ddd}
		+
		+	/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
		+	.show {display:block;}
		+	</style>
		+	</head>
		+	<div class="dropdown">
		+	<button onclick="myFunction()" class="dropbtn">Dropdown</button>
		+	<div id="myDropdown" class="dropdown-content">
		+	<a href="#">Link 1</a>
		+	<a href="#">Link 2</a>
		+	<a href="#">Link 3</a>
		+	</div>
		+	</div>
		+	</html>
		+	</source>

← Предыдущая		Версия 14:38, 27 января 2022
Строка 621:		Строка 621:
	</html>		</html>
	</source>		</source>
		+
		+	===27.01.2022===
		+
		+	Как обойтись без flex/grid (древние таблицы приходят на помощь)
		+
		+	====Задаём структуру страницы таблицами====
		+	table_design.html
		+	<source lang='html4strict'>
		+	<html>
		+	<head>
		+	<title>Это заголовок</title>
		+	</head>
		+	<body width="100%" height="100%">
		+	<table border=1 width=100% height=100%>
		+	<tr>
		+	<td height=20% colspan="2">...</td>
		+	</tr>
		+	<tr>
		+	<td width=20%>
		+	Item 1
		+	</td>
		+	<td rowspan="3">
		+	Основной контент
		+	</td>
		+	</tr>
		+	<tr>
		+	<td>
		+	Item 2
		+	</td>
		+	</tr>
		+	<tr>
		+	<td>
		+	Item 3
		+	</td>
		+	</tr>
		+	</table>
		+	</body>
		+	</html></source>

@@ Строка 600: / Строка 600: @@
 ====Создание элементов при загрузке окна (onload) и изменение свойств существующих объектов====
 DOM_example_1.html
-<source lang='html'>
+<source lang='html4strict'>
 <html>
    <head>