Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.
@@ -283,7 +283,7 @@ table {Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.
-{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Styling_boxes")}}
diff --git a/files/ru/learn/css/css_layout/index.html b/files/ru/learn/css/css_layout/index.html index 3f0be53aca..48ea827ad8 100644 --- a/files/ru/learn/css/css_layout/index.html +++ b/files/ru/learn/css/css_layout/index.html @@ -32,9 +32,9 @@ translation_of: Learn/CSS/CSS_layout
Перед изучением этого раздела вы должны:
Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.
В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы вёрстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.
Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займёт намного больше времени, сам код будет менее эффективным и подверженным ошибкам. Если бы у нас было 10 элементов для добавления в счёт-фактуру, это ещё куда ни шло, но как насчёт 100 предметов? Или 1000? Мы вернёмся к этому примеру позже в статье.
-Как и в предыдущих статьях, давайте узнаем о реальных основах массивов, введя некоторые примеры в консоль JavaScript. Мы предоставили один ниже (вы также можете open this console в отдельном окне, или использовать browser developer console, если вам угодно).
- -<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>JavaScript console</title>
- <style>
- * {
- box-sizing: border-box;
- }
-
- html {
- background-color: #0C323D;
- color: #809089;
- font-family: monospace;
- }
-
- body {
- max-width: 700px;
- }
-
- p {
- margin: 0;
- width: 1%;
- padding: 0 1%;
- font-size: 16px;
- line-height: 1.5;
- float: left;
- }
-
- .input p {
- margin-right: 1%;
- }
-
- .output p {
- width: 100%;
- }
-
- .input input {
- width: 96%;
- float: left;
- border: none;
- font-size: 16px;
- line-height: 1.5;
- font-family: monospace;
- padding: 0;
- background: #0C323D;
- color: #809089;
- }
-
- div {
- clear: both;
- }
-
- </style>
- </head>
- <body>
-
-
- </body>
-
- <script>
- var geval = eval;
- function createInput() {
- var inputDiv = document.createElement('div');
- var inputPara = document.createElement('p');
- var inputForm = document.createElement('input');
-
- inputDiv.setAttribute('class','input');
- inputPara.textContent = '>';
- inputDiv.appendChild(inputPara);
- inputDiv.appendChild(inputForm);
- document.body.appendChild(inputDiv);
-
- if(document.querySelectorAll('div').length > 1) {
- inputForm.focus();
- }
-
- inputForm.addEventListener('change', executeCode);
- }
-
- function executeCode(e) {
- try {
- var result = geval(e.target.value);
- } catch(e) {
- var result = 'error — ' + e.message;
- }
-
- var outputDiv = document.createElement('div');
- var outputPara = document.createElement('p');
-
- outputDiv.setAttribute('class','output');
- outputPara.textContent = 'Result: ' + result;
- outputDiv.appendChild(outputPara);
- document.body.appendChild(outputDiv);
-
- e.target.disabled = true;
- e.target.parentNode.style.opacity = '0.5';
-
- createInput()
- }
-
- createInput();
-
- </script>
-</html>
-{{ EmbedLiveSample('Hidden_code', '100%', 300) }}
+Как и в предыдущих статьях, давайте узнаем о реальных основах работы с массивами, введя некоторые примеры в консоль разработчика.
С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнём с ввода некоторых основных строк в консоль, чтобы ознакомиться с ними. Мы предоставили одну ниже (вы также можете открыть эту консоль в отдельной вкладке или окне или использовать консоль разработчика браузера, если хотите).
- -<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>JavaScript console</title>
- <style>
- * {
- box-sizing: border-box;
- }
-
- html {
- background-color: #0C323D;
- color: #809089;
- font-family: monospace;
- }
-
- body {
- max-width: 700px;
- }
-
- p {
- margin: 0;
- width: 1%;
- padding: 0 1%;
- font-size: 16px;
- line-height: 1.5;
- float: left;
- }
-
- .input p {
- margin-right: 1%;
- }
-
- .output p {
- width: 100%;
- }
-
- .input input {
- width: 96%;
- float: left;
- border: none;
- font-size: 16px;
- line-height: 1.5;
- font-family: monospace;
- padding: 0;
- background: #0C323D;
- color: #809089;
- }
-
- div {
- clear: both;
- }
-
- </style>
- </head>
- <body>
-
-
- </body>
-
- <script>
- var geval = eval;
- function createInput() {
- var inputDiv = document.createElement('div');
- var inputPara = document.createElement('p');
- var inputForm = document.createElement('input');
-
- inputDiv.setAttribute('class','input');
- inputPara.textContent = '>';
- inputDiv.appendChild(inputPara);
- inputDiv.appendChild(inputForm);
- document.body.appendChild(inputDiv);
-
- if(document.querySelectorAll('div').length > 1) {
- inputForm.focus();
- }
-
- inputForm.addEventListener('change', executeCode);
- }
-
- function executeCode(e) {
- try {
- var result = geval(e.target.value);
- } catch(e) {
- var result = 'error — ' + e.message;
- }
-
- var outputDiv = document.createElement('div');
- var outputPara = document.createElement('p');
-
- outputDiv.setAttribute('class','output');
- outputPara.textContent = 'Result: ' + result;
- outputDiv.appendChild(outputPara);
- document.body.appendChild(outputDiv);
-
- e.target.disabled = true;
- e.target.parentNode.style.opacity = '0.5';
-
- createInput()
- }
-
- createInput();
-
- </script>
-</html>
-{{ EmbedLiveSample('Hidden_code', '100%', 300) }}
+С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнём с ввода некоторых основных строк в консоль разработчика, чтобы ознакомиться с ними.
Только не волнуйтесь! Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.
-Приведём несколько примеров в новой консоли. Ниже вы можете открыть данную консоль в отдельной вкладке или окне, или, если вам так удобней, использовать браузер консоли разработчика.
- -<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>Консоль JavaScript</title>
- <style>
- * {
- box-sizing: border-box;
- }
-
- html {
- background-color: #0C323D;
- color: #809089;
- font-family: monospace;
- }
-
- body {
- max-width: 700px;
- }
-
- p {
- margin: 0;
- width: 1%;
- padding: 0 1%;
- font-size: 16px;
- line-height: 1.5;
- float: left;
- }
-
- .input p {
- margin-right: 1%;
- }
-
- .output p {
- width: 100%;
- }
-
- .input input {
- width: 96%;
- float: left;
- border: none;
- font-size: 16px;
- line-height: 1.5;
- font-family: monospace;
- padding: 0;
- background: #0C323D;
- color: #809089;
- }
-
- div {
- clear: both;
- }
-
- </style>
- </head>
- <body>
-
-
- </body>
-
- <script>
- var geval = eval;
- function createInput() {
- var inputDiv = document.createElement('div');
- var inputPara = document.createElement('p');
- var inputForm = document.createElement('input');
-
- inputDiv.setAttribute('class', 'input');
- inputPara.textContent = '>';
- inputDiv.appendChild(inputPara);
- inputDiv.appendChild(inputForm);
- document.body.appendChild(inputDiv);
-
- inputForm.addEventListener('change', executeCode);
- }
-
- function executeCode(e) {
- try {
- var result = geval(e.target.value);
- } catch(e) {
- var result = 'error — ' + e.message;
- }
-
- var outputDiv = document.createElement('div');
- var outputPara = document.createElement('p');
-
- outputDiv.setAttribute('class','output');
- outputPara.textContent = 'Result: ' + result;
- outputDiv.appendChild(outputPara);
- document.body.appendChild(outputDiv);
-
- e.target.disabled = true;
- e.target.parentNode.style.opacity = '0.5';
-
- createInput()
- }
-
- createInput();
-
- </script>
-</html>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}
+Введем несколько примеров в консоль разработчика.