Вложенные блоки

@Andriyipz · Регистрация: 01.11.2020

Студворк — интернет-сервис помощи студентам

С помощью вложенных блоков (свойство display: inline-block), а также других стилей разработать информационную Web-страницую.Высота среднего строки 70%. Блоки наполнить произвольным содержанием, в одном из них разместить большой по объему текст. Предусмотреть появление полос прокрутки для случая, когда контент превышает высоту.
Для заполнения блоков используйте любые три специальных символов HTML (HTML-код).

@Academik · 07.02.2021, 16:33

Andriyipz, https://jsfiddle.net/Lmtuqnxz/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header>
      1
    </header>
    <main>
      <aside>
        2
      </aside>
      <section class="content">
        <div class="row">
          5
        </div>
        <div class="text">
          4
        </div>
      </section>
    </main>
    <footer>
      3
    </footer>
  </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html{height: 100%;}
body{font: 18px 'Arial'; height: 100%; margin: 0;}
.container{min-height: 100%; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column;}
 
header, aside, footer{padding: 15px;}
header, footer{color: #fff; background-color: #0066ff; border: 2px solid #000;}
header{background-color: #0066ff;}
 
main{display: flex; flex-grow: 1;}
aside{flex-basis: 200px; flex-shrink: 0; border-left: 2px solid #000; border-right: 2px solid #000;}
aside, .row{background-color: #ffcc00;}
 
.content{border-right: 2px solid #000; flex-grow: 1;}
.row{padding: 15px; border-bottom: 2px solid #000;}
.text{padding: 15px;}

@Andriyipz · 10.02.2021, 13:34 **[ТС]**

как это реализовать Для заполнения блоков используйте любые три специальных символов HTML (HTML-код).

@Academik · 10.02.2021, 14:35

Andriyipz, Возможно речь идет про эти спецсимволы http://htmlbook.ru/samhtml/tekst/spetssimvoly
Самый распространенный спецсимвол копирайта для подвала - ©
Что-то в таком духе:

HTML5
1
2
3
<footer>
    &copy; 2012 &ndash; 2021. Все права защищены.
</footer>

https://jsfiddle.net/2d48Lf1a/

@Andriyipz · 10.02.2021, 15:29 **[ТС]**

то есть ими надо заполнить всю страницу?

@Academik · 10.02.2021, 15:32

Сообщение от Andriyipz

то есть ими надо заполнить всю страницу?

Я думаю тут речь идет об уместном использовании этих спецсимволов на странице вперемешку с текстом.

@Andriyipz · 11.02.2021, 19:39 **[ТС]**

Как сделать чтобы текст не выходил за div чтобы текст был так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <title>Завдання 1</title>
    <link rel="stylesheet" type="text/css" href="../style/Kvasnuk_style_exercise1.css">
</head>
<body>
<div class="container">
    <header>
        <div class='headerLogo'></div>
      <div class="headerLink"><a href="https://uk.wikipedia.org/wiki/HTML">HTML</a></div>
      <div class="headerLink"><a href="https://uk.wikipedia.org/wiki/CSS">CSS</a></div>
      <div class="headerLink"><a href="https://uk.wikipedia.org/wiki/JavaScript">JAVASCRIPT</a></div>
    </header>
    <main>
      <aside>
        2
      </aside>
      <section class="content">
        <div class="row">
          5
        </div>
        <div class="text">
          <p>В програмній інженерії терміни «front end» та «back end» розрізняють за принципом розділення відповідальності між рівнем представлення та рівнем доступу до даних відповідно.</p>
 
<p>Front end — це  інтерфейс для взаємодії між користувачем і back end. Front end та back end можуть бути розподілені між однією або кількома системами.</p>
 
<p>В програмній архітектурі може бути багато рівнів між апаратним забезпеченням та кінцевим користувачем. Кожен з цих рівнів може мати як front end, так і back end. Front — це абстракція, спрощення базового компоненту через надання користувачу зручного (user-friendly) інтерфейсу.</p>
 
<p>В проектуванні програмного забезпечення, наприклад, архітектура Модель-Вид-Контролер надає front end та back end для бази даних, компонентів обробки користувачів і даних. Розділення програмних систем на front end та back end спрощує розробку і розділяє підтримку. Емпіричне правило полягає в тому, що front (чи «клієнтська») сторона — це будь-який компонент, яким керує користувач. Код серверної сторони (чи «back end»-у) знаходиться на сервері. Плутанина виникає, коли хтось повинен зробити front-end зміни файлів на боці серверу. Більшість HTML-дизайнерів, наприклад, не повинні бути на сервері під час розробки HTML; і навпаки, серверні інженери, за визначенням, не повинні бути ніде окрім серверу. Потрібні обидва розробники, щоб в кінцевому результаті створити функціональний, інтерактивний веб-сайт.</p>
 
<p>Для більшості комп'ютерних підсистем, графічні файлові менеджери є «front end»-ом для комп'ютерних файлових систем, і оболонкою для операційної системи. Користувач діє від імені «front end»-у, а back end запускає програми операційної системи у відповідь.</p>
 
<p>Використання інтерфейсу командного рядка (CLI) потребує знання спеціальної термінології і памʼятання команд, а графічний інтерфейс користувача (GUI) виступає замість нього «front end»-ом як стільничне середовище. В Unix-середовищі, ncurses — це простий псевдографічний front end для інтерфейсу командного рядка. На рівні інтерфейсу командного рядка Unix найбільше байтових потоко-орієнтованих (тобто таких, що використовують stdin/stdout/stderr як інтерфейс) програм діють як фільтри — автономні програми, які також можуть слугувати «front end»-ами і «back end»-ами для інших програм. (Вони функціонують завдяки передачі даних між собою через конвеєр, в основному для обробки тексту; наприклад: $ grep word ~user/dir/infile | sort | tee ~user/dir/outfile)</p>
 
<p>В компʼютерній мережі front end може належати до будь-якого апаратного забезпечення, що оптимізує чи захищає мережевий трафік. Така річ називається апаратним front end додатком, бо вона знаходиться перед зовнішньою мережею чи на її межі. Мережевий трафік проходить через апаратний front end перед входом до мережі.</p>
 
<p>В системах керування вмістом (CMS) терміни front end та back end можуть належати до тієї частини CMS, яка відображається кінцевому користувачу і до адміністративної частини відповідно.</p>
 
<p>В компіляторах front end транслює компʼютерний програмний сирцевий код в проміжне представлення, а back end працює з проміжним представленням, щоб генерувати машинний код. Back end зазвичай оптимізований для генерації коду, який працює швидше. Front-end/back-end відмінності можуть розділитись на парсерну частину і back end, який генерує і оптимізує код. Деякі проекти, такі як GCC, надають вибір між кількома «front end»-ами (синтаксичний аналіз різних сирцевих мов) чи «back end»-ами (генерація коду для процесорів різного призначання).</p>
 
<p>В синтезі мовлення, front end належить до частини системи синтезу, яка конвертує вхідний текст у символьно-фонетичний образ, а back end конвертує символьно-фонетичний образ безпосередньо в звуки.</p>
 
<p>В контексті WWW-програм, посередник — це сервіс, який функціонує одночасно як сервер на «front end»-і та як клієнт на «back end»-і.</p>
        </div>
      </section>
    </main>
    <footer>
      3
    </footer>
  </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
html {
    height: 100%;
}
body{
    font: 18px 'Arial'; height: 100%; margin: 0;
}
.container{
    min-height: 100%; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column;
}
 
header, aside, footer{
    padding: 15px;
}
header, footer{
    color: #fff; background-color: #0066ff; border: 2px solid #000;}
 
header{
    background-color: #0066ff;
    float:left;
}
 
main{
    display: flex; flex-grow: 1;
}
aside{
    flex-basis: 200px; flex-shrink: 0; border-left: 2px solid #000; border-right: 2px solid #000;
}
aside, .row{
    background-color: #ffcc00;
}
 
.content{
    border-right: 2px solid #000; flex-grow: 1;
}
.row{
    padding: 15px; border-bottom: 2px solid #000;
}
.text{
    padding: 15px;
    overflow:scroll;
}
.headerLink{
  display: inline-block;
  margin-left: 270px;
  margin-right: 60px;
  margin-top: 0px;
  margin-bottom: 0px;
  align-items: : center;
  font-size:18px;
}
.headerLogo{
  display: inline;
  float: left;
  position: static;
  background-image: url('../image/logo.png');
  background-image: no-repeat;
  background-position: left top;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 40px;
  height: 40px;
 
}
a{
    text-decoration: none;
    color: yellow;
}

@Academik · 11.02.2021, 20:15

Сообщение от Andriyipz

как сделать чтобы текст не выходил за div чтобы текст был так

Что вы имеете в виду? Чтоб в блоке .text была своя прокрутка?

@Andriyipz · 11.02.2021, 20:24 **[ТС]**

да....

@Academik · 11.02.2021, 20:52

Andriyipz, обновите/добавьте стили у себя:

CSS
1
2
3
4
5
*{box-sizing: border-box;}
header, footer{height: 80px;}
main{max-height: calc(100vh - 160px);}
.content{display: flex; flex-direction: column;}
.text{overflow: auto; max-height:100%; flex-grow: 1;}

Добавлено через 3 минуты
https://jsfiddle.net/mrfag0xq/3/

@Andriyipz · 11.02.2021, 20:58 **[ТС]**

как расширить контент чтобы белого не было по бокам или не надо?

@Academik · 11.02.2021, 21:01

Andriyipz, я бы не трогал. Но если нужно, уберите max-width и margin

CSS
1
2
3
.container{
    min-height: 100%; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column;
}

@Andriyipz · 11.02.2021, 21:04 **[ТС]**

что можно добавить в 2,5,3 блок?

@Academik · 11.02.2021, 21:08

Andriyipz, в 5 блок разместите заголовок статьи (h1). В левую колонку можно разместить навигацию (меню сайта), для подвала у вас уже есть контент что выше приводил.
Походите по сайтам и посмотрите структуру, может придет идея какая нибудь.

@Andriyipz · 11.02.2021, 21:24 **[ТС]**

Хотел в 2 блок разместить эту навигацию https://dbmast.ru/vydvigayushh... histom-css но чего не работает

@Andriyipz · 12.02.2021, 11:32 **[ТС]**

не знаете почему?

@Academik · 12.02.2021, 13:52

Сообщение от Andriyipz

не знаете почему?

Откуда мне знать по какой причине у вас не получается)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Andriyipz 0 / 1 / 0 Регистрация: 01.11.2020 Сообщений: 616

	Вложенные блоки 07.02.2021, 10:29. Показов 2464. Ответов 16 Метки html css (Все метки) С помощью вложенных блоков (свойство display: inline-block), а также других стилей разработать информационную Web-страницую.Высота среднего строки 70%. Блоки наполнить произвольным содержанием, в одном из них разместить большой по объему текст. Предусмотреть появление полос прокрутки для случая, когда контент превышает высоту. Для заполнения блоков используйте любые три специальных символов HTML (HTML-код). Изображения 0

@Andriyipz 0 / 1 / 0 Регистрация: 01.11.2020 Сообщений: 616
	10.02.2021, 13:34 [ТС]
	как это реализовать Для заполнения блоков используйте любые три специальных символов HTML (HTML-код). 0

@Andriyipz 0 / 1 / 0 Регистрация: 01.11.2020 Сообщений: 616
	10.02.2021, 15:29 [ТС]
	то есть ими надо заполнить всю страницу? 0

@Andriyipz 0 / 1 / 0 Регистрация: 01.11.2020 Сообщений: 616
	11.02.2021, 20:24 [ТС]
	да.... 0

@Andriyipz 0 / 1 / 0 Регистрация: 01.11.2020 Сообщений: 616
	11.02.2021, 20:58 [ТС]
	как расширить контент чтобы белого не было по бокам или не надо? Миниатюры 0

@Andriyipz 0 / 1 / 0 Регистрация: 01.11.2020 Сообщений: 616
	11.02.2021, 21:04 [ТС]
	что можно добавить в 2,5,3 блок? 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	11.02.2021, 21:08
	Andriyipz, в 5 блок разместите заголовок статьи (h1). В левую колонку можно разместить навигацию (меню сайта), для подвала у вас уже есть контент что выше приводил. Походите по сайтам и посмотрите структуру, может придет идея какая нибудь. 0

@Andriyipz 0 / 1 / 0 Регистрация: 01.11.2020 Сообщений: 616
	11.02.2021, 21:24 [ТС]
	Хотел в 2 блок разместить эту навигацию https://dbmast.ru/vydvigayushh... histom-css но чего не работает 0

@Andriyipz 0 / 1 / 0 Регистрация: 01.11.2020 Сообщений: 616
	12.02.2021, 11:32 [ТС]
	не знаете почему? 0

Вложенные блоки

Решение