Как сделать блок с текстом [закрыт]
Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.
Закрыт 2 года назад .
Как сделать такой адаптивный блок с текстом?
Отслеживать
задан 19 июл 2021 в 20:46
71 1 1 серебряный знак 6 6 бронзовых знаков
Что именно вызывает у вас сложность?
19 июл 2021 в 20:47
«Как сделать блок с текстом» — берешь блок; берешь текст; и делаешь блок с текстом i.imgur.com/H89tkaU.gifv
19 июл 2021 в 21:20
данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему)
20 июл 2021 в 0:12
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
body < display: flex; >.text
Заголовок
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
CSS — Урок 8. Блоки
В HTML все элементы можно разделить на два типа: блочные и строчные.
Блочные элементы визуально создают самостоятельную структурную единицу — блок. К ним можно отнести, например, элементы H1-H6, P, DIV. Такие элементы отделяются от других абзацными отступами.
Строчные элементы выводятся линейной строкой. К ним можно отнести, например, элементы I, B, U, S и другие.
В CSS модель документа представляется блоком. Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Причем, есть блоки, структурно отделенные от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.
Блок имеет прямоугольную форму:
Итак, у блока есть содержимое, например, для элемента p — это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого.
Затем идет граница блока (border), которая может быть как видимой, так и невидимой.
Также блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента.
Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.
Способы задания всех этих свойств мы рассмотрим позже, а пока, чтобы стало понятнее, приведем пример. Пусть у нас есть html-страница с двумя абзацами:
Как сделать блоки в html
14 июня
21646
Комментариев: 0
Благодаря блокам вы можете создавать веб-страницы, не используя при этом таблицы. Основными свойствами блоков считаются высота и длина. Данные параметры могут задаваться как в процентах, так и в пикселях.
Наиболее популярным блочным элементом принято считать , который используется для выделения частей веб-документа и последующего их изменения. Что касается позиционирования, то оно бывает трех типов:
- Абсолютное позиционирование.
- Перемещаемый объект.
- Абсолютное позиционирование.
Первый тип позиционирования подходит именно для веб-страниц. Уточним, что за абсолютное позиционирование отвечает свойство position с заданным свойством absolute, тогда как смещение блоков возможно за счет свойств top, left, right и bottom. Например, пропишем в таблице стилей такие параметры как высота, длина, фон и т.д., а также добавим идентификаторы
и
:
.block1
width: 200px;
background: #fe4164;
padding: 5px;
padding-right: 20px;
float: left;
.block2
width: 200px;
background: #cd5c5c;
padding: 5px;
float: left;
position: relative;
top: 30px;
left: -60px;
Блоки в браузере:
Теперь добавим на страницу четыре блока, добавив для каждого из них ID:
width: 618px;
height: 800px;
position: absolute;
left:0px;
border: 1px solid blue;
#leftmenu
width: 90px;
height: 200px;
position: absolute;
top:50px;
left:0px;
border: 1px solid blue;
#rightnews
width: 90px;
height: 200px;
position: absolute;
top:50px;
left:528px;
border: 1px solid blue;
#center
width: 396px;
height: 200px;
position: absolute;
top: 50px;
left:110px;
border: 1px solid blue;
Блоки в CSS
Блоки позволяют создавать веб-страницы без использования таблиц. Ключевые свойства блока ー высота и длина (задаются в процентах и пикселях). Одним из самых популярных блочных элементов считается . Он нужен для выделения той или иной части документа для изменения содержимого.
Говоря о блоках, не стоит забывать и о позиционировании, которое разделяют на три вида:
- Абсолютное позиционирование.
- Перемещаемый объект.
- Абсолютное позиционирование.
Для веб-страниц как нельзя лучше подходит именно абсолютное позиционирование, за которое отвечает свойство position с заданным свойством absolute, а смещение блоков делается при помощи свойств top, left, right и bottom. Например:
width: 200px;
background: #fe4164;
padding: 5px;
padding-right: 20px;
float: left;
width: 200px;
background: #cd5c5c;
padding: 5px;
float: left;
position: relative;
top: 30px;
left: -60px;
В таблице стилей вы прописываете нужные параметры (высота, длина, фон и пр), а затем прописываем идентификатор:
. В браузере блоки выглядя так:
Разберемся, как сделать четыре блока на веб-странице. Например, мы хотим, чтобы на нашей станице появились блоки для логотипа, левого меню, ленты новостей и центральной части. Пропишем стили для каждого из них и зададим ID:
width: 618px;
height: 800px;
position: absolute;
top:0px;
left:0px;
border: 1px solid blue;
width: 90px;
height: 200px;
position: absolute;
top:50px;
left:0px;
border: 1px solid blue;
width: 90px;
height: 200px;
position: absolute;
top:50px;
left:528px;
border: 1px solid blue;
width: 396px;
height: 200px;
position: absolute;
top: 50px;
left:110px;
border: 1px solid blue;